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