以前常关注后台的MVC,M即模型（数据vo以及处持久化操作等）,V即展现方面，C控制，主要处理逻辑转向。
而对于页面上的mvc模型，基本上与后台那套相差不几。体现优势：让js与html偶合性降低，复用与扩展性增加。最近最的项目中前端组件，也体现上面的思想————将后台传入的VO放在页面上，对于页面上某个标签的赋值，不需要再去访问标签，而是所有操作通过js处理。关于这个项目的思想我会在后面文章中提出。
先看看原始页面的操作：
1、<BODY>
<input type="button" value="baidu" οnclick="alert(this.value);"/>
</BODY>
上面input标签展现与js数据与控制相耦合。对于以后的修改，关注点较多。
2、
<BODY>
<input type="button" value="baidu" οnclick="tipInfo(this);"/>
<SCRIPT LANGUAGE="JavaScript">
function tipInfo(o){
alert(o.value);
}
</SCRIPT>
</BODY>
js代码相对集中，但是v m与v还是紧密接合在一起，
3、
<BODY>
<input type="button" value="baidu" id="baidu"/>
</BODY>
<script src="example.js"></script>
</HTML>
分离出来的模型model和控制control的综合example.js代码：
var o = document.getElementById("baidu");
o.onclick = function(){
alert(this.value);
}
现在v彻底与m c分离，但是关注m与c还是无法分开，关注点还是较复杂4、
<BODY>
<input type="button" value="baidu" id="baidu"/>
</BODY>
<script src="model.js"></script>
<script src="control.js"></script>
//control.js
function G(id){
return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
if(G(id)) G(id)["on"+even] = function(){ fun(arr);};
}
UI.register("baidu","click",tipInfo,[1,2]);
//model.js
function tipInfo(arr){
alert(arr[1]);
}
扫一扫
4217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
