随笔 - 290  文章 - 10  评论 - 85  2

思维方式的变化

  • WebForm时代, Aspx.cs 取得数据,绑定到前台的Repeater之类的控件.重新渲染整个HTML页面.就是整个页面不断的刷新;后来微软打了个补丁,推出了AJAX控件,比如UpdatePanel,就不是整个HTML页面渲染了,只是渲染指定的UpdatePanel里面的DOM
  • MVC时代, Controller的Method取得数据,传递到Model或者ViewBag,前台的Razor引擎就是比较纯粹的HTML了,对Model的数据做个循环,就能显示出需要的数据;这个方法方便和设计师合作.通常设计师设计是图片,再切图成CSS/HTML, 取消的控件的概念,整个html就比较清爽了.
  • Jquery的兴起, 你要在页面改变某个元素,你得操心具体的DOM的结构.看下面的代码是不是很熟悉呢?
        $.ajax({
            url: '/api/data/query',
            data: {
                id: id
            }
        }).done(function(res){
            if(res.code == 200) {
                var name = res.data.name;
                $input.val(name);
                $name_text.text(name);
            }
        })
    
     var params = {name: name};
    
        $.ajax({
            url: '/api/data/save',
            data: params
        }).done(function (res) {
            if (res.code == 200) {
                $name_text.text(name);
            }
        })

    这种实现的主要问题在于:

    1)在数据变化的时候,必须手工更新DOM,看那两个ajax请求的回调就知道。对这种简单页面可能还好说,要是页面里面包含几十个不同类型的表单控件时,这些页面的更新操作就会变得非常繁杂,而且还容易出错;

    2)缺乏封装,没有体现数据的管理,功能都是直接靠请求与DOM操作实现的,实际上按照面向对象的思路以及职责分离的原则,应该把数据的同步和数据的管理功能单独封装起来,把界面变化的功能也单独封装起来,两部分的内容通过接口或者事件来交互。

 

posted on 2017-03-08 15:15  Gu  阅读(...)  评论(...编辑  收藏