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 (
      

Shopping List for {this.props.name}

  • Instagram
  • WhatsApp
  • Oculus
); } }

两种思路都做到了“把视图和相关的逻辑放在一起”。

我想 JSX 赢在了:

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

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

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

JSX -> JavaScript
mxml -> ActionScript

你可能感兴趣的:(JSX有感)