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

　　且看这样一段HTML片段：

<div id="name" style="background-color:red" 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又剥离成为模板和数据两个部分。

　　

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