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