如何使用jQuery写一个jQuery插件

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插件的结构