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);