为什么 Backbone.js 代码前面有 (function($){...？

Question

这是 Backbone.js 代码的示例（取自 this 教程）：

// **This example illustrates the binding of DOM events to View methods.**
//
// _Working example: [2.html](../2.html)._  
// _[Go to Example 3](3.html)_

//
(function($){
  var ListView = Backbone.View.extend({
    el: $('body'), // el attaches to existing element
    // `events`: Where DOM events are bound to View methods. Backbone doesn't have a separate controller to handle such bindings; it all happens in a View.
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

      this.counter = 0; // total number of items added thus far
      this.render();
    },
    // `render()` now introduces a button to add a new list item.
    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
    },
    // `addItem()`: Custom function called via `click` event above.
    addItem: function(){
      this.counter++;
      $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
    }
  });

  var listView = new ListView();      
})(jQuery);

我不明白为什么它前面必须有一个 (function($){...。

有人能给我解释一下吗？

Answer 1

这是创作 jQuery 插件时的常见做法。

原因是您希望避免与其他可能在全局范围内使用 $ 符号的库发生冲突。通过将代码包装在采用一个参数（名为 $）的函数调用中并将 jQuery 对象传递到该函数中，可以确保避免冲突。

function($) { // declare an anonymous function that takes an argument $

    // conflict safe code =)

}(jQuery); // pass the argument jQuery to the anonymous function

正如 nielsbot 指出的，如果给函数命名，可能会更容易看出上面代码的作用：

var executeSafely = function($) {

    // conflict safe code =)

}

executeSafely(jQuery);

---

我知道这一点这是事后的事情，但 MikeG 只是在这篇文章的评论中指出，这对于其他地方的 javascript 代码来说也不一定是坏事。我想我应该扩展一下原因：

范围界定的案例

假设您您的网站上有两个独立的 javascript 模块。假设您已在两个 js 文件 module-one.js 和 module-two.js 中编写了它们的代码。通常，页面上只有一个模块，因此在创作其中一个模块时，您并不关心另一个模块中发生的情况（甚至可能让不同的开发人员独立于另一个模块处理不同的模块）。

然后，您决定在起始页上显示这两个内容会很好，因此您在起始页 html 的 head 部分中包含以下内容：

<script type="text/javascript" src="module-one.js" />
<script type="text/javascript" src="module-two.js" />

[Cue：世界末日音乐！] 一切都崩溃了！到底发生了什么？

您查看模块的代码，并看到以下内容：

module-one.js:

var state = 0;

function init() {
    ...
}

etc...

module-two.js:

var state = 2;

function init() {
    ...
}

etc ...

这里发生了什么？

好吧，页面按顺序加载两个脚本 - 第一个 module-one.js 被加载，第一个模块的一切都进行了；然后，module-two.js 被加载，并且覆盖第一个模块中定义的一些变量！这是因为在 JavaScript 中在全局范围内定义一个变量，它被隐式地解释为在window 对象。因此，如果您依次运行这两个脚本文件，例如，您首先设置 window.state = 0，然后设置 window.state = 2。正如您所看到的，这些模块并不是真正独立的。例如，当加载两个脚本后调用 init() （或者实际上是 window.init()）时，仅启动第二个模块 - 第一个模块init() 函数被覆盖（因为 window 只能有一个名为 init 的属性）并且不再存在。

范围界定来解决

这个问题 为了避免这个问题，您应该将模块包装在函数调用中，就像您对上面的 jQuery 插件所做的那样。但是，这些函数不需要接受任何参数：

module-one.js

(function() {
    // code for module one here
})();

module-two.js

(function() {
    // code for module two here
})();

现在，由于这两个模块是在单独的函数中定义的，因此所有变量的作用域仅限于这些函数内。如果您不确定如何使用 JavaScript 代码，将其包装在像这样的函数调用中是避免冲突的好习惯。而且，如果您不始终遵循良好的做法，就很难记住它们，因此始终遵循这一做法确实不会伤害任何人 =)

Answer 2

这是为了保证 $ 被分配给定义函数内的 jQuery 对象。他们基本上是这样做的：

var theFunction = function($){...code...};
theFunction(jQuery);

你看到了吗？