构建基于Javascript的移动CMS——生成博客(三).重构

浏览数：27 / 时间：2015年06月11日

当前墨颀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));
};

大致便是将原来的函数中的功能抽取出来，再调用自己的方法。于是就这样可以继续进行下一步了，只是暂时没有一个明确的方向。