我要评论开发一个网页，我们要写视图部分html，也要写交互逻辑js。
写js时，不断翻看html，确保queryselector能取到期望的元素。
改html时，一个个排查js文件，确保其没受影响。
……
类似的情况很影响我们工作效率。
把视图和相关的逻辑放在一起，成为了大家迫切的需求。
就这一问题，我们来看看不同的解决思路。
extjs
视图部分也用js来写，自然很容易放在一起了。
ext.define('xxx.view.alarm', {
extend: 'ext.container.container',
xtype: 'alarmpanel',
initcomponent: function () {
ext.apply(this, {
layout: 'border',
items: [{
xtype: 'hsnavtree',
itemid: 'lefttree',
store: ext.getstore('alarmnavtree'),
cls: 'left-directory',
rootvisible: false,
region: 'west',
width: 240
}, {
xtype: 'container',
itemid: 'centercontainer',
layout: 'fit',
region: 'center'
}]
});
this.callparent(arguments);
}
});
layout: 'border'指定布局方式为东南西北中。
items中每一项的region指定是东南西北中的那一部分。
jsx
在js中直接写html，再通过编译转成js。（思想是这样，但大家知道和html还是有区别的。）
class shoppinglist extends react.component {
render() {
return (
<div classname="shopping-list">
<h1>shopping list for {this.props.name}</h1>
<ul>
<li>instagram</li>
<li>whatsapp</li>
<li>oculus</li>
</ul>
</div>
);
}
}
两种思路都做到了“把视图和相关的逻辑放在一起”。
我想jsx赢在了：
- 大家都熟悉html，学jsx比学extjs那套layout轻松，而且也觉得直观。
- 大家越来越追求dom的语义化，extjs生成的dom太不语义化了。
不过jsx这样的思想，也并不算新思想，2009年我接触flex的时候也见识过。
flex在actionscript的基础上发展出了mxml，用xml的形式写视图，再编译成actionscript。
jsx -> javascript mxml -> actionscript
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论