1 /* 2 *插件类别:1.类级别的插件开发。2.对象级别插件开发。 3 * 4 * 1.类级别:$.post() 5 * 2.对象级别:$("#Me").插件名称(); 6 * 7 * 以下是开发对象级别插件的步骤: 8 *1.定义一个带有个名为“$”参数的匿名函数。将jQuery这个全局变量传入匿名函数,并执行匿名函数。 9 * 10 *2.$.fn或者jQuery.fn本质上可以等于jQuery.prototype。实际上给jQuery扩展了一个名为"插件名"的方法,调用方法:$("#Me").插件名称(); 11 * 12 *3.$.extend(defaultSettings,settings);的含义是,使用settings来覆盖defaultSettings(同名键值), 13 *或者 settings = $.extend({},defaultSettings,settings);即不去覆盖defaultSettings(默认参数),而是合并到一个空的Object。 14 *or settings = $.extend(true,{},defaultSettings, settings);当$.extend的第一个参数为true时,会开启深层拷贝 15 * 16 *4.this在插件内部指向当前通过选择器选择的jquery对象,而非传统意义上的对象的引用。this.each遍历所有的元素。return JQuery对象保证插件的链式操作。 17 * 18 *5.插件中定义的所有方法/函数的末尾都必须带有一个 “;”(分号),否则将不利于代码的最小化。 19 * 20 * 参考:http://www.iteye.com/topic/545971 21 * 参考:http://developer.51cto.com/art/201108/286391.htm 22 * 参考:http://www.cnblogs.com/fromearth/archive/2009/07/08/1519054.html 23 * 参考:http://www.36ria.com/2768 24 * 参考:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html 25 * 参考:http://www.36ria.com/2765 26 * 参考:http://vanessa.b3log.org/jQuery-plugin-architecture 27 * 参考:http://docs.jquery.com/Plugins/Authoring 28 */ 29 30 /* 创建一个闭包 */ 31 ;(function ($) { 32 /* 插件的定义 */ 33 $.fn.wkylin = function (options) { 34 debug(this); 35 // build main options before element iteration 36 var opts = $.extend({}, $.fn.wkylin.defaults, options); 37 // iterate and reformat each matched element 38 return this.each(function () { 39 $this = $(this); 40 // build element specific options 41 var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 42 // update element styles 43 $this.css({ 44 "background-color":o.background, 45 "color":o.foreground 46 }); 47 var markup = $this.html(); 48 // call our format function 49 markup = $.fn.wkylin.format(markup); 50 $this.html(markup); 51 }); 52 }; 53 // 私有函数:debugging 54 function debug($obj) { 55 if (window.console && window.console.log) 56 window.console.log('obj size: ' + $obj.size()); 57 } 58 59 /* 定义暴露format函数 */ 60 $.fn.wkylin.format = function (txt) { 61 return '<strong>' + txt + '</strong>'; 62 }; 63 // 插件的defaults 64 $.fn.wkylin.defaults = { 65 foreground:'#eee', 66 background:'#999' 67 }; 68 /* 设置版本号 */ 69 $.fn.wkylin.version = 1.0; 70 // 闭包结束 71 })(jQuery);
转载于:https://www.cnblogs.com/wkylin/archive/2012/04/18/2455340.html