构建基于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效果: 墨颀 CMSQQ讨论群: 344271543项目: https://github.com/gmszone/moqi.mobi