JSX有感

开发一个网页，咱们要写视图部分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赢在了：

1. 你们都熟悉HTML，学JSX比学ExtJS那套layout轻松，并且也以为直观。
2. 你们愈来愈追求Dom的语义化，ExtJS生成的Dom太不语义化了。

不过JSX这样的思想，也并不算新思想，2009年我接触Flex的时候也见识过。

Flex在ActionScript的基础上发展出了mxml，用xml的形式写视图，再编译成ActionScript。

JSX -> JavaScript  
mxml -> ActionScript