Blog

Blog

PHODAL

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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签