Javascript模块-覆盖功能

Question

I have the following pattern for a jQuery based JS plugin:

var myplugin = ( function ( $ )
{

    // (...)

    var myfunction = function()
    {
        console.log( "Calling default myfunction" );
    }

    // (...)

    return this;

})( jQuery );

I would like to enable third parties to override the functions (not necessarily any and all) within the plugin like so:

myplugin.myfunction = function()
{
    console.log( "Calling overridden myfunction" );
}

Can this be done without defining anything else in the global scope?

I realise that what I want to do may not be feasible using this design pattern. If this is the case what type of pattern should I be looking for?

Many thanks!

Answer 1

you can do like this way

 var myplugin = ( function ( $ )
{

    // (...)

    this.myfunction = function()
    {
        console.log( "Calling default myfunction" );
    }


    // (...)

    return this;

})( jQuery );


myplugin.myfunction = function()
{
    console.log( "Calling overridden myfunction" );
}
myplugin.myfunction();

DEMO

Answer 2

As far as good practices go, you shouldn't encourage modification of your plugin. Instead, you may allow modified copies of your plugin.

var myPlugin = (function createModule($){
  var module = {};

  module.extend(stuff, function(changes){
    $.extend(createModule(), changes || {});
  });

  module.something = function(){
     return 1;
  }
  return module;
})(jQuery);

Now if we call myPlugin.something() we get 1 .

If the user does this:

var altPlugin = myPlugin.extend({
   something: function(){
      return 2;
   }
});

altPlugin.something() // => 2
myPlugin.something() // => 1

This allows us to non destructively modify the behavior or myPlugin. If the user decides it wants to just overwrite myPlugin that'll still work, this just provides a better alternative.

Answer 3

Yes, but not how you want. You can use || operator and then use some options to be passed.

(function ($) {
    $.fn.myplugin = function (options) {
        // (...)
        var myfunction = options.overRide || function () {
            console.log("Calling default myfunction");
        }
        // (...)
        return this;
    }
})(jQuery);

Now, you can pass any function like:

$('selector').myplugin({
    overRide: function () {
        console.log("Calling overridden function ");
    }
});