Reactjs-JQuery-Omi-Extjs-Angularjs對比

【當耐特】發表於2015-05-06
ReactJSjQueryAngular

寫在前面

前端越來越混亂了，當然也可以美其名曰：繁榮。
當新啟動一個前端專案，第一件事就是糾結：使用什麼框架，重造什麼輪子？
那麼，希望看完此篇，能夠給你一個清晰的認識，或者讓你更加地糾結和無所適從 = =！
本篇拿一註冊功能作為樣本，使用各種框架去實現功能，從而對比各種方式的優劣。

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>

簡單粗暴，使用者行為驅動的思考方式，不需要怎麼動腦= =！

Omi

class Hello extends Omi.Component {

    style () {
      return  `
          h1{
            cursor:pointer;
          }`
    }
  
    handleClick(evt){
      alert(evt.target.innerHTML);
    }
  
    render() {
      return  `
      <div>
        <h1 onclick="handleClick">Hello ,{{name}}!</h1>
      </div>`
    }
}

Omi.tag('hello', Hello)

class App extends Omi.Component {
  
    render() {
        return  `
        <div>
            <hello data-name="Omi"></hello> 
        </div>`
    }
}

Omi.render(new App(),"#container")

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.Omi騰訊出品非常強大
3.reactjs程式碼量最多，因為它既要管理UI邏輯，又要操心dom的渲染。
4.extjs是唯一一個讓User和View解耦，通過事件回撥去關聯起來。也可通過watch去實現雙向繫結。
5.angularjs沒用過，無感。

記得當年做silverlight、WPF的時候OnPropertyChanged不都是自己管理的嗎？全都包起來真的好嗎？
就這麼多。

相關文章