前端MVC_01

  以前常关注后台的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]);

    

    }


   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值