为什么Backbone.js代码前面有（function（$）{。。。？

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

//**此示例演示了DOM事件与视图方法的绑定**
//
//_工作示例：[2.html]（../2.html）。\u
//_u[转到示例3]（3.html）_
//
（函数（$）{
var ListView=Backbone.View.extend({
el:$（'body'），//el附加到现有元素
//`events`:DOM事件绑定到视图方法的地方。主干没有单独的控制器来处理这种绑定；它都发生在一个视图中。
活动：{
'单击按钮#添加'：'添加项'
},
初始化：函数（）{
_.bindAll（this'render'，addItem'）；//使用'this'作为当前对象的每个函数都应该在这里
this.counter=0；//到目前为止添加的项目总数
这个。render（）；
},
//`render（）`现在引入一个按钮来添加新的列表项。
render:function（）{
$（this.el）.append（“添加列表项”）；
$（this.el）。追加（“
”）；
},
//`addItem（）`：通过上面的`click`事件调用自定义函数。
附加项：函数（）{
这个.counter++；
$（'ul'，this.el）.append（“
你好世界”+this.counter+”
”）；
}
});
var listView=new listView（）；
})（jQuery）；

我不明白为什么它前面必须加一个

（函数（$）{…

）

---

有人能给我解释一下吗？

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

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

---

你看到了吗？

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

var theFunction = function($){...code...};
theFunction(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的标题部分包括以下内容：

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

模块二.js:

var state = 0;

function init() {
    ...
}

etc...

var state = 2;

function init() {
    ...
}

etc ...

这是怎么回事？ 页面按顺序加载两个脚本-加载第一个module-one.js，然后加载第一个模块的所有内容；然后加载module-two.js，并覆盖第一个模块中定义的一些变量！这是因为在JavaScript中定义全局范围内的变量，隐式解释为在

window

对象。因此，如果您依次运行两个脚本文件，例如，您首先设置

window.state=0

，然后设置

window.state=2

。正如您所看到的，模块并不是真正独立的。例如，

init（）

（或者实际上是

window.init（）

）在加载两个脚本后调用，只启动第二个模块-第一个

init（）

函数被覆盖（因为

窗口

只能有一个名为

init

的属性），并且不再存在

救援范围 为了避免此问题，您应该将模块封装在函数调用中，就像您使用上面的jQuery插件一样。但是，这些函数不需要接受任何参数：

模块一.js

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

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

模块二.js

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

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

---

现在，由于这两个模块是在单独的函数中定义的，所以所有变量的作用域仅限于这些函数中。如果您不确定JavaScript代码将如何使用，那么将其包装在函数调用中是避免冲突的良好做法。而且，如果您不完全遵循这些做法，则很难记住良好做法时间，一直遵循这一点真的不会伤害任何人=）

这是通常的做法

原因是您希望避免与在全局作用域中也可能使用

$

符号的其他库发生冲突。通过将代码包装在一个函数调用中，该函数调用包含一个参数（名为

$

），并将

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的标题部分包括以下内容：

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

模块二.js:

var state = 0;

function init() {
    ...
}

etc...

var state = 2;

function init() {
    ...
}

etc ...

怎么了