前端解耦的一个最简单示例

前端解耦的一个最简单示例

且看这样一段HTML片段:
<div style="background-color: red" id="name" onclick="alert('');">
    Jim
</div>
这是前端代码全部耦合在一起的例子,下面对它进行MVC解耦。
 
第一步解耦,把View层分离出来:
<div id="name" class="name" onclick="alert('');">
    Jim
</div>
同时,引入一表示name的css。
 
第二步解耦,把Controller分离出来:
<div id="name" class="name" onclick="clickName()">
    Jim
</div>
把点击的行为逻辑转移到一个方法上了。
 
第三步解耦,把Controller和Model的关联关系剥离出来:
<div id="name" class="name">
    Jim
</div>

借助JQuery,增加绑定方法,关联div和点击行为:

$("#name").click(
    function(){ alert(""); }
);
在后端,M和C这样的关联关系有多种实现方式,比如xml配置文件,比如注解,比如规约方式;在前端,这里采用绑定的方式关联。
 
第四步解耦,借助backbone.js,把数据和模板分离:

<script type="text/template" id="name-template">
    <div id="name" class="name">
        <%=name%>
    </div>
</script>

增加js代码,渲染模板:

window.NameView = Backbone.View.extend({
    template : _.template($('#name-template').html()),
    ……
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});
而渲染模板的数据通过ajax异步获取。ajax不仅仅给用户带来好的体验,也给前端程序员带来变革,它让前端页面的展示可以拆分为多个步骤,增加了解耦的可能性。
 
至此,原有的单个HTML片段已经解耦成为:M:HTML模型,View:CSS,C:JavaScript方法;同时,M和C之间的映射使用绑定方式关联,M又剥离成为模板和数据两个部分。
 

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接《四火的唠叨》

分享到:

4 comments

  1. [...] 前端解耦的一个最简单示例 [...]

  2. werwerw 说道:

    怎么把模板独立出来放到tpl文件中?不能把木板写在js里吧

    • 四火 说道:

      模板文件可以单独维护,可以通过后端的模板引擎来聚合,比如:

      <jsp:include page="demoTemplate.jsp" />

      前端只要保证在页面执行模板渲染的时候,可以在页面上找到这样的模板片段:

      <script type="text/template" id="name-template">
          <div id="name" class="name">
              <%=name%>
          </div>
      </script>

       

  3. 匿名 说道:

    so easy

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Preview on Feedage: