如何使用jQuery写一个jQuery插件

时间:2024-01-09 11:23:02

jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大的麻烦。jQuery的学习成本相对较低,对于有JavaScript基础的朋友很容易上手。而且我也希望能利用jQuery写一套自己的前端框架,有跟我一样想法的人,欢迎扫描尾部二维码,加入群聊,交流学习!

一:关于如何写jQuery插件的方法有三种:

1. 使用$.extend()来扩展jQuery;

2. 使用$.fn来添加jQuery方法;

3. 通过$.widget()应用jQuery UI的部件工厂方式创建;

二:三种jQuery插件开发方式说明

1、$.extend()相对简单,一般很少能够独立开发复杂插件,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。

2、我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction()),而不需要选中DOM元素($('#example').myfunction())。

3、$.widget()是一种高级的开发模式,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等

4、$.fn则是一般插件开发用到的方式,可以利用jQuery强大的选择器带来的便利,以及将插件更好地运用于所选择的元素身上,使用的插件也大多是通过此种方式开发。

三:实例演示

1. $.extend()

(function( $ ) {
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'aaa') + '!');
}
})
$.sayHello(); //Hello,aaa
$.sayHello('bbb'); //Hello,bbb
})( jQuery );

2. $.fn.插件名称

(function($){
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({}, defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
})(jQuery);

保护好默认参数:做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。

调用:

<script type="text/javascript">
$(function(){
$('a').myPlugin({
     'color':red
});
});
</script>

要点

1、jQuery插件的文件名推荐命名为jQuery.[插件名].js,以免和其他JS库插件混淆

2、所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上

3、在插件内部的this指向的是当前通过选择器获取的jQuery对象,而不像一般方法那样,如click,内部的this指向的是DOM元素

4、可以通过this.each来遍历所有的元素

5、所有的方法或函数插件,都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些,甚至可以在插件头部先加上一个分号,以免他人不规范的代码影响自身的插件代码

6、插件应该返回一个jQuery对象,以保证插件的可链式操作

7、避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,避免冲突。当然,也可以利用闭包来回避这种问题,使插件内部继续使用$作为jQuery的别名

8、利用闭包的特性,即可以避免内部临时变量影响全局空间,又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:

(function(){
  /*这里放置代码*/
})();

首先定义一个匿名函数function(){/*这里放置代码*/},然后用括号括起来,变成(function(){/*这里放置代码*/})这种形式,最后通过()这个运算符来执行。可以传递参数进行,以供内部函数使用

//为了更好的兼容性,开始前有个分号
;(function($){    //此处将$作为匿名函数的形参
  /*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(jQuery);      //这里就将jQuery作为实参传递给匿名函数了

上面的代码是一种常见的jQuery插件的结构

PS:欢迎扫描下方二维码或点击链接,加入QQ群

如何使用jQuery写一个jQuery插件

如何使用jQuery写一个jQuery插件