Question

在我的应用程序中，我有一个特定于每个页面的jquery，即严格在一个页面上使用的脚本。有没有办法设置我可以在其中工作的范围，以避免任何id / class碰撞或行为从一个页面蔓延到另一个页面？

我可以这样做，例如通过指定特定页面的包装div

$(function(){
  $('#thing_page input.finder').focus(function(){ ... })
});

但是我需要在页面包装器的名称前添加所有事件绑定，这有点烦人。

对于那些不知道的人，rails将所有javascript文件压缩为一个，我喜欢。否则，我可以在特定页面上包含每个文件。

Answer 1

您可以将它全部包含在巨大的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/

Answer 2

因为函数是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的“功能声明”部分。具体来说，“当一个函数被立即调用时，整个调用表达式应该包含在parens中，这样很明显产生的值是函数的结果，而不是函数本身。”这种技术与我上面写的相似，但可能更符合你应该做的事情。

jquery设置范围

2 个答案: