且看这样一段 HTML 片段：
1 2 3 | <div style="background-color: red" id="name" onclick="alert('');"> Jim</div> |
这是前端代码全部耦合在一起的例子，下面对它进行 MVC 解耦。
第一步解耦，把 View 层分离出来：
1 2 3 | <div id="name" class="name" onclick="alert('');"> Jim</div> |
同时，引入一表示 name 的 css。
第二步解耦，把 Controller 分离出来：
1 2 3 | <div id="name" class="name" onclick="clickName()"> Jim</div> |
把点击的行为逻辑转移到一个方法上了。
第三步解耦，把 Controller 和 Model 的关联关系剥离出来：
1 2 3 | <div id="name" class="name"> Jim</div> |
借助 JQuery，增加绑定方法，关联 div 和点击行为：
1 2 3 | $("#name").click( function(){ alert(""); }); |
在后端，M 和 C 这样的关联关系有多种实现方式，比如 xml 配置文件，比如注解，比如规约方式；在前端，这里采用绑定的方式关联。
第四步解耦，借助 backbone.js，把数据和模板分离：
1 2 3 4 5 | <script type="text/template" id="name-template"> <div id="name" class="name"> <%=name%> </div></script> |
增加 js 代码，渲染模板：
1 2 3 4 5 6 7 8 | 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 又剥离成为模板和数据两个部分。
文章未经特殊标明皆为本人原创，未经许可不得用于任何商业用途，转载请保持完整性并注明来源链接 《四火的唠叨》
怎么把模板独立出来放到 tpl 文件中？不能把木板写在 js 里吧
模板文件可以单独维护，可以通过后端的模板引擎来聚合，比如：
<jsp:include page="demoTemplate.jsp" />
前端只要保证在页面执行模板渲染的时候，可以在页面上找到这样的模板片段：
<scripttype="text/template"id="name-template"><divid="name"class="name"><%=name%></div></script>so easy