首页 > 代码库 > 构建基于Javascript的移动CMS——生成博客(三).重构
构建基于Javascript的移动CMS——生成博客(三).重构
当前墨颀CMS的一些基础功能设计已经接近尾声了,在完成博客的前两部分之后,我们需要对此进行一个简单的重构。为的是提取出其中的获取Blog内容的逻辑,于是经过一番努力之后,终于有了点小成果。
墨颀CMS 重构
我们想要的结果,便是可以直接初始化及渲染,即如下的结果:
initialize: function(){ this.getBlog(); }, render: function(response){ var about = { about:aboutCMS, aboutcompany:urlConfig["aboutcompany"] }; response.push(about); this.$el.html(Mustache.to_html(blogPostsTemplate, response)); }
为的便是简化其中的逻辑,将与View无关的部分提取出来,最后的结果便是都放在初始化里,显然我们需要一个render
,只是暂时放在initialize
应该就够了。下面便是最后的结果:
initialize: function(){ var params=‘#content‘; var about = { about:aboutCMS, aboutcompany:configure["aboutcompany"] }; var blogView = new RenderBlog(params, ‘/1.json‘, blogPostsTemplate); blogView.renderBlog(about); }
我们只需要将id、url、template传进去,便可以返回结果,再用getBlog部分传进参数。再渲染结果,这样我们就可以提取出两个不同View里面的相同的部分。
构建函数
于是,我们就需要构建一个函数RenderBlog,只需要将id,url,template等传进去就可以了。
var RenderBlog = function (params, url, template) { this.params = params; this.url = url; this.template = template; };
用Javascript的原型继承就可以实现这样的功能,虽然还不是很熟练,但是还是勉强用了上来。
RenderBlog.prototype.renderBlog = function(addInfo) { var template = this.template; var params = this.params; var url = this.url; var collection = new BlogPostModel; collection.initialize(url); collection.fetch({ success: function(collection, response){ if(addInfo !== undefined){ response.push(addInfo); } RenderBlog.prototype.render(params, template, response); } }); }; RenderBlog.prototype.render = function(params, template, response) { $(params).html(Mustache.to_html(template, response)); };
大致便是将原来的函数中的功能抽取出来,再调用自己的方法。于是就这样可以继续进行下一步了,只是暂时没有一个明确的方向。
其他
CMS效果: 墨颀 CMS
QQ讨论群: 344271543
项目: https://github.com/gmszone/moqi.mobi
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。