JQuery插件开发 - 模板

 1 (function($) {

 2     $.fn.PluginName = function(options) {

 3         // 创建一个默认设置对象

 4         var defaults = {

 5             key : "DefaultValue"

 6         }

 7         //使用extend方法从options和defaults对象中构造出一个新的设置对象

 8         var options = $.extend(defaults, options);

 9         /****************

10              执行代码

11         ****************/

12     };

13 })(jQuery);

 //调用自定义的JQuery插件

 $(".className").PluginName({key:"NewValue"});

 

---

 

var options = $.extend(defaults, options);

/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

Object.extend = function(destination, source) { // 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法

　　for (var property in source) {

    　　destination[property] = source[property];// 利用动态语言的特性, 通过赋值动态添加属性与方法

　　}

　　return destination;// 返回扩展后的对象

}

 

---

 

 

 1 (function($) {

 2     var methods = {

 3         init : function(options) {

 4             // 创建一个默认设置对象

 5             var defaults = {

 6                 key : "DefaultValue"

 7             }

 8             //使用extend方法从options和defaults对象中构造出一个新的设置对象

 9             var options = $.extend(defaults, options);

10             /***************

11                  执行代码

12             ***************/

13             

14         }

15     };

16     $.fn.PluginName = function(options) {

17         //获取传入的第一个实参副本（arguments对象是收到的实参副本，就像数组，但却又不是数组）

18         var method = arguments[0];

19         //获取我们的方法

20         if (methods[method]) {

21             //如果方法存在，存储起来以便使用

22             method = methods[method];

23             //如果方法不存在，检验对象是否为一个对象（JSON对象）或者method方法没有被传入

24             arguments = Array.prototype.slice.call(arguments, 1);

25         } else if ( typeof (method) == 'object' || !method) {

26             //如果我们传入的是一个对象参数，或者根本没有参数，init方法会被调用

27             method = methods.init;

28         } else {

29             //如果方法不存在或者参数没传入，则报出错误。需要调用的方法没有被正确调用

30             $.error('Method ' + method + ' does not exist on jQuery.ChangeTabs');

31             return this;

32         }

33         //调用我们选中的方法

34         return method.apply(this, arguments);

35     };

36 })(jQuery);

$('.className').pluginName('init', 'argument'); // 调用：把 "argument 1" 和 "argument 2" 传入 "init"