jQuery插件模板

 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);
posted @ 2012-04-18 15:14  wkylin  阅读(2360)  评论(0编辑  收藏  举报