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

?

且看这样一段HTML片段：

?

?
这是前端代码全部耦合在一起的例子，下面对它进行MVC解耦。
?
第一步解耦，把View层分离出来：
?
?
同时，引入一表示name的css。
?
第二步解耦，把Controller分离出来：
?
?
把点击的行为逻辑转移到一个方法上了。
?
第三步解耦，把Controller和Model的关联关系剥离出来：
?
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又剥离成为模板和数据两个部分。
?
文章系本人原创，转载请注明作者和出处
?
?