似乎已经有无数比较这两个流行的JavaScript框架的文章,和往常一样,你能发现来自两个派别的意见。目前看来,大多数情况下,一个开发者的观点,会在他们工作中大多数使用哪个库/框架/SDK等方面,往往是相当激进的。你使用它来工作,你习惯了使用它,你喜欢上了它,然后你就会在互联网上言辞激烈地争论有关于它的信息。 因此会出现一种像“Angular和React哪个更好”这样的问题,这类似于询问两个中的哪个恰好更流行,但这并不总是最佳衡量指标。所以需要选择的新手开发者该怎么办呢?真实情况是一个产品比另一个产品流行不能证明它就是更好的,我们可以看到许多这种例子的产品。 在这篇文章中,我不会询问哪个更好,而是通过例子比较这两个著名的框架,并让读者选择它们更喜欢的那个。因为在每一种各自的“代码风格”里面存在一个显著的差别。 Demo - Data Grid 我想创建一个简单的data grid而且希望可以增加、移除和更新在网格里面的数据,并且能够以JSON对象的方式来发送网格里面全部的数据(供服务器处理) 如下图
使用Angular实现 —— 分而治之 Angular JS基于MVC设计模式。我们先用Javascript创建一个控制器: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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文件与上面代码相关联: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | < 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文件添加样式: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | body
{
font-family : Arial ;
color : #3a3a3a ;
}
table
{
border : none ;
text-align : left ;
margin-bottom : 20px ;
}
tr th
{
background-color : #3b97d3 ;
color : #fff ;
padding : 5px ;
border-right : solid 1px #3b97d3 ;
border-left : solid 1px #fff ;
}
tr th:first-child
{
border-left : solid 1px #3b97d3 ;
}
tr td
{
padding : 5px ;
padding : 5px ;
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 ;
}
|
你可以点击这里查看和运行代码 使用React实现——具有层次的GUI 我们通过React用层次结构组件构建用户界面,这主要的好处是代码复用 主要的区别是HTML,JavaScript,CSS代码混合到一起,但如果我们想在新的页面重用这个组件,我们只需要复制这一块的代码 所以在React里面,在我们的表格中我们这样在每一行构建一个List Item 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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>
);
} });
|
接着我们构建表格组件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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, index) {
return (
<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>
)
} });
|
然后我们用同样的方式添加网格组件并声明我们的应用: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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来运行它) 原文:http://www.discoversdk.com/blog/angular-js-vs-react-by-example 作者:liran bh 翻译:开源中国 |