简记 jQuery 插件模板

 1 /**
 2  * @lisence jquery plugin demo v1.0.0
 3  *
 4  * author: Jeremy Yu
 5  *
 6  * description: 
 7  *   this is a jquery plugin Template
 8  *   see the end of this document to learn how to use the jquery plugin
 9  */
10 ;
11 (function($, window, document, undefined) {
12 
13     /* 插件类定义 */
14     var PluginName = function(el, options) {
15         this.version = "1.0.0"
16         this.el = el;
17         this.options = options;
18         this.init(); //调用初始化方法
19     }
20 
21     /* 定义无参方法,方法名为 init */
22     PluginName.prototype.init = function() {
23         /*  初始化操作 */
24         alert('初始化成功');
25     }
26 
27     /* 定义有参方法,方法名为 func */
28     PluginName.prototype.func = function(arg) {
29         /* TODO  */
30     }
31 
32     /* 定义有返回值方法,方法名为 funcRet */
33     PluginName.prototype.funcRet = function() {
34         /* TODO 
35          * 执行完后返回结果
36          * 返回值可以是undefined、null、数字、字符串、布尔值、对象等
37          * 如果没有返回，默认返回 undefined
38          */
39         return 0;
40     }
41 
42     /* 定义命名空间，且作为data的key */
43     var namespace = 'plugin_name';
44     /* 定义插件 */
45     $.fn.plugin_name = function(options) {
46         var $this = $(this);
47         var value, args = Array.prototype.slice.call(arguments, 1);
48         var data = $this.data(namespace);
49         if (!data) {
50             var settings = $.extend({}, $.fn.plugin_name.defaults, options);
51             $this.data(namespace, data = new PluginName(this, settings));
52         }
53         if (typeof options == 'string') {
54             value = data[options].apply(data, args);
55         }
56         return typeof value === 'undefined' ? this : value;
57     };
58 
59     /* 定义插件的默认值(属性、事件) */
60     $.fn.plugin_name.defaults = {
61         prop1: "",
62         prop2: "",
63         onEvent: function(arg1, arg2) {},
64         onError: function(err) {}
65     };
66 
67 
68     /*
69         引入 jquery.min.js 和 当前 js 文件
70 
71         HTML代码：
72         <div id="#plugin"></div>
73 
74         插件使用
75         $('#plugin').plugin_name({ prop1 : '', onEvent : function(){}});
76 
77         方法调用
78         $('#plugin').plugin_name('function_name', args);
79     */
80 
81 })(jQuery, window, document);