一、引言
首先這些年關於前端技術層出不窮，從最早的只用js做簡單驗證，到現在發現好像大前端已經無所不能了的感覺。特別是為了降低前端開發復雜度，涌現了一大批 的MVC/MVVM模式的前端框架，不停了刷新我們的代碼組織結構及開發模式，比如：BackboneJS、EmberJS、KnockoutJS、 AvalonJS(國產)、AngularJS、ReactJS等等。
二、現有主流框架
我們的開發模式第一次革命應該算是從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，控件實例(無論是shadow還是virtual都對應到一個virtual 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交互了。
五、關於可能存在的問題和探索
上面我給大家描述了我的思路及想法，我們再分析可能面對的問題。
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上，如果有興趣的朋友，可以加入一起設計構思及開發。大家有好的想法，意見建議歡迎給我留言