Javascript模块在Drupal 7中显示并限制了jQuery

Question

Alrightythen!

So I am busy with some javascript development inside drupal 7 pages. We basically have an MVC that hooks into a drupal page. Nothing fancy. Recently I started fixed legacy code that called jQuery.noConflict() to get an instance of jQuery because in drupal 7 jQuery is namespaced and the current dev did not know how to solve the dreaded '$ is not a function' issue without plastering every script with its own 'aliased' jquery instance like so:

$xj = jQuery.noConflict();

This causes a hole world of sh!z for any other code assuming $ is still available globally.

Now I have cleaned up all the noConflict calls and also wrapped all 'onload code' in this fancy closure:

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

But now, sadly, I am being punished by the universe for using the javascript module reveal pattern. Let me try and explain by a code snippet: http://jsfiddle.net/yz41wr2g/

Does anyone have experience using namespaced jQuery in the module reveal pattern like this?

Answer 1

Here is my best attempt:

// 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/

Please correct me if i'm wrong =)

Answer 2

You are supposed to wrap all JavaScript code that depends on jQuery in an immediately invoked anonymous function . This is not a Drupal thing, this is a good practice when using jQuery . Drupal only force you to behave correctly because it behave correctly itself and does not want to prevent you from using another JavaScript library that use $ .

// 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));