RequireJS 的语法糖 Simplified CommonJS Wrapping

发布时间: 2015-12-12 20:45:34 作者: 大象笔记

介绍语法糖之前,先看一段恶心的代码

define([ "require", "jquery", "blade/object", "blade/fn", "rdapi",
         "oauth", "blade/jig", "blade/url", "dispatch", "accounts",
         "storage", "services", "widgets/AccountPanel", "widgets/TabButton",
         "widgets/AddAccount", "less", "osTheme", "jquery-ui-1.8.7.min",
         "jquery.textOverflow"],
function (require,   $,        object,         fn,         rdapi,
          oauth,   jig,         url,         dispatch,   accounts,
          storage,   services,   AccountPanel,           TabButton,
          AddAccount,           less,   osTheme) {

});

这段代码的风险在于,容易出现依赖列表顺序与函数变量的对应关系不一致。 至少我在写 angular 的时候,经常在依赖注入设置时出现类似 bug。 例如,我想去掉 services 的依赖,经常去掉了依赖列表里的条目,但是忘了同时去掉函参里的对应项。

好在, Requirejs 提供了一个语法糖,e.g.

define(function (require) {
    var dependency1 = require('dependency1'),
        dependency2 = require('dependency2');

    return function () {};
});

这样在去掉一项依赖时,只需要删除一行代码即可,不需要瞻前顾后。

注意,为了规范性已经可读性,最好将所有依赖都写在函数的头部。

这样做就没有缺点了么

一位大神在文章 AMD 的 CommonJS wrapping 提出了不同的看法。

他不认同该语法糖的原因有二

但是这两个问题是我可以接受的 :)

注,AMD 与 CommonJS 的区别, 参考 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript

参考

我是一名山东烟台的开发者,联系作者