2015前端各大框架比較（angular,vue,react,ant）

時間 2019-11-11

標籤前端框架比較 angular vue react ant 欄目 AngularJS 简体版

原文原文鏈接

前端流行框架大比拼

angularhtml
vue前端
reactvue
ant-designnode

angularjs

angular是個MVVM的框架。針對的是MVVM這整個事。angular的最主要的場景就是單頁應用，或是有大量數據綁定的狀況。react

特性jquery

雙向數據綁定webpack
ioc依賴注入ios
指令git

上面這幾點用起來確實很爽，隨便指定個區域，配一個controller，而後裏面的東西就都在scrope裏了，確實很方便程序員

若是各位想看，參見 https://github.com/i5ting/ionic_ninja/blob/master/angularjs/angularjs_sang.md

其實angular最好的實踐是ionicframework的，讀讀ionic源碼，才知道啥叫規範

vue

vue是尤同窗寫的一個MVVM中ViewModel中的庫。是針對MVVM中的一層。應用的場景比較廣，只想用vue功能的話就用。

Extendable Data bindings
Plain JS object models
API that simply makes sense
Build UI by composing components
Mix & matching small libraries

這個項目是很是活躍的，90後同窗的精力很旺盛啊。

從最初的ViewModel作到今天的各類功能，作加法還真是挺可怕的事兒。

它的guide上說能夠作Building Larger Apps，見http://vuejs.org/guide/application.html

各類路由，組件啥的都有，的確很強大

可是不少人都搞不定的，首先這麼多概念就玩死一票人了，其次，它有太多東西須要本身去實現，就是能夠複用的東西太少了，若是是小項目玩玩無所謂，若是是大的項目，水平通常的程序員是很難hold住的。

這就比如react出來，很好，但沒有啥可複用的東西，寫來是很是痛苦，因此在下面我介紹了react以後，給出了一個更好的基於react的解決方案。

reactjs

https://github.com/facebook/react

Virtual DOM

Virtual DOM是reactjs的最核心概念，我拷貝一段來講明它

在Web開發中，咱們總須要將變化的數據實時反應到UI上，這時就須要對DOM進行操做。而複雜或頻繁的DOM操做一般是性能瓶頸產生的緣由（如何進行高性能的複雜DOM操做一般是衡量一個前端開發人員技能的重要指標）。

React爲此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React都會從新構建整個DOM樹，而後React將當前整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。

並且React可以批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併，例如你連續的先將節點內容從A變成B，而後又從B變成A，React會認爲UI不發生任何變化，而若是經過手動控制，這種邏輯一般是極其複雜的。儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只須要關心在任意一個數據狀態下，整個界面是如何Render的。

說那麼多你可能都沒明白，上例子

helloworld

var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; }});React.render( <HelloMessage name="John" />, document.getElementById('container'));

首先，這是一種 HTML-like 的語法，叫jsx，能夠理解成coffee，typescript之類的，須要編譯

核心就是React.render，說明這個組件放在什麼地方，好比上面的例子就是

<div id='container'> ...
</div>

這樣頁面就能夠拆分紅n個小塊，每塊各自爲政，即所謂的組件化（也就積木同樣）

再來個複雜點的，下面給出的是帶有狀態的組件

var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); React.render(<Input/>, document.body);

視圖相關的3個概念

Props（屬性，就是element上的attrs，換個名字property，變成複數，即props）
State（寫過view組件的基本都會知道，按鈕有三態，Normal，Highlight，Selected，包括extjs，jquery裏的大部分ui框架都是有狀態的。）
Event（其實還應該算一個就是dom事件，上面的例子就把onChange的handler編譯後的handleChange方法，這要感謝jsx）

瞭解了上面這些，就能夠寫代碼了，由於