AngularJS 和 React 两大主流移动框架对比

 似乎已经有无数比较这两个流行的JavaScript框架的文章,和往常一样,你能发现来自两个派别的意见。目前看来,大多数情况下,一个开发者的观点,会在他们工作中大多数使用哪个库/框架/SDK等方面,往往是相当激进的。你使用它来工作,你习惯了使用它,你喜欢上了它,然后你就会在互联网上言辞激烈地争论有关于它的信息。

因此会出现一种像“Angular和React哪个更好”这样的问题,这类似于询问两个中的哪个恰好更流行,但这并不总是最佳衡量指标。所以需要选择的新手开发者该怎么办呢?真实情况是一个产品比另一个产品流行不能证明它就是更好的,我们可以看到许多这种例子的产品。

在这篇文章中,我不会询问哪个更好,而是通过例子比较这两个著名的框架,并让读者选择它们更喜欢的那个。因为在每一种各自的“代码风格”里面存在一个显著的差别。

Demo - Data Grid

我想创建一个简单的data grid而且希望可以增加、移除和更新在网格里面的数据,并且能够以JSON对象的方式来发送网格里面全部的数据(供服务器处理)

如下图

使用Angular实现 —— 分而治之

Angular JS基于MVC设计模式。我们先用Javascript创建一个控制器:

var app = angular.module("myApp", []);
app.controller("ResourceController"function($scope{
    $scope.resources = [{'ResourceAddress''http://www.discoversdk.com''ResourceDescription':'Great site'}];
    $scope.RemoveResource = function (index{
        $scope.resources.splice(index, 1);
    }
        $scope.AddResource = function (newres{
            if ($scope.resources == null) {
                $scope.resources = {};
                $scope.resources = [];
            }
            $scope.resources.push(
                {
                    ResourceAddress: newres.ResourceAddress,
                    ResourceDescription: newres.ResourceDescription,
                });
            newres.ResourceAddress = "";
            newres.ResourceDescription = "";
        }
        $scope.ShowRes = function () {
            alert(JSON.stringify($scope.resources));
        }
});

然后将标识的HTML文件与上面代码相关联:

<div ng-app="myApp" ng-controller="ResourceController">
    <fieldset >
            <h3>Add Resources</h3>
            <span >Description:</span>
            <input type="text" ng-model="newres.ResourceDescription" style="width:200px;" />
            <span > URL:</span>
            <input type="text" ng-model="newres.ResourceAddress" style="width:340px;"  />
            <a class="btn"  href="#" ng-click="AddResource(newres)">Add</a><br/>
           
            <h3>List of Resources</h3>
            <table   cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <th>Description</th>
                    <th>URL</th>
                    <th></th>
                </tr>
                <tr ng-repeat="res in resources">
                    <td><input style="width:200px;" type="text" ng-model="res.ResourceDescription" /></td>
                    <td><input style="width:440px;" type="text" ng-model="res.ResourceAddress" /></td>
                    <td><a class="btn"  ng-click="RemoveResource($index)">Remove</a></td>
                </tr>
                </tbody>
            </table>
            
             <a class="btn" href="#" ng-click="ShowRes()">Show</a>
    </fieldset>
</div>

然后用CSS文件添加样式:

body
{
  font-family:Arial;
  color:#3a3a3a;
}
table
{
  border:none;
  text-align:left;
  margin-bottom:20px;
}
tr th
{
    background-color#3b97d3;
    color#fff;
    padding5px;
    border-right: solid 1px #3b97d3;
    border-left: solid 1px #fff;
}
tr th:first-child
{
  border-left: solid 1px #3b97d3;
}
tr td
{
  padding:5px;
  padding5px;
  border-right: solid 1px #d4d4d4;
}
tr td:first-child
{
  border-left: solid 1px #d4d4d4;
}
table tr:last-child td
{
  border-bottom: solid 1px #d4d4d4;
}
input[type="text"]
{
  height:20px;
  font-size:14px;
}
a.btn
{
  color:#fff;
  background-color:#3b97d3;
  padding:0px 10px;
  height:26px;
  display:inline-block;
  line-height:26px;
  text-decoration:none;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  cursor:pointer;
}
a.btn:hover
{
  background-color:#73c7ff;
}

你可以点击这里查看移动OA和运行代码

使用React实现——具有层次的GUI

我们通过React用层次结构组件构建用户界面,这主要的好处是代码复用

主要的区别是HTML,JavaScript,CSS代码混合到一起,但如果我们想在新的页面重用这个组件,我们只需要复制这一块的代码

所以在React里面,在我们的表格中我们这样在每一行构建一个List Item

var ResourceListItem = React.createClass({
	getInitialState: function() return {ResourceDescription: this.props.children.ResourceDescription, ResourceAddress: this.props.children.ResourceAddress}; 
	},
	removeItem: function(e, index){
		this.props.removeItem(resources.indexOf(this.props.children));
	},
	updateDescription : function(e){
		resources[resources.indexOf(this.props.children)].ResourceDescription = e.target.value;
		this.setState({ResourceDescription: e.target.value});
	},
	updateAddress : function(e){
		resources[resources.indexOf(this.props.children)].ResourceAddress = e.target.value;
		this.setState({ResourceAddress: e.target.value});
	},
	render: function()return (
			<tr>
			<td><input type="text" value={this.state.ResourceDescription} onChange={this.updateDescription} />{this.props.index}</td>
			<td><input type="text" value={this.state.ResourceAddress} onChange={this.updateAddress} /></td>
			<td><button onClick={this.removeItem.bind(null, this.props.children)}>remove</button></td>
			</tr>
		); 
	} });

接着我们构建表格组件:

var RecourceList = React.createClass({ 
	render: function() {
		var that = this;
    var st = {
			backgroundColor: '#3b97d3',
			color: '#fff',
			padding: '5px',
			borderRight: 'solid 1px #3b97d3',
			borderLeft: 'solid 1px #fff'
		};
		var st2 = {
			padding: '5px',
			borderRight: 'solid 1px #d4d4d4',
			width: '250'
		};
		var createItem = function(itemText, indexreturn ( 
				<ResourceListItem removeItem={that.props.removeItem} key={index}>{itemText}</ResourceListItem> 
			); 
		};
		
		return (
			<table> 				<thead> 					<tr style={st}> 						<td style={st2}>Description</td> 						<td style={st2}>Url</td> 						<td></td> 					</tr> 				</thead> 				<tbody> 					{this.props.items.map(createItem)} 				</tbody> 			</table>
		) 
	} });

然后我们用同样的方式添加网格组件并声明我们的应用:

var MainApp = React.createClass({
	getInitialState: function() {
		return {items : resources};	
	},
	addItems: function(newItem){
		resources = resources.concat([newItem]);
		this.setState({items: resources}); 
	},
	removeItem: function(itemIndex){
		resources.splice(itemIndex, 1);
		this.setState({items: resources});
	},
	show: function(){
		alert(JSON.stringify(resources));
	},
	render: function()return (
			<fieldset>
			<div>
				<h3>Add Resources</h3>
				<AddResourceForm onFormSubmit={this.addItems} />
				<a href="#" onClick={this.show}>Show</a>
				<h3>List of Resources</h3>
				<RecourceList items={this.state.items} removeItem={this.removeItem} /> 
			</div>
			</fieldset>
		); 
	} });

你可以点击这里查看并运行代码(要注意的是jsfiddle的react支持有一点限制因此它会更改代码,你需要选择常规的JavaScript并选择回退JavaScript7来运行它)

MASTUDIO 案例、典型应用
基于我们的优势,众多客户信任并使用MASTUDIO移动中间件,部署他们的移动应用: