[原创作品]手把手教你怎么写jQuery插件

时间:2021-09-01 11:13:12

  这次随笔,向大家介绍如何编写jQuery插件。啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长。点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水。哈,不废话,进入正题。

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

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

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

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

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

  OK, jQuery插件的标准代码格式如下,(需要使用闭包,对于javascript闭包,本博客已博文专门介绍):

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

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

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

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

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

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

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

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

  很感谢一楼的评论,提醒我考虑的性能和链式操作。我们再写插件时,把当前对象return回去,这样返回的又是jQuery对象,这样可以链式操作。结合上面一段,代码修改如下:

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

调用:

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

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

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

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

<script>
$('#user-info').userInfo({
name: 'Sun Zhu',
email: '734271284@qq.com',
size: '16px',
align: 'right'
});
<script">

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

2015/18补充:

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

 /**
* Created by Steven on 2015/07/10/0010.
* @email zhuttymore@126.com
*/ (function ($) { $.fn.extend({
slider:function (opt) {
opt = $.extend({ }, opt);
//do something here return $.each(this,function(index,ele){});
}
}); })(jQuery);

原创作品,转载请注明出处:http://zhutty.cnblogs.com

在此特别感谢我在上海的朋友:Oliver。这货是很牛的程序员,当年初次写jquery插件时,多亏他的引导,另,感谢一楼。