模块管理

引用全局变量

我们会看到很多类似这样的代码

(function ($, YAHOO) {
    // 这里,我们的代码就可以使用全局的jQuery对象了,YAHOO也是一样
} (jQuery, YAHOO));

为什么不在匿名函数里面直接使用全局变量,而要把全局变量传进去使用呢,这是为了让阅读代码的人知道哪些变量不是当前作用域的。

UMD

UMD (Universal Module Definition), 希望提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式)。

UMD的实现很简单:

  1. 先判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
  2. 再判断是否支持Node.js模块格式(exports是否存在),存在则使用Node.js模块格式。
  3. 前两个都不存在,则将模块公开到全局(window或global)。

各种具体的实现方式,可以查看UMD的github。我这里举例一个jQuery使用的,按照如上方式实现的代码:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(window, function () {
    return {};
}));

通过es6模块加载和commonjs模块加载机制引入的模块,只会执行一次,也就是说我们如果在这里生成对象,那么他会变成单例,我们甚至可以把这个对象暴露出来,在里面做缓存。

你可能感兴趣的:(模块管理)