Reactjs-JQuery-Vuejs-Extjs-Angularjs论剑
发布在Omi2015年6月12日view:5541React
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

写在前面

前端越来越混乱了,当然也可以美其名曰:繁荣。 当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? 那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所适从 = =! 本篇拿一注册功能作为样本,使用各种框架去实现功能,从而对比各种方式的优劣。

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是唯一一个让User和View解耦,通过事件回调去关联起来。也可通过watch去实现双向绑定。

5.angularjs没用过,无感。

记得当年做silverlight、WPF的时候OnPropertyChanged不都是自己管理的吗?全都包起来真的好吗? 就这么多。

评论
发表评论
2年前
        <div><input type="text"   ng-model="user.password"/></div>
        <div><input type="button" value="save" ng-click="save()"/></div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript">

    (function (app){
        app.controller("app.controller",["$scope",function($scope){
            $scope.save = function(){
                saveToDB($scope.user.name,$scope.user.password);
            }
        }])
    })(angular.module("app"),[])
</script>
2年前

@-Lucifier- 可以用上LinkState

2年前

vue.js里面的事件监听后面不用括号吧。。不过好像加了也╮(╯_╰)╭

2年前

react不用写那么长

//jsx
var RegisterComponent = React.createClass({
    handleClick: function() {
        var name = this.refs.name.getDOMNode().value.trim()
        var status = this.refs.status.getDOMNode().value.trim()
        saveToDB(name, status)
    },
    render: function() {
        return (<div>
                    <div><input type="text" ref="name" /></div>
                    <div><input type="text" ref="status"  /></div>
                    <div><input type="button" value="save" onClick={this.handleClick} /></div>
                </div>)
    }
})

function saveToDB(data) {
    fetch(url, {
        method: 'post',
        data: data
    })
}
})
2年前

@司徒正美 做广告哈哈,不过支持正妹的努力

2年前

加上avalon的实现

<div ms-controller="demo">
    <div> <input ms-duplex="name"></div>
    <div> <input ms-duplex="status"></div>
    <div> <input ms-click="save" type="button" value="save"></div>
</div>
<script>
    var demo = avalon.define({
        $id: "demo",
        name:"",
        status:"",
        save: function () {
           saveToDB(demo.$model);
        }
    })

    function saveToDB(data) {
        jQuery.post(url, data, callback)
    }
</script>
WRITTEN BY
当耐特
AlloyTeam高级工程师
TA的新浪微博
PUBLISHED IN
Omi

关于Omi的教程、Omi的原理、Omi的生态等Omi的一切

我的收藏