如何封装Nodejs和前端通用的模块 – WEB前端开发

Web前端开发  •  扫码分享
我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。  

在Node.js中对模块载入和执行进行了包装，使得模块文件中的变量在一个闭包中，不会污染全局变量，和他人冲突。

前端模块通常是我们开发人员为了避免和他人冲突才把模块代码放置在一个闭包中。

如何封装Nodejs和前端通用的模块，我们可以参考Underscore.js 实现，他就是一个Node.js和前端通用的功能函数模块，查看代码：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Create a safe reference to the Underscore object for use below.
  var _ = function(obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };
 
  // Export the Underscore object for **Node.js**, with
  
  // the browser, add `_` as a global object via a string identifier,
  
  if (typeof exports !== ) {
    if (typeof module !== && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }

通过判断exports是否存在来决定将局部变量 _ 赋值给exports，向后兼容旧的require() API，如果在浏览器中，通过一个字符串标识符“_”作为一个全局对象；完整的闭包如下：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(function() {
 
  // Baseline setup
  // --------------
 
  // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this;
 
  // Create a safe reference to the Underscore object for use below.
  var _ = function(obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };
 
  // Export the Underscore object for **Node.js**, with
  
  // the browser, add `_` as a global object via a string identifier,
  
  if (typeof exports !== ) {
    if (typeof module !== && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }
}).call(this);

通过function定义构建了一个闭包，call(this)是将function在this对象下调用，以避免内部变量污染到全局作用域。浏览器中，this指向的是全局对象（window对象），将“_”变量赋在全局对象上“root._”，以供外部调用。

和Underscore.js 类似的Lo-Dash，也是使用了类似的方案，只是兼容了AMD模块载入的兼容：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
;(function() {
 
  /** Used as a safe reference for `undefined` in pre ES5 environments */
  var undefined;
    /** Used to determine if values are of the language type Object */
      var objectTypes = {
        : false,
        : true,
        : true,
        : false,
        : false,
        : false
      };
  /** Used as a reference to the global object */
  var root = (objectTypes[typeof window] && window) || this;
 
  /** Detect free variable `exports` */
  var freeExports = objectTypes[typeof exports] && exports && !exports.nodeType && exports;
 
  /** Detect free variable `module` */
  var freeModule = objectTypes[typeof module] && module && !module.nodeType && module;
 
  /** Detect the popular CommonJS extension `module.exports` */
  var moduleExports = freeModule && freeModule.exports === freeExports && freeExports;
 
/*--------------------------------------------------------------------------*/
 
  // expose Lo-Dash
  var _ = runInContext();
 
  // some AMD build optimizers, like r.js, check for condition patterns like the following:
  if (typeof define == && typeof define.amd == && define.amd) {
    // Expose Lo-Dash to the global object even when an AMD loader is present in
    // case Lo-Dash was injected by a third-party script and not intended to be
    // loaded as a module. The global assignment can be reverted in the Lo-Dash
    // module by its `noConflict()` method.
    root._ = _;
 
    // define as an anonymous module so, through path mapping, it can be
    
    define(function() {
      return _;
    });
  }
  // check for `exports` after `define` in case a build optimizer adds an `exports` object
  else if (freeExports && freeModule) {
    // in Node.js or RingoJS
    if (moduleExports) {
      (freeModule.exports = _)._ = _;
    }
    // in Narwhal or Rhino -require
    else {
      freeExports._ = _;
    }
  }
  else {
    // in a browser or Rhino
    root._ = _;
  }
}.call(this));

再来看看Moment.js的封装闭包主要代码：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
(function (undefined) {
    var moment；
    // check for nodeJS
    var hasModule = (typeof module !== && module.exports)；
/************************************
        Exposing Moment
    ************************************/
 
    function makeGlobal(deprecate) {
        var warned = false, local_moment = moment;
        /*global ender:false */
        if (typeof ender !== ) {
            return;
        }
        // here, `this` means `window` in the browser, or `global` on the server
        // add `moment` as a global object via a string identifier,
        
        if (deprecate) {
            this.moment = function () {
                if (!warned && console && console.warn) {
                    warned = true;
                    console.warn(
                             +
                             +
                            );
                }
                return local_moment.apply(null, arguments);
            };
        } else {
            this[] = moment;
        }
    }
 
    // CommonJS module is defined
    if (hasModule) {
        module.exports = moment;
        makeGlobal(true);
    } else if (typeof define === && define.amd) {
        define(, function (require, exports, module) {
            if (module.config().noGlobal !== true) {
                // If user provided noGlobal, he is aware of global
                makeGlobal(module.config().noGlobal === undefined);
            }
 
            return moment;
        });
    } else {
        makeGlobal();
    }
}).call(this);

从上面的几个例子可以看出，在封装Nodejs和前端通用的模块时，可以使用以下逻辑：

JavaScript
1
2
3
4
5
if (typeof exports !== ) {
    exports.** = **;
} else {
    this.** = **;
}

即，如果exports对象存在，则将局部变量装载在exports对象上，如果不存在，则装载在全局对象上。如果加上ADM规范的兼容性，那么多加一句判断：

1
if (typeof define === && define.amd){}

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《如何封装Nodejs和前端通用的模块》

本文被转载1次

首发媒体 Web前端开发 | 转发媒体

随意打赏

提交建议
微信扫一扫，分享给好友吧。
关闭