包含外部 jQuery 脚本

Question

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

封闭（封装？）我的 JavaScript 文件的最佳方法是什么，以便：

• 我仍然可以访问某些 封装之外的变量
• jQuery 事件侦听器将 功能正常

我不能随意透露代码，所以即使是一般性的回应也是值得赞赏的。此外，欢迎提供有关使脚本不易受到页面上其他脚本攻击的任何其他提示。

我已经找到了常规 JavaScript 的封装样式，但是使用 jQuery 会使情况变得复杂吗？

Answer 1

一般来说，这可以归结为将对象封装到“命名空间”中。我在那里使用引号是因为该术语不是 JavaScript 中的官方语义，而是通过基本对象封装实现的语义。

有多种方法可以做到这一点，最终取决于个人喜好。

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

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

在这种情况下，只有 SomeName 位于全局命名空间中。这种方法的一个缺点是命名空间内的所有内容都是公共的，并且您必须使用完整的命名空间来引用对象，而不是使用“this” - 例如，在 SomeName.gamma 中，我们必须使用 SomeName.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);

Answer 2

一种方法是像这样命名空间：

var MyNamespace = {
    doSomething: function() {},
    reactToEvent: function() {},
    counter: 0
}

您只需使用命名空间引用函数或变量：MyNamespace.reactToEvent。这对于分离通常在窗口（所有对抗都在其中）中的内容非常有效。

Answer 3

您可以将代码包装在匿名 Javascript 函数中，并且只返回您想要向外界公开的内容。您需要在全局变量前添加 var 前缀，以便它们仅保留在匿名函数的范围内。像这样：

var myStuff = (function() {

   var globalVar1;
   var globalVar2;
   var privateVar1;

   function myFunction() {
     ...
   }

   function myPrivateFunction() {
     ...
   }

   return {
      var1: globalVar1,
      var2: globalVar2,
      myFunction: myFunction
   };

})();

现在您可以访问 myStuff.var1 和 myStuff.myFunction()。

Answer 4

封装或限制命名空间污染的两种方法

1) 创建一个全局变量并将您需要的所有内容填充到其中。

var g = {};
g.somevar = "val";
g.someothervar = "val2";
g.method1 = function() 
{
   // muck with somevar
   g.somevar = "something else";
};

2) 对于内联脚本，考虑限制调用函数的范围。

<script>
(  
   function(window)
   {
      // do stuff with g.somevar
      if(g.somevar=="secret base")
        g.docrazystuff();      

   }
)();  // call function(window) then allow function(window) to be GC'd as it's out of scope now
</script>

Answer 5

我刚刚开始使用 RequireJS 现在已经对它着迷了。

它基本上是一个模块化 JavaScript 格式的依赖管理系统。通过这样做，您几乎可以消除将任何内容附加到全局命名空间的情况。

好处是您只在页面 require.js 上引用一个脚本，然后告诉它首先运行哪个脚本。从那里开始，一切都变得神奇了......

这是一个示例实现脚本：

require([
   //dependencies
   'lib/jquery-1.6.1'
], function($) {
   //You'll get access to jQuery locally rather than globally via $


});

通读 RequireJS API 并看看这是否适合您。我现在所有的剧本都是这样写的。这很棒，因为在每个脚本的顶部，您可以确切地知道您的依赖项类似于服务器端语言 - Java 或 C#。

Answer 6

这是 jQuery 插件的常见做法，原因与您提到的相同：

;(function ($) {

    /* ... your code comes here ... */

})(jQuery);

这是一个即时函数。如果您在内部声明“全局”变量，它们将是该闭包的本地变量（对于您在内部创建的代码仍然是“全局”的）。您的事件侦听器也将在此处工作，并且您仍然能够访问真正的全局变量。