关于Web前端开发模式的探索

一、引言

    首先这些年关于前端技术层出不穷，从最早的只用js做简单验证，到现在发现好像大前端已经无所不能了的感觉。特别是为了降低前端开发复杂度，涌现了一大批的MVC/MVVM模式的前端框架，不停了刷新我们的代码组织结构及开发模式，比如：Backbone.js、EmberJS、KnockoutJS、AvalonJS(国产)、AngularJS、Reactjs等等。

    其实上面都算是代码结构组织类的框架，而前端其实远不止这些，我大致分了下类，可能还有很多没考虑到欢迎补充：
    1、动态加载，如requirejs seajs
    2、代码结构组织，即上面提到那些前端框架，Backbone.js、EmberJS、KnockoutJS、AvalonJS(国产)、AngularJS、Reactjs、Polymer等
    3、代码类库，如jquery zepto json2 momentjs
    4、UI类库，如yui jqueryui extjs easyui kendoui dhtmlx bootstrap,还有raphael.js之类
    5、插件，jqgrid datatable.js ckeditor等
    6、IE兼容性，es5-shim.js html5shiv.js respond.js selectivizr.js等
    7、工具类，如nodejs npm bower grunt gulp webpack等 还有less sass对css预处理工具,特别是nodejs带来全栈时代

二、现有的框架的存在的一些缺点

    我们的开发模式第一次革命应该算是从google提出ajax一直到nodejs变化是非常的大，我们也在尝试着找到更合理更简单更适合的开发模式。我自己也经历过从原生js的开发到使用jquery操作dom，再到应用knockoutjs、avalonjs、angularjs及reactjs到我们的项目中（backbonejs、emberjs、polymer我没实际使用过），发现我们的程序越写越简单，而且越来越有意思。但每个框架专注点是不一样的，而且也有一些缺点：
    1、angularjs,体积庞大过于复杂不适合轻量级应用，而且我对1.3放弃IE8及2.0的跳跃式发展耿耿于怀，最终开始把目光投向reactjs。
    2、reactjs,研究了一段时间发现还真不错，首先是比较轻量极，性能也是很赞，最主要是它提出的Virtual DOM的概念，我觉得也算是一个革新了，但是它其实算不上是一个框架，它的专注点在于生成UI，就跟ng中的directive一个等级的，所以很多东西还要自己实现，它只能算我们的一个利器要架构一个复杂的应用还需要很多的工作。还有一点就是我比较不喜欢它的jsx这个玩意，虽然它可以在服务端处理。应该算是我的个人偏见吧。
    3、polymer理念很超前，基于web component实现，我个人也觉得这是未来的趋势。
    但是目前来说对于Shadow DOM的浏览器的兼容性：http://caniuse.mojijs.com/Home/Html/item/key/shadowdom/index.html，我估计除了研究没人会想用它了，而且它还利用了html5的imports:http://www.html5rocks.com/en/tutorials/webcomponents/imports/,它这种模式产生的问题非常明显，就是需要import太多的html，而且还有嵌套的概念，可想而知。

三、我对前端开发的想法

    这些框架都很强悍，但是我觉得实际开发，一个好的框架应该是要把已有的类库、插件等等的这些完美的结合起，并且提供简单易用的接口及合理的代码组织结构，现有的jquery插件非常的多（其实jquery比这些东西流行的多的多），现有的开源很多的类库我们都可以使用。我的思路是现有的这些资源应该要充分利用起来。所以我想自己整一个前面框架出来。我构想设计了下:

1、web component思路，结合Shadow DOM 及 Virtual DOM，如果支持Shadom DOM就使用Shadom DOM否则使用Virtual DOM实现。
2、控件定义尽量简单易懂，可快速包装现有的插件，控件存在继承的概念，控件存在少量修改时可以考虑继承覆写的方式实现。
3、实现MVVM的双向绑定，实际是三向（实际dom，控件实例(无论是shadw还是virtual都对应到一个virtal dom)、数据）

我暂时把这个项目叫做 Chitu.js 即赤兔.js，接下来会放到github上。

四、细化及实现思路

1、标签定义
比如我们需要一个hello的控件

<hello id="id1" binding="hello1"></hello>

2、控件定义
我们定义hello的控件

chitu.component('hello', function (self) {  //属性定义  self.name = {    get: function () { return self.root.getAttribute("name"); },    set: function (value) { self.root.setAttribute("name", value); }  };  self.value = {    get: function () { return self.root.innerText; },    set: function (value) { self.root.innerText = value; }  };  //...  //事件定义  self.onclick = function(){  };  //...  //方法定义  self.setColor = function(color){    self.root.style.color = color;  };  //...  //控件生成  self.render = function () {    //...    var text = document.createTextNode(self.value);    return text;  };  //控件消亡  self.dispose = function(){  };});

这里就是整个hello的控件的定义，就是把hello控件实例看作一个virtual节点，这是reactjs的思路，但是实现上面如果是支持shadow dom可以使用把render中返回的节点放到shadow dom中。

这里的控件属性与实际dom的双向连动是通过引入get set方法来实现的，实际上这个代码还需要经过一次complie处理，把get set方法通过ES5的Object.defineProperty方法转换成属性（先不考虑兼容性）。

这里如果要集成jquery控件就非常容易了，比如combobox控件：

chitu.component('combobox', function(self){  self.value = {    get:function(){return $(root).combobox('getValue');},    set:function(value){$(root).combobox('setValue',value);}  };    self.render = function(){    $(root).combobox(options);    return root;  };  self.dispose = function(){    $(root).combobox('dispose');  };});

如果控件需要继承可以这样，定义一个mygridEx继承mygrid控件

chitu.component("mygridEx", function(self){  //覆写属性  self.attr1 = {    get:function(){},    set:function(){}  };    //覆写方法  self.getRowCount = function(){  }},"mygrid");

3、控制器

chitu.controller('ctrl1',function(scope){  scope.data ={    tenant_id:'001',    tenant_name:'tenantname',    height:100  };  scope.hello={    name:'helloname',    value:'world'  }  scope.grid1 ={    width:500,    height:'{data.height}',    rowClick:function(row){      scope.vdom.id1.value = row.name;    }  };  scope.search1={    text:'{data.teannt_name}',    searchClick:function(){          }  };});

这里需要解释下<hello id="id1" binding="hello1"></hello>

这里的binding实际上对应的是controller当中的属性，这个属性其实就是控件的选项参数，我们以前调用jquery控件时

$('#id').jqgrid({  //一堆参数});

这样的话，这一堆参数就可以通过一个binding跟页面联系起来，方便控件的使用，当然还可以在控件定义时就定义好很多默认的参数，只需要传入需要改变的参数。
当然我们的参数也不一定都要写在binding当中，也可以单独绑定控件属性

<hello id="id1" [value]="world" ></hello><hello id="id1" [value]="{data.tenant_name}" ></hello><hello id="id1" binding="hello1" [value]="world" [onclick]="search1.searchClick"></hello>

第一行:没有对应的binding属性,只有一个value属性,value的值为world
第二行:value的值双向绑定到controller中的data.tenant_name数据上
第三行:先从bindig的hello1中取值,如果有[value]则覆盖原值

这里为什么给属性加上[中括号],是因为属性叫什么名字都可能,尽量避免和原dom属性冲突。

控件器中还有一点设计值得说的是，我们可以把数据集中在scope.data中
1、其它地方绑定只需要{data.row1.field1}这样指定绑定就好
2、我们可以不需要先data中的结构是怎么样子，根据绑定关系生成data的结构
3、大多数情况下我们取回来的数据就是一个返回result,我们直接赋值给scope.data即可，不需要hello1.value = result.name , grid1.data = result.list;这样的处理。
4、我们需要提交数据时，也只需要从data中取即可，非常方便

当然对于普通的标签，我们也是可以绑定的

<div [title]="{data.title}" [text]="{data.text}" [onclick]="search1.searchClick" ></div>

这样一来，我们的代码可能就会集中在controller的一些方法当前中了，我们在controller中可以直接获取到每个控件实例，可以直接访问控件的各个属性即可实现交互。

当然如果有绑定到data数据中，直接操作数据也可以实现ui交互了。

五、关于Chitu.js问题和探索

上面我给大家描述了我的思路及想法，我们再分析可能面对的问题。
1、兼容性
    目前只是在尝试阶段，很多问题还没碰到，我的目标是尽量做到IE8+
2、性能
    关于性能的消耗，可能主要是在于节点扫描、控件render、属性绑定及属性频繁的刷新。节点扫描当然会有些消耗，但是它带来的方便性可以忽略它的消耗，除非你想一个一个控件指定去手动调用，控件render就取决了你写的控件本身了，不算是这个框架的问题，属性绑定在数据量没有大到一定程度是基本是不会有问题的。
3、开发效率
    开发效率主要就取决于是否做到了关注点分离，代码组织是否清晰合理简单易懂，代码只需要写有变化的东西，把重复的细节都封装起来，这个只能是尽量做到了。

关于我的其它的一些想法

1、需不需要引入类似css的东西用于分离页面与controller之间的绑定，这样还可以去除节点扫描，提高性能，如下

var binding={  '#id':'todo1',  '#grid1':'grid',  '#hello1':'hello'};

2、关于render处理，这里我认为有这些方式
    a、用代码实现（原生、jquery)
    b、模板实现或拼接字符串
    c、通过预生成的方式（类似jsx，也可通过nodejs c# java等语言)

3、关于属性刷新
    因为控件属性是直接绑定到原生的dom上的，如果出现了大量的属性刷新恐带来性能问题，是否考虑一个参数用来开启关闭（立即刷新、一次性刷新）

4、跟amd cmd结合
    这个是没有任何问题的，而且如果控件都是包装第三方控件的话，实现动态加载还可以更加的方便。

5、是否还需要引入其它特性，如ng注入特性、过滤器等

6、哪些环节还可以在服务端预处理

六、结束语

    目前我自己也才刚刚一个想法，有很多问题可能还没具体想清楚，现在自己先实现了一个简易的版本，等我先折腾出一个0.1的版本，我就会放到github上，如果有兴趣的朋友，可以加入一起设计构思及开发。大家有好的想法，意见建议欢迎给我留言。

原标题：关于Web前端开发模式的探索

关键词：Web前端