Javascript 模块在 Drupal 7 中显示和限定 jQuery答案

【问题标题】：Javascript module reveal and scoped jQuery in Drupal 7Javascript 模块在 Drupal 7 中显示和限定 jQuery
【发布时间】：2014-08-22 08:09:27
【问题描述】：

好吧！

所以我忙于在 drupal 7 页面中进行一些 javascript 开发。我们基本上有一个挂钩到 drupal 页面的 MVC。没有什么花哨。最近我开始修复旧代码，调用 jQuery.noConflict() 来获取 jQuery 的实例，因为在 drupal 7 中，jQuery 是命名空间的，当前的开发人员不知道如何解决可怕的“$ 不是函数”问题，而无需涂抹每个脚本使用自己的“别名”jquery 实例，如下所示：

$xj = jQuery.noConflict();

假设 $ 仍然全局可用，这会导致任何其他代码出现 sh!z 的空洞世界。

现在我已经清理了所有 noConflict 调用，并将所有“加载代码”包装在这个花哨的闭包中：

(function ($) {
   // we can now use $ yo....
}(jQuery));

但现在，可悲的是，我因为使用 javascript 模块显示模式而受到了宇宙的惩罚。让我试着用代码sn-p解释一下：http://jsfiddle.net/yz41wr2g/

有没有人有在模块显示模式中使用命名空间 jQuery 的经验？

【问题讨论】：

我的第一个解决方案：jsfiddle.net/ou52v17a 唯一的问题是现有模块会被大量重写
另一种解决方案是说，拧这个命名空间垃圾！我要我的钱！！ =P $ = jQuery.noConflict();
您不使用pattern recommended by Drupal的任何原因？
代码应该能够在没有嵌入drupal的视图中运行。所以我不能写drupal特定的模块。

标签： javascript jquery html drupal drupal-7

【解决方案1】：

这是我最好的尝试：

// drupal does this somewhere just to torture me!
jQuery.noConflict();

//this is my module reveal function/object
var MyModule = function ($) {
    //private members and functions                
    return {
        //public members and functions
        init: function () {
            alert($('.super-success').html());
        }
    };
}(jQuery);

// do 'onload' goodness here
(function ($) {
    // good news, now we have a reference to $
    alert($('.success').html()); // success!        
    MyModule.init();

}(jQuery));

http://jsfiddle.net/6x0exhcp/1/

如果我错了，请纠正我=)

【讨论】：

我喜欢这个解决方案，AFAIK，这是处理模块之间依赖关系的正确方法：依赖注入。从 MyModule 的 PoV 来看，jQuery 是它所依赖的另一个模块。
我几乎对您的答案添加了评论，但现在看到了此评论。我真的希望有一些魔术可以避免过多的 DI，但我想这会很巧妙。我认为我的大部分挫败感来自编写不佳的遗留代码（全局范围内的所有内容）。我仍然对这个解决方案很满意 =) 在旁注中，我认为 drupal 可能会弄乱不属于 CMS 应该做的事情......只是我的 2 美分
这当然取决于您对 CMS 的定义以及您对它的期望。 Drupal 有一部分不是关于管理内容本身，而是关于使用/围绕内容构建网站。那是与 JavaScript 混淆的部分。这是许多人对他们的 CMS 的期望。 DI不是你避免的东西，DI是你努力的东西。 DI 允许模块解耦。解耦有利于可维护性和测试。
如果您不必重构其他人的代码，DI 非常棒；）出于这些确切原因，我尽可能多地使用 DI 和松散耦合...

【解决方案2】：

您应该将所有依赖于 jQuery 的 JavaScript 代码包装在 immediately invoked anonymous function 中。这不是 Drupal 的东西，这是 a good practice when using jQuery。 Drupal 只会强迫您正确行事，因为它本身行为正确，并且不想阻止您使用另一个使用 $ 的 JavaScript 库。

// drupal does this somewhere to allow me to use another library that uses $
jQuery.noConflict();

(function ($) {
    // $ is now the jQuery object
    //this is my module reveal function/object, added to the global scope.
    window.MyModule = function () {
        //private members and functions                
        return {
            //public members and functions
            init: function () {
                alert($('.super-success').html());
            }
        };
    }();
    // do 'onload' goodness here
    alert($('.success').html()); // success!        
    MyModule.init();
}(jQuery));

【讨论】：