怎么写jQuery插件

Posted 疾风_剑豪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么写jQuery插件相关的知识,希望对你有一定的参考价值。

jQuey是一个非常好用的javascript类库,提供了非常多的接口给程序员使用。但在某些具体方面,并没有完全提供解决方法,这就要求我们自己实现。jQuery官方也提供jQuery拓展的标准。编写jQuery插件时,应该注意一下几点原则:

  1. 避免全局依赖。
  2. 避免第三方破坏。
  3. 兼容jQuery操作符’$’和’jQuery’

这三个原则非常重要,否则,这个插件将会失去插件的意义。

  jquery插件命名,一般在前面加上jquery,这样别人就知道这是jQuery插件。如:jquery.modelselect.min.js

     加了min表示压缩版,压缩版一般处理方式是去掉空格换行,也有些公司为了保护代码,直接重构变量和私有函数名,不过这样做在一般程序员是有效的,但在高手面前,并没什么卵用,有人一样能把它还原。

  OK, jQuery插件的标准代码格式如下,(需要使用闭包,对于javascript闭包,我们后面再谈):

1 (function ($) {
2  //插件内部代码
3 })(jQuery);

以上代码的第三行,可以是window.jQuery或者$,按照官方的解释,这三者是等价的。

在这写一个小demo, 就是插入一个个人信息。

 1 (function ($) {
 2         $.fn.userInfo = function (options) { //定义插件方法名
 3             var dft = {
 4                 //定义一个对象,设置默认值
 5                 name: \'Steven Zhu\', //
 6                 email: \'zhuttymore@126.com\', //链接
 7                 size: \'14px\', //文字大小
 8                 align: \'center \'//文字位置,left || center || right
 9             };
10             var opt = $.extend(dft, options);//这个很关键,待会跟你说。
11             var style = \'style="font-size:\' + opt.size + \';text-align:\' + opt.align + \';"\'; //调用默认的样式
12             var name = \'<p\' + \' \' + style + \'>name:<a target="_blank" >\' + opt.name + \'</a></p>\';
13             var email = \'<p\' + \' \' + style + \'>name:<a target="_blank">\' + opt.email + \'</a></p>\';
14             $(this).append(name);
15             $(this).append(name);
16         }
17     })(window.jQuery);

 

好了,说说$.extend(), 这个方法,他的作用就是扩展,以上这段代码就是将options拓展到dft,最后赋给opt.这样写为了可读性。

所以这段代码还可以这样。

 

options = $.extend({//here is default values},options);

 

这样,看起来就精简多了。

  我们再写插件时,把当前对象return回去,这样返回的又是jQuery对象,这样可以链式操作。结合上面一段,代码修改如下:

 1 (function ($) {
 2         $.fn.userInfo = function (options) { //定义插件方法名
 3             options = $.extend({
 4                 //定义一个对象,设置默认值
 5                 name: \'Steven Zhu\', //
 6                 email: \'zhuttymore@126.com\', //链接
 7                 size: \'14px\', //文字大小
 8                 align: \'center \'//文字位置,left || center || right
 9             },options);
10 var style = \'style="font-size:\' + opt.size + \';text-align:\' + opt.align + \';"\'; //调用默认的样式 11 var name = \'<p\' + \' \' + style + \'>name:<a target="_blank" >\' + opt.name + \'</a></p>\'; 12 var email = \'<p\' + \' \' + style + \'>name:<a target="_blank">\' + opt.email + \'</a></p>\'; 13 this.append(name); 14 this.append(name); 15 16 return this; 17 } 18 })(window.jQuery);

调用:

  在引入插件之后,直接调用就行。

1 <script>
2   $("#user-info").userInfo();
3 <script">

这样会在dom的id="user-info"里输出插件的默认值,即显示结果是:Steven Zhu  zhuttymore@126.com

要改变里面的值,只需要加入你想要的参数就行。如下:

1 <script>
2  $(\'#user-info\').userInfo({
3  name: \'Sun Zhu\',
4  email: \'734271284@qq.com\',
5  size: \'16px\',
6  align: \'right\'
7  });
8 <script">

这样就改变默认值了。输出结果就是:Sun Zhu 734271284@qq.com,文字右对齐。

上面的这样写会有一个弊端,就是不是很好拓展。因为一个插件,往往会有多个方法。一下是改进的结构。

 1 /**
 2  * Created by Steven on 2015/07/10/0010.
 3  * @email zhuttymore@126.com
 4  */
 5 
 6 (function ($) {
 7 
 8     $.fn.extend({
 9         slider:function (opt) {
10             opt = $.extend({
11                 
12             }, opt);
13             //do something here
14     
15          
16 
17             return $.each(this,function(index,ele){});
18         }
19     });
20 
21 })(jQuery);  

 

转载出处:http://zhutty.cnblogs.com

以上是关于怎么写jQuery插件的主要内容,如果未能解决你的问题,请参考以下文章

遇到不同的分页插件 比如bootStrap paganation和jqGrid,但后台代码该怎么写

怎么写jQuery插件

[vscode]--HTML代码片段(基础版,reactvuejquery)

25个可遇不可求的jQuery插件

几个非常实用的JQuery代码片段

几个实用的 jQuery 插件