避免在CMS的所有页面上使用的jQuery中的全局上下文

Question

我每天都使用专有的CMS，自定义单个网站的最简单方法之一是使用所有网页上的theme.js。首选方法通常是jQuery，但也鼓励使用vanilla javascript。从某种意义上说，把它想象成Wordpress中的函数文件。它不是一个完美的解决方案，更多的是它只是为了做新事物，但事实就是如此。

当我添加孤立函数时，那些未被调用但只是在页面加载时执行的操作，我想以更符合标准且不易出错的方式添加它们。我想避免的一件事是公然的全球背景。

我最初是如何表现的：

$(function() {

    $('div.target').append('<p>New stuff</p>');

});

我们讨论了它，并同意封装：

(function() {
    var foo;
    if (bar) {
        // some code
    }
}());

问题是，当我完全按照这样运行代码时，它不会生效。 所以，我改为：

(function($) {

    $(document).ready(function() {

        $('div.target').append('<p>New stuff</p>');

    });

}(jQuery));

这有效，但我不希望它打败目的。添加$(document).ready(function()是否正在兜售我们的努力来封装并避免使用小函数的全局上下文？

Answer 1

$(function() {只是$(document).ready(function() {的快捷方式。 在这两种情况下，您都在函数内部，因此只要您在分配变量时使用var，它们就不会污染全局范围。

请注意，您可以毫无问题地使用多个ready处理程序。