淺析angular，react，vue.js jQuery使用區別

前端愈來愈混亂了，固然也能夠美其名曰：繁榮。
當新啓動一個前端項目，第一件事就是糾結：使用什麼框架，重造什麼輪子？

PS:大牛留言討論
那麼，但願看完此篇，可以給你一個清晰的認識，或者讓你更加地糾結和無所適從 = =！
本篇拿一註冊功能做爲樣本，使用各類框架去實現功能，從而對比各類方式的優劣。

JQuery

<div> <div><input type="text" id="nameIpt"/></div> <div><input type="text" id="statusIpt"/></div> <div><input type="button" value="save" id="saveBtn"/></div> </div> <script>  $(function () {  $("#saveBtn").click(function () {  saveToDB($.trim($("#nameIpt").val()), $.trim($("#statusIpt").val()));  })  function saveToDB() {  //save to db  }  }) </script>

簡單粗暴，用戶行爲驅動的思考方式，不須要怎麼動腦= =！

Vuejs

<div id="demo"> <div> <input v-model="name"></div>  <div> <input v-model="status"></div> <div> <input v-on="click:save()" type="button" value="save"></div> </div> <script> var demo = new Vue({ el: '#demo', data: { name: '', status:'' }, methods: { save: function () { saveToDB(this.name, this.status); } } }) function saveToDB(name, status) { //.. //.. } </script>

vuejs給人以小清新的感受,有沒有同感？

Reactjs

var User = function (name, status) { this.name = name; this.status = status; } User.prototype={ save:function(name,status){ //save to db } } var user = new User(); var RegisterComponent = React.createClass({ displayName: "RegisterComponent", getInitialState: function () { return user; }, onFirstInputChange: function () { this.setState({name: React.findDOMNode(this.refs.fistInput).value}); }, onSecInputChange:function(){ this.setState({status: React.findDOMNode(this.refs.secInput).value}); }, save:function(){ //只有不更改input的時候這個返回true,setState以後就成false console.log(this.state===user) //因此使用this.state吧 user.save(this.state.name,this.state.status); }, render: function () { return ( <div> <div>name: <input type="text" onChange={this.onFirstInputChange} ref="fistInput" value={this.state.name} /> </div> <div>status: <input type="text" onChange={this.onSecInputChange} ref="secInput" value={this.state.status} /> </div> <button onClick={this.save}>save</button>      </div> ); } }); React.render(<RegisterComponent />, document.getElementById("RegisterComponentExample"));

忽然感受代碼量爲何劇增啊？每次調用setState，react都會從新調用render。

Extjs

var user = new User(); var rc = new RegisterComponent({ label: "name", onFirstInputChange: function (value) { user.name = value; }, label: "status", onSecInputChange: function (value) { user.status = value; }, onSave: function () { user.save(); }, renderTo: "#rc-ctt" }); //你不是要雙向綁定嗎？我知足你啊= =！ observer.watch(user, function (prop,value) { if (prop === "name") { rc.firstInputValue = value; } else if (prop === "status") { rc.secInputValue = value; } })

Angularjs

Angularjs就不寫代碼了，上面的代碼都是看到這張圖以後才寫的。
ps:這張圖的出處找不到了，找到的童鞋告知下，我加上文章連接。

總結

1.jquery依然依靠豐富的dom操做去組合業務邏輯，當業務邏輯複雜的時候，每行代碼都會有不知所云的感受。由於:

• 第一：業務邏輯和UI更改該混在一塊兒，
• 第二：UI裏面還參雜這交互邏輯，讓原本混亂的邏輯更加混亂。

固然第二點從另外一方面看也是優勢，由於有的時候UI交互邏輯可以更加靈活地嵌入到業務邏輯，這在其餘MV*框架中都是比較難處理的。
2.vuejs很是小清新，小清新不表明作不了複雜的東西，好比官方的這個demo就不錯：http://vuejs.org/examples/svg.html
3.reactjs代碼量最多，由於它既要管理UI邏輯，又要操心dom的渲染。
4.extjs無感 沒用過。
5.angularjs渲染快，就是量大（相對於vue.js）。