前端解耦的一个最简单示例
程序员文章站
2022-03-02 11:09:30
...
且看这样一段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又剥离成为模板和数据两个部分。
文章系本人原创,转载请注明作者和出处