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赢在了：

大家都熟悉HTML，学JSX比学ExtJS那套layout轻松，而且也觉得直观。
大家越来越追求Dom的语义化，ExtJS生成的Dom太不语义化了。

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

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

JSX -> JavaScript  
mxml -> ActionScript

ExtJS

JSX

猜你喜欢