Question

我正在将单独的.js文件加载到我的html页面中。这些文件使用匿名函数，因此全局范围不会填充全局变量。例如：这是我的'utils.js'文件：

(function(window){
   var Utils = {
       createURL: function() {
           console.log("creating url");
       }
   };
})(window);

我的问题：如果我有几个这样的.js文件，它们如何在不使用全局范围的情况下相互引用？就目前而言，我只能在同一个utils.js文件中调用此函数：

var myUtils = new Utils();

Answer 1

您可以创建全局模块并仅公开所需的功能......

// In some JS file
var moduleX = (function(window){
   var Utils = function(){

   };

   return {
       "Utils" : Utils
   };
})(window);

// In a some other JS file
var util = new moduleX.Utils();

顺便说一句，你无法实例化JSON对象（在你的情况下为Utils）。所以请把它改成一个函数。

Answer 2

您可以使用像

这样的javascript加载程序

如果您不想使用加载程序，也许可以使用design pattern或mediator等module将全局使用量减少到最小值。

Answer 3

(function(window){
   var app = {};
    app.Utils = {
        createUrl:function(){}
    };
    window.app = app;
})(window);

然后您就可以使用这样的应用程序：

app.Utils.createUrl();

Answer 4

如果您不想使用第三方工具，可以使用以下模式将所有内容包装到一个模块中：

//file1
var myModule = (function(window, that){

    var myVar = 1;

    that.myMethod1 = function(){
        console.log("i am module 1");
    };

    return that;
}(window, myModule || {}));

//file2
var myModule = (function(window, that){

    that.myMethod2 = function(){
        console.log(typeof myVar); //undefined
        that.myMethod1();   //i am module 1
    };

    return that;
}(window, myModule || {}));

这将确保您只有一个全局变量。但是，您当然无法访问另一个文件的局部变量。

如何在不使用全局范围的情况下将javascript分成文件？

4 个答案: