React 中的一段代码很奇怪

[rannnn]

今天在 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?

[rannnn]

同样的还有这里
https://github.com/facebook/react/blob/35962a00084382b49d1f9e3bd36612925f360e5b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js#L35

[xufang]

源代码已经其实已经说的比较清楚了

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

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

react 在这里使用这一技巧的目的是想方便的做 minification
https://en.wikipedia.org/wiki/Minification_(programming)

[rannnn]

@xufang 但这么做没有意义，这里的 SimpleEventPlugin 并不是常量。在两个不同文件中出现 {SimpleEventPlugin: ''} 不意味着这两个 SimpleEventPlugin 就能被安全替换。

事实上在 minified 后的代码中这些代码也全部保留了

[xufang]

@rannnn 这个只能说 minify 的效果没有达到 react 使用这一手法的初衷。

这一技巧用弱类型语言中有不少限制，常见函数式语言静态分析就可以搞定，换作 js 的话，就需要动态分析才能 minify 这个 SimpleEventPlugin 这个"类型"了.

[Kellay]

关注一下

[rannnn]

@xufang 感谢已发送。我觉得如果 expose const string 出来的话 minify 是可以实现的, 从 minified 的代码看来本地变量是可以被优化的。

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

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

```

[breeswish]

keyOf 可以在 closure compiler 的 advanced mode 下实现重命名

https://developers.google.com/closure/compiler/docs/compilation_levels?csw=1

https://groups.google.com/forum/#!msg/reactjs/qU1xqO_7ARc/KFYci_vsCXoJ

[xufang]

@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]

晕，和楼上重了。。。