在我的应用程序中，我有特定于每个页面的 jquery，即严格在一个页面上使用的脚本。有没有办法设置一个我可以工作的范围，以避免任何 id/class 冲突或行为从一个页面蔓延到另一个页面？
我可以这样做，例如通过为特定页面指定包装器 div
$(function(){
$('#thing_page input.finder').focus(function(){ ... })
});
但我需要在所有事件绑定前面加上页面包装器的名称，这有点烦人。
对于那些不知道的人，rails 将所有 javascript 文件压缩为一个，我喜欢这个。否则我可以只在特定页面上包含每个文件。
【问题讨论】：
您可以将其全部包装在一个巨大的 switch 语句中。假设thing_page 是body 的ID，您可以这样做：
$(function() {
switch (document.body.id) {
case 'thing_page':
// Do stuff for thing page
$('input.finder').focus(function(){ ... });
break;
case 'other_page':
// do stuff for other page
break;
case 'third_page':
// Do stuff for third page
break;
// ...and so on and so forth...
}
});
这里的语法突出显示非常糟糕。 jsfiddle里看看：http://jsfiddle.net/dFuVz/
或者，您可以考虑使用一个对象来包含您的函数（类似于@Andrew 的方法）：
var pageFunctions = {
thing_page: function() {
// Code for thing_page
$('#thing_page input.finder').focus(function(){...});
},
other_page: function() {
// Code for other_page
},
third_page: function() {
// Code for third_page
}
};
// Now call the correct function, according to the body ID
pageFunctions[ document.body.id ]();
再一次，由于这里的语法高亮太糟糕了，请看这里：http://jsfiddle.net/9L592/
【讨论】：
因为函数是 javascript 中的第一类，您可以有效地将每个页面的整个函数和变量包装在一个对象中，然后调用该对象：
var allPages = {
thingPage : function() {
$('#thing_page input.finder').focus(function(){...});
},
nothingPage : {
index: 0,
removePost : function() {
$('#nothing_page .post').find('p').remove();
}
}
};
然后您可以通过调用 allPages.thingPage() 来调用函数或使用 allPages.nothingPage.index 访问变量。
另外，请阅读Douglas Crockford's article on Javascript code convention 的“函数声明”部分。具体来说，“当要立即调用一个函数时，整个调用表达式应该用括号括起来，以便清楚地生成的值是函数的结果，而不是函数本身。”该技术类似于我上面写的，但可能更符合您应该做的。
【讨论】：