构建基于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

今天不想走，明天就要跑了。