用功能包装jQuery插件

Question

Let's say I have following simple plugin:

(function ( $ ) {
    $.fn.greenify = function() {
       this.css( "color", "green" );
       return this;
    };
}( jQuery ));

I don't want to make any changes to the plugin itself, but I would like to wrap with another function and extend its namespace as follow:

(function($) {
    $.fn.myFunction = function () {
        (function ($) {
            $.fn.greenify = function () {
                this.css("color", "green");
                return this;
            };
        }(jQuery));
    };
})(jQuery);

So I can call the plugin function like this:

$(selector). myFunction().greenify();

Basically I want to disable calling 'greenify' function directly.

Is it possible?

Answer 1

It's not clear from the question, but I'm assuming the simple plugin "greenify" is a third-party or other "forced to use" plugin that you, for whatever reason, can't change. Let's also assume that it's actually quite a complicated plugin and simplified for the sake of the question.

This means

• you can't change it
• you can't duplicate the entire plugin inside your wrapper

The usual method for overwriting something is to take a copy, then make the new version do what you want, possibly calling the old version, eg:

var oldfoo = foo;
foo = function() { 
    alert("foo called");
    oldfoo();  // or oldfoo.apply(this) to be clearer
}

The same principle can be applied here, but instead make 'foo' (in the example above) null - to get rid of it, eg:

var oldfoo = foo;
newfoo = function() { 
    alert("foo called");
    oldfoo();  // or oldfoo.apply(this) to be clearer
}
foo = null;

The complication is with jquery and wanting to keep the method chaining, which can be achieved by storing 'this' and applying it as desired.

Here's the full code with explanation comments:

// The original plugin to be wrapped
(function ( $ ) {
    $.fn.greenify = function() {
       // changed to background-color for more impact (demo purposes)
       this.css( "background-color", "lightgreen" );
       return this;
    };
}( jQuery ));

(function($) {

    // allow this to be referred to later 
    // inside another loop where 'this' is something else
    var me = this;  

    // take a copy of the original
    // this stays inside the scope of (function($)) so can't be seen outside
    me.original_greeny = $.fn.greenify;

    // provide a wrapper
    $.fn.myFunction = function () {
        // the jquery elements for applying later
        var $this = $(this)

        // exported function
        return {
            greenify: function() {
                // Call the original function with the jquery elements
                // and return them for chaining
                return me.original_greeny.apply($this)
            }
        };

    };
})(jQuery);

// Now remove the original completely
(function ( $ ) {
    $.fn.greenify = null;
}(jQuery));

// As desired, also demonstrating chaining still works
$("#a").myFunction().greenify().css("font-style", "italic")

// Confirm that the original has been removed 
// gives error $(...).greenify is not a function
try {
  $("#a").greenify()
} catch(e) {
  $("#a").text("error on $().greenify: " + e)
}

and a jsfiddle

Answer 2

If you want to create your own context, one way is to return an object with a set of functions:

(function($) {
    $.fn.myFunction = function () {
        // Cache jQuery object
        var $this = this;

        // Return interface that acts on jQuery object
        return {
            greenify: function () {
                $this.css("color", "green");
                return $this;
            }
        };
    };
})(jQuery);

Then you could call it using:

$(selector).myFunction().greenify();

Fiddle

Edit: As a warning though, when you do this you are leaving the jQuery chaining context after calling .myFunction , which can be very confusing in code.

Answer 3

I think you're talking about method chaining which is the beauty of jQuery methods. Define your new method as follows, but leave greenify() unchanged:

(function($) {
    $.fn.myFunction = function () {
        return this.each(function() {
            //Do stuff
        });
    };
})(jQuery);

 (function ( $ ) { $.fn.greenify = function() { this.css( "color", "green" ); return this; }; }( jQuery )); (function($) { $.fn.myFunction = function () { return this.each(function() { $(this).css({border:'1px solid black',textAlign:'center'}); }); }; })(jQuery); $('.box').myFunction().greenify(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">COLOR CHANGE</div> 

Answer 4

Pretty sure so long as your myFunction returns this , that you should be able to chain whatever you want to it.

(function ( $ ) {
    $.fn.greenify = function() {
       this.css( "color", "green" );
       return this;
    };
}( jQuery ));

(function($) {
    $.fn.myFunction = function () {
        // Do some stuff
        return this;
    };
})(jQuery);

$(selector).myFunction().greenify();

EDIT: If the whole point is to "disable calling greenify directly", why would you extend jQuery in the first place? 'greenify could be nested and triggered by passing an argument of some kind. Something like:

(function($) {
    $.fn.myFunction = function (options) {
        // Do some stuff

        if (options.greenify) {
            this.css("color", "green");
        }

        return this;
    };
})(jQuery);

$(selector).myFunction({greenify: true});

... or you could just define greenify as a function (instead of a plugin) and call it. But the point of defining plugins is so they can then be called globally.

Answer 5

You definitely don't want to take the current shown approach, because every time myFunction is called, it will also assign greenify. Simply take your myFunction plugin, assign a flag to the jQuery object that was constructed, and then check for that flag in greenify.

 (function($) { $.fn.myFunction = function () { this.greenMarker = true; return this; }; $.fn.greenify = function () { if(!this.greenMarker) return this; this.css("color", "green"); return this; }; })(jQuery); $('.f').greenify(); $('.g').myFunction().greenify(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="f">No Green</div> <div class="g">Green Me</div>