V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
rannnn
V2EX  ›  JavaScript

React 中的一段代码很奇怪

  •  
  •   rannnn · 2015-12-19 21:50:34 +08:00 · 3402 次点击
    这是一个创建于 3253 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天在 React 中看到了这样一段代码,觉得很奇怪

    http://ww4.sinaimg.cn/large/442b51e6gw1ez5awy9oyxj20hz09xju7.jpg

    https://github.com/facebook/react/blob/401e6f10587b09d4e725763984957cf309dfdc30/src/renderers/dom/client/eventPlugins/DefaultEventPluginOrder.js#L25

    DefaultEventPluginOrder 是一个 string[] 这里 keyOf 所做的事情就是返回这个 one key object 的 key.
    这些 key 并没有被 expose 出来, 这样做的意义是为了不写 magic string 而不写 magic string?

    9 条回复    2015-12-19 23:22:48 +08:00
    xufang
        2
    xufang  
       2015-12-19 22:35:14 +08:00
    源代码已经其实已经说的比较清楚了

    https://github.com/facebook/fbjs/blob/master/src/key-mirror/keyOf.js

    这个函数的目的其实在给字符串变量以类型,这样可以追踪这些字串被引用的地方。这种手法常在一些函数式语言中使用,如 haskell, ocaml.

    react 在这里使用这一技巧的目的是想方便的做 minification
    https://en.wikipedia.org/wiki/Minification_(programming)
    rannnn
        3
    rannnn  
    OP
       2015-12-19 22:58:03 +08:00   ❤️ 1
    @xufang 但这么做没有意义,这里的 SimpleEventPlugin 并不是常量。在两个不同文件中出现 {SimpleEventPlugin: ''} 不意味着这两个 SimpleEventPlugin 就能被安全替换。

    事实上在 minified 后的代码中这些代码也全部保留了
    xufang
        4
    xufang  
       2015-12-19 23:04:28 +08:00   ❤️ 2
    @rannnn 这个只能说 minify 的效果没有达到 react 使用这一手法的初衷。

    这一技巧用弱类型语言中有不少限制,常见函数式语言静态分析就可以搞定,换作 js 的话,就需要动态分析才能 minify 这个 SimpleEventPlugin 这个"类型"了.
    Kellay
        5
    Kellay  
       2015-12-19 23:08:58 +08:00
    关注一下
    rannnn
        6
    rannnn  
    OP
       2015-12-19 23:14:20 +08:00
    @xufang 感谢已发送。我觉得如果 expose const string 出来的话 minify 是可以实现的, 从 minified 的代码看来本地变量是可以被优化的。

    比如这样
    ```javascript
    var {
    SimpleEventPlugin,
    TapEventPlugin,
    EnterLeaveEventPlugin,
    ChangeEventPlugin
    } = require('const-definition');

    var DefaultEventPluginOrder = [
    SimpleEventPlugin,
    TapEventPlugin,
    EnterLeaveEventPlugin,
    ChangeEventPlugin
    ];

    ```
    breeswish
        7
    breeswish  
       2015-12-19 23:16:19 +08:00   ❤️ 1
    xufang
        8
    xufang  
       2015-12-19 23:22:24 +08:00
    @rannnn 恩,看了一下 Google Closure Compiler 使用 Advanced 模式的话,也可以生效。

    https://closure-compiler.appspot.com/

    ```
    var keyOf = function(oneKeyObj) {
    var key;
    for (key in oneKeyObj) {
    if (!oneKeyObj.hasOwnProperty(key)) {
    continue;
    }
    return key;
    }
    return null;
    };

    var DefaultEventPluginOrder = [
    keyOf({ResponderEventPlugin: null}),
    keyOf({SimpleEventPlugin: null}),
    keyOf({TapEventPlugin: null}),
    keyOf({EnterLeaveEventPlugin: null}),
    keyOf({ChangeEventPlugin: null}),
    keyOf({SelectEventPlugin: null}),
    keyOf({BeforeInputEventPlugin: null}),
    ];


    var DefaultEventPluginOrder2 = [
    keyOf({ResponderEventPlugin: null}),
    keyOf({SimpleEventPlugin: null}),
    keyOf({TapEventPlugin: null}),
    keyOf({EnterLeaveEventPlugin: null}),
    keyOf({ChangeEventPlugin: null}),
    keyOf({SelectEventPlugin: null}),
    keyOf({BeforeInputEventPlugin: null}),
    ];

    module.exports = DefaultEventPluginOrder;
    module.exports = DefaultEventPluginOrder2;
    ```
    xufang
        9
    xufang  
       2015-12-19 23:22:48 +08:00
    晕,和楼上重了。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5234 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 09:27 · PVG 17:27 · LAX 01:27 · JFK 04:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.