$ for jQuery 在 Wordpress 中的对象字面量

Question

我想这可能是一个常见问题，但我找不到答案。

我正在为我的自定义 Wordpress 主题设计我的 JS 结构。我决定使用 The Object Literal，因为它似乎最符合我的目标并且易于阅读。

对于包含在对象中的函数，我想使用带有 $ 符号的 jQuery 选择器，但为了做到这一点，我必须在其中重新定义 var $ = jQuery;每个功能都是一个丑陋的解决方案。我不能使用全局 $ 符号，因为它没有分配以避免与其他库发生冲突。我不会使用任何其他使用 $ 符号的库，但某些插件可能会使用，所以我想继续避免潜在的冲突。

所以我的代码看起来像这样：

var myClass = {
    init: function() {
        var $ = jQuery,
            div = $('div');
        div.click(this.addMyClass);
        // And so on...
    },
    addMyClass: function() {
        var $ = jQuery;
        $('body').addClass('newClass');
        // And so on...
    }
}
jQuery(function($) {
    myClass.init();
});

有没有办法避免为每个函数重新声明 $？我可以通过 init 函数传递 $ 吗？像这样：

var myClass = {
    init: function($) {
        var div = $('div');
        div.click(this.addMyClass($));
        // And so on...
    },
    addMyClass: function($) {
        $('body').addClass('newClass');
        // And so on...
    }
}
jQuery(function($) {
    myClass.init($);
});

或者这是个坏主意？或者也许有更好的解决方案？

Answer 1

最好的方法是使用将 jQuery 作为参数传入的 IIFE

;(function($){
 "use strict"; 
  // anywhere inside "$" is jQuery and is insulated from any other libraries

    var myClass = {

        init: function (){
            var div = $('div');        
            div.click(this.addMyClass);      
        }
    };

    $(function (){
        myClass.init();
    });

})(jQuery);

这也会从全局命名空间

中删除myClass

$ for jQuery 在 Wordpress 中的对象字面量

$ for jQuery in object literals in Wordpress

jquery

wordpress

object-literal