我有一个外部JavaScript文件,该文件将在带有许多其他脚本的页面上使用.我的脚本涉及许多侦听事件的jQuery,根据设计,我声明了许多全局变量.我一直在阅读最佳实践文章,关于“污染全局名称空间”和无意中的脚本交互的说法很多.

封装(封装)JavaScript文件的最佳方法是什么,以便：

>我仍然可以访问其中的一些
机箱外部的变量
> jQuery事件监听器将
功能正常

我没有公开代码的*,因此,即使是一般的答复也值得赞赏.此外,欢迎您提供其他有关使脚本不易受到页面上其他脚本攻击的技巧.

我已经找到了常规JavaScript的外壳样式,但是jQuery的使用使这复杂吗？

解决方法:

通常,这归结为将您的对象封装到“命名空间”中.我在这里使用引号是因为该术语不是JavaScript中的正式语义,而是通过基本对象封装实现的.

有几种方法可以做到这一点,最终归结为个人喜好.

一种方法是只使用基本的JS对象,并将所有内容保留在其中.对象的名称应该是语义的,并赋予对象某种含义,但是否则,其目的是仅包装您自己的代码并将其保留在全局名称空间之外.

var SomeName = {
    alpha: 1,
    beta: {a: 1, b: 2},
    gamma: function(){ 
        SomeName.alpha += 1;
    }
}

在这种情况下,只有SomeName在全局名称空间中.这种方法的缺点是名称空间中的所有内容都是公共的,您必须使用完整的名称空间来引用对象,而不是使用“ this”-例如在SomeName.gamma中,我们必须使用SomeName.alpha来引用alpha的内容.

另一种方法是使名称空间成为具有属性的函数.这种方法的一个不错的功能是您可以通过闭包创建“私有”变量.它还使您无需完全引用名称空间即可访问闭包的函数和变量.

var SomeName = (function(){
   var self = this;
   var privateVar = 1;
   var privateFunc = function() { };   

   this.publicVar = 2;
   this.publicFunc = function(){
       console.log(privateVar);
       console.log(this.publicVar); // if called via SomeName.publicFunc

       setTimeout(function(){ 
           console.log(self.publicVar);
           console.log(privateVar);
       }, 1000);
   };
}();

这种方法的另一个好处是,它使您可以保护要使用的全局变量.例如,如果您使用jQuery,并且使用另一个创建$变量的库,则始终可以通过以下方法确保使用$时引用的是jQuery：

var SomeName = (function($){
    console.log($('div'));
})(jQuery);