Question

我正在编写我的第一个jQuery插件，并遇到了一些速度障碍。这是我希望我的插件调用者做的事情，基本上，但我不确定如何构建插件：

$('div.selector').myPlugin(
    'dataloader', {
    { 
        source : 'source.json',
        autoUpdate : true
    },

    buildComplete : function() {
        //Do something when the building is completed
    }
});

因此，基本上，“dataloader”值是必需的，花括号内的选项是可选设置，而buildComplete是一个完成某事后执行的函数。

我不确定如何在插件调用者中实现“buildComplete”函数（或类似函数）。我会喜欢避免下面显示的方式，因为“buildComplete”对于每个使用的页面都会有所不同：

//No can do!
$('div.selector').myPlugin('dataloader').buildComplete('do something');

是否有一个基本的例子，我可以在上面找到一些东西？

谢谢， spryno724

Answer 1

这应该让你入门

(function($){ // avoid variable polution by wrapping like this
    $.fn.myPlugin = function(dataloader,options_in){
            options = $.extend({},{ // create option object by extending empty array with default values and then overwriting with passed options
                buildComplete: $.noop // default value for buildComplete is empty function
            },options_in)

            if(condition == met){ // in certain circumstance
                options.buildComplete() // run the buildComplete function
            }

        }
})(jQuery)

// call like this
$('div.delector').myPlugin('dataloader',{ buildComplete: function(){ alert('the build is complete') }, otherOption: 'whatever' })

Answer 2

$.extend({
  myPlugin : function( parameters, callbackFn ){

   ...do what needs to be done...

    if( $.isFunction( callbackFn ) ){
      callbackFn.call( someArguments);
    }

  }

});

$.myPlugin( { param1: 'sdfsdf' }, function(args){
 ..here's your callback...
});

插件调用中的jQuery方法

2 个答案: