search

mominger / blog

Tech blog
45 stars 3 forks source link

前端应用框架(二） #5

Open mominger opened 9 years ago

mominger commented 9 years ago

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

biaogeyingyongkuangjia

剖析抢红包项目

qianghongbao

图解

  • 静态TPL：指HTML字符串格式化；
  • 动态TPL：支持迭代语法的模板，如underscore template
  • 为什么不采用通用的模块化？模块化需引入第三方库如sea/require.js。1：为了精简 2:没有复杂的依赖需要管理
  • 为什么在service层(三层合一)里，没有接口类？ 因为业务不够复杂。接口类通过(模拟)继承来强行制定流程。在必不可缺时才采用。在使用上，组合优于继承。

    探讨移动端购物网站

gouwu

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

  • 采用模块化： 要通过模块ID，去按需加载；项目复杂度的提升，会引入组件等，需要考虑依赖管理。
  • M层拆分出来：但未对M层规定详细流程，只做通用处理
  • 三层合一+分层 混合模式： 以偏交互、偏展示来区分。偏展示不存id拆分类时，将相应方法挂到id.js里。

    探讨PC端购物网站

pcgouwu

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

  • 动态TPL/静态TPL：以页面交互的复杂度判断采用何种模板
  • M层: 显式提供代理方法，交互能力
  • 三层合一/分层 + 引入框架 混合模式： 以偏交互、偏展示来区分。

    最后探讨业内框架Backbone

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)');