前端应用框架(二）

先看综合购物网站(如苏宁易购)的三种项目：

类型	平台	案例	应用框架	写法	目的
中展示轻交互小内存	移动端	抢红包项目	隐式(逻辑)分层 VCM三层合一	对象	精简
中展示中交互小内存	移动端	购物网站	隐式+显式(物理)分层 中展示：VCM三层合一 中交互：静态TPL+VC+M	模块化	精简主、交互辅
重展示重交互大内存	PC端	购物网站	显式分层 重展示:动态TPL+VC+M   重交互(购物车)：Backbone	模块化	精简+交互

 

剖析抢红包项目

图解:    静态TPL：指HTML字符串格式化；

          动态TPL：支持迭代语法的模板，如underscore template

          为什么不采用通用的模块化？模块化需引入第三方库如sea/require.js。1：为了精简  2:没有复杂的依赖需要管理

          为什么在service层(三层合一)里，没有接口类？ 

 

探讨移动端购物网站

图解:    因为交互多了，在红包架构的基础上，进行了如下调整

          采用模块化： 要通过模块ID，去按需加载；项目复杂度的提升，会引入组件等，需要考虑依赖管理。

          M层拆分出来：但未对M层规定详细流程，只做通用处理

          三层合一+分层 混合模式： 以偏交互、偏展示来区分。偏展示不存id拆分类时，将相应方法挂到id.js里。

 

探讨PC端购物网站

图解:    因为交互进一步增强，在WAP架构的基础上，进行了如下调整

           动态TPL/静态TPL：以页面交互的复杂度判断采用何种模板

           M层: 显式提供代理方法，交互能力

           三层合一/分层 + 引入框架 混合模式： 以偏交互、偏展示来区分。

 

最后探讨业内框架Backbone

 

图解:    明显看到，view层提供dom操作，model层提供交互。以backbone的火爆程度，我们是否可以想到些什么？

 

附静态TPL的写法

    /**
     *  格式化:支持 动态参数/数组/json对象
     * @desc xxx{0}xx{1} --> a,b --> xxxaxxb  或 xxx{a}xx{b} --> {a:1,b:2} --> xxx1xx2
     * @returns
     */
    !String.format && (String.prototype.format = function(){
        var jsonFlag = arguments.length == 1 && arguments[0] instanceof Object,
        args = jsonFlag ? arguments[0] : arguments,
        reg = jsonFlag ? /\{(\w+)\}/g : /\{(\d+)\}/g;
        
        return this.replace(reg,              
            function(m, i){
                return args[i];
            });
    });


    //静态TPL
     var TPL = [
            '<section class="hb-item mt15 hb-get-detail" data-detail-id="{id}" data-open-id="{openId}"> ',
            '<a href="javascript:void(0);"  data-event-name="get-detail" >',
            '</section>                                                                  '
        ].join('');


   //生成HTML字符串
   document.body.insertAdjacentHTML('beforebegin','TPL.format(jsonData)');