开发一个网页,我们要写视图部分 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 (
Shopping List for {this.props.name}
- Instagram
- WhatsApp
- Oculus
);
}
}
两种思路都做到了“把视图和相关的逻辑放在一起”。
我想 JSX 赢在了:
- 大家都熟悉 HTML,学 JSX 比学 ExtJS 那套 layout 轻松,而且也觉得直观。
- 大家越来越追求 Dom 的语义化,ExtJS 生成的 Dom 太不语义化了。
不过 JSX 这样的思想,也并不算新思想,2009 年我接触 Flex 的时候也见识过。
Flex 在 ActionScript 的基础上发展出了 mxml,用 xml 的形式写视图,再编译成 ActionScript。
JSX -> JavaScript
mxml -> ActionScript