将 JavaScript 命名空间拆分为多个文件

Posted 2023-02-23

【中文标题】将 JavaScript 命名空间拆分为多个文件

【英文标题】：Splitting a JavaScript namespace into multiple files

【发布时间】：2011-07-06 05:27:20

【问题描述】：

假设我有一个这样的命名空间：

var myNamespace = 
    foo: function() 
    ,
    bar: function() 
    
;

将此代码拆分为分别定义foo 和bar 的文件的最佳方法是什么？

我不担心加载时间 - 我会在部署之前将其连接回一个文件。

【问题讨论】：

为一个出色的问题投票！教会了我一些好东西。

也提到：***.com/a/4130511/895245

【参考方案1】：

在每个文件中遵循以下模式：

(function(nameSpace) 
    nameSpace.foo = function()  ... ;
)(window.nameSpace = window.nameSpace || );

这种方式加载顺序并不重要。

【参考方案2】：

(function (NS) 
    NS.Uber = function Uber() 
        this.super = new NS.Super(); // yes, it works!
    ; //
(NS = NS || ));

// ------------- other file -----------------

(function (NS) 
    NS.Super = function Super() 
        this.uber = new NS.Uber(); // yes, it will also work!
    ; //
(NS = NS || ));

// -------------- application code ------------

var uber = new NS.Uber();
console.log(uber.super);

var super = new NS.Super();
console.log(super.uber);

【讨论】：

NS = NS || 表示它将 NS 作为参数发送，如果不存在，则将空对象分配给 NS。

这会触发一个引用错误：在尝试执行(NS = NS || ));see this jsfiddle for example这一行时，NS 未定义

【参考方案3】：

// File1:
// top level namespace here:
var myNamespace = myNamespace || ;

// File2:
myNamespace.foo = function() 
    // some code here...

【参考方案4】：

在每个文件的开头：

if(myNameSpace === undefined) 
  var myNameSpace = ;

文件 1：

myNamespace.foo = function()...

文件 2：

myNamespace.bar = function()...

【参考方案5】：

在单独的文件中进行简单定义，如下所示：

文件 1：

var myNamspace = ;

文件 2：

myNamespace.foo = function()...

文件 3：

myNamespace.boo = function()...

只要确保以正确的顺序加载文件即可。