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