jQuery插件的几种写法大总结

2022-05-28 03:59:36

插件编写的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护

jQuery插件开发方式

通过$.extend()来扩展jQuery

通过$.fn 向jQuery添加新的方法

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

三种jQuery插件开发方式说明

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

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

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

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

$.extend()扩展jQuery的实例

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

说明：上面代码中，通过$.extend()向jQuery添加了一个sayHello函数，然后通过$直接调用

$.fn方式插件开发

定义

$.fn.pluginName = function() {
    //your code here
}

定义说明

基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开

简单实例

将页面上所有链接颜色转成红色，则可以这样写这个插件

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素 example :$('a'),则this=$('a')
    this.css('color', 'red');
}

实例说明

1、在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合

2、如果通过调用jQuery的.each()方法处理集合中的每个元素时要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下

$.fn.myPlugin = function() {    
    this.css('color', 'red');   //在这里面,this指的是用jQuery选中的元素
    this.each(function() {        
        $(this).append(' ' + $(this).attr('href'));   //对每个元素进行操作
    }))
}

实例插件的使用

<ul>
    <li> <a href="#">aaa</a> </li>
    <li> <a href="#">bbb</a> </li>
    <li> <a href="#">ccc</a> </li>
</ul>
<p>这是p标签不是a标签，我不会受影响</p>
<script type="text/javascript">
    $(function(){
        $('a').myPlugin();
    })
</script>

让插件支持链式调用

jQuery一个时常优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。要让插件不打破这种链式调用，只需return一下即可

$.fn.myPlugin = function() {    
    this.css('color', 'red');   //在这里面,this指的是用jQuery选中的元素
    return this.each(function() {        
        $(this).append(' ' + $(this).attr('href'));   //对每个元素进行操作
    }))
}

让插件接收参数

1、一个强劲的插件是可以让使用者随意定制的，这要求我们提供在编写插件时就要考虑得全面些，尽量提供合适的参数

2、比如现在我们不想让链接只变成红色，我们让插件的使用者自己定义显示什么颜色，要做到这一点很方便，只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收

3、为了灵活，使用者可以不传递参数，插件里面会给出参数的默认值

4、在处理插件参数的接收上，通常使用jQuery的extend方法，当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。

5、可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指定的值，未指定的参数使用插件默认值

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

7.实例

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

插件开发中的命名空间

1、不仅仅是jQuery插件的开发，我们在写任何js代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多，如果有意无意在全局范围内定义一些变量的话，最后很难维护，也容易跟别人写的代码有冲突

2、比如你在代码中向全局window对象添加了一个变量status用于存放状态，同时页面中引用了另一个别人写的库，也向全局添加了这样一个同名变量，最后的结果肯定不是你想要的。所以不到万不得已，一般我们不会将变量定义成全局的

3、可以使用自调用匿名函数包裹插件代码

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

尽量在插件的最前面加上分号

这样可以避免我们将这段代码放到页面后，前面别人写的代码没有用分号结尾，这样，这个插件代码就会报错。

可以将系统变量以变量形式传递到插件内部

;(function($,window,document,undefined){
    //我们的代码。。
    //...
})(jQuery,window,document);

将插件代码混淆与压缩的方法

1、我们下载的插件里面，一般都会提供一个压缩的版本一般在文件名里带个'min'字样。也就是压缩后的版本。并且平时我们使用的jQuery也是官网提供的压缩版本，jquery.min.js

2、这里的压缩不是指代码进行功能上的压缩，而是通过将代码里面的变量名，方法函数名等等用更短的名称来替换，并且删除注释（如果有的话）删除代码间的空白及换行所得到的浓缩版本。同时由于代码里面的各种名称都已经被替代，别人无法阅读和分清其逻辑，也起到了混淆代码的作用

javascript变量规范

在javascript中，没有真正意义的共有变量、私有变量、常量等概念，当javascript代码达到一定数量级时，过段时间回头看自己写的代码，会把自己也搞晕的

1、请在私有变量前加“_” 比如： var _pub = this.pub;

2、常量请大写比如： this.COLOR = "red";

3、jquery对象变量前加“$” 比如： this.$Obj = $("#layout");

4、object、array变量前加“o”、“a”很多人喜欢给数组变量加个”s”，这也是可以的，按个人习惯，如果你觉得有必要还可以给函数前加个“fn”。

jquery插件开发的一些建议

1、请多使用data()方法jquery中data()方法非常有用，尤其在jquery插件开发中，因为data()所创建的缓存，可以完整的保存各种数据类型的数据，这是其他缓存机制无法比拟的

2、请使用bind/on来绑定事件很多朋友喜欢以下的代码：

$(".yitip").click(function(){ ........ })

但在jquery插件开发中更提倡使用bind/on：

$(".yitip").bind('click',function(){ ......... })

3、善用typeof判断数据类型，这个方法在参数判断中非常有用处

4、插件名加个独有前缀 jquery插件有太多了，插件撞车时很容易的事，比如搜索框插件：

$.fn.tips = function(options){ }

码农公寓