RequireJS 的语法糖 Simplified CommonJS Wrapping

更新日期: 2015-12-12 阅读次数: 4395 分类: Javascript

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

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 提出了不同的看法。

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

  • 看上去是顺序执行的代码实际上不是。因为凡是使用 require 的代码都会提前执行。即,这是披着 CommonJS 皮的 AMD 代码。
  • requirejs 的依赖提取逻辑有 bug,例如对注释的支持不好。

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

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

  • AMD(异步模块定义,Asynchronous Module Definition)采取了一种浏览器优先的方式来开发,选择了异步行为。
  • CommonJS 则采用了服务器优先的策略,采取同步行为。

参考

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月01日 愚人节
2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
查看更多节日