jQuery插件开发详解（带demo）

最新推荐文章于 2020-10-16 08:12:51 发布

勿在浮沙筑高台

最新推荐文章于 2020-10-16 08:12:51 发布

阅读量494

点赞数 1

分类专栏：前端文章标签： jquery jquery插件

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery的链式调用是非常好用，
比如$(".class").addClass(".abc").siblings().removeClass(".abc")；
这个写法在导航中点击某个tab修改样式十分常见，链式调用也是jQuery很重要的特点，话扯得有点远。
jQuery这么热门还有一个重要的原因——可扩展性，它允许我们通过方法来扩展jQuery。
我们该如何扩展jQuery呢？主要可以通过下面2个来扩展：

jQuery.extend
jQuery.fn

当然上面的也等价于：

$.extend
$.fn

复制代码

 
        为什么呢？看过jQuery源码的人都知道，在jQuery中这么一种写法： 
       
        window.$ = window.jQuery = jQuery; 
       
        这里就不详细描述了，想深究的人可以查阅其他的资料

下面开始介绍如何通过上面的两种方法实现我们想要的功能：

$.extend
如果把jQuery当成一个类，$.extend相当于为该类添加了静态方法extend。

复制代码

 
        我们可以通过$符号调用（$.functionName()）而不需要选中DOM元素($('.className').functionName())。

假设现在有个需求，我们需要扩展一个写日志的函数——日期+错误信息，我们可以这么写：

复制代码

 
        <!DOCTYPE html> 
       
        <html lang="en"> 
       
        <head> 
       
        <meta charset="UTF-8"> 
       
        <title>demo</title> 
       
        </head> 
       
        <body> 
       
        <script src="jquery.js"></script> 
       
        <script> 
       
        $.extend({ 
       
        log: function(message) { 
       
        var now = new Date(), 
       
        y = now.getFullYear(), 
       
        m = now.getMonth() + 1, 
       
        d = now.getDate(), 
       
        h = now.getHours(), 
       
        min = now.getMinutes(), 
       
        s = now.getSeconds(), 
       
        time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s; 
       
        console.log(time + ' My App: ' + message); 
       
        } 
       
        }); 
       
        $.log("出错啦！"); 
       
        </script> 
       
        </body> 
       
        </html>

Chrome浏览器f12，发现输出了：

复制代码

 
        2016/1/28 15:35:16 My App: 出错啦！

是不是很简单，再来看看 $.fn.extend。
$.fn、
$.fn等于$.prototype
基本的书写格式如下：
复制代码

 
        $.fn.pluginName = function(options) { 
       
        //这里写我们想要的效果 
       
        }

复制代码

 
        调用时和上面的不一样，需要操作具体的对象： 
       
        $(".ele").pluginName(options);

同样，假设我们想修改某个元素的颜色(颜色不固定)，我们可以这么写：

复制代码

 
        $.fn.changeColor = function(colorName){ 
       
        this.css("color":colorName? colorName : '#000'); 
       
        }

复制代码

 
        通过上面的写法，提高了代码的复用性，可扩展性也高： 
       
        $("span").changeColor();--span标签颜色变为默认的：#000 
       
        $("span").changeColor("#f06");--span标签颜色变为默认的：#f06 
       
        $("p").changeColor("#f06");--p标签颜色变为默认的：#f06

备注：this指代的是我们在调用该插件时，jQuery选择器选中的元素。this和prototype 都是js中十分重要的概念，希望大家都能多了解这么面的知识。
如果我们有这么一个需求，一次性修改多个样式,且每个样式存在一个对应的默认值。

首先先看这一段代码

复制代码

 
        <!DOCTYPE html> 
       
        <html lang="en"> 
       
        <head> 
       
        <meta charset="UTF-8"> 
       
        <title>demo</title> 
       
        </head> 
       
        <body> 
       
        <p class="text1">测试文字</p> 
       
        <p class="text2">测试文字</p> 
       
        <script src="jquery.js"></script> 
       
        <script> 
       
        $.fn.changeColor = function(options){ 
       
        this.defaults = { 
       
        'color': '#000', 
       
        'fontSize': '14px', 
       
        'fontWeight': 'normal' 
       
        }; 
       
        this.opt = $.extend(this.defaults, options); 
       
        console.log(this.defaults); 
       
        this.css({ 
       
        'color': this.opt.color, 
       
        'font-size': this.opt.fontSize, 
       
        'font-weight': this.opt.fontWeight 
       
        }); 
       
        } 
       
        $(".text1").changeColor(); 
       
        $(".text2").changeColor({'color': '#f06','fontSize': '18px','fontWeight': 'bold'}); 
       
        </script> 
       
        </body> 
       
        </html>

界面上的样式结果是我们所要的，但是我们奇怪的发现第二次打印 console.log(this.defaults);时，defaults的值被我们所传的options覆盖了。
造成这个结果的原因是：

复制代码

 
        this.opt = $.extend(this.defaults, options); 
       
        使用jQuery的extend方法, 
       
        extend方法传递单个对象的情况下，这个对象会合并到jQuery身上， 
       
        而当用extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里, 
       
        同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。

解决办法就是使用下面的这句话替代上面的：

复制代码

 
        this.opt = $.extend({}, this.defaults, options);

你看执行结果正常了，上面写的其实没有必要用extend就可以实现一次性修改多个样式,且每个样式存在一个对应的默认值。之所以例子中用到这个，就是想说明 extend 的这个注意点。

但是这样写仍然可能会出现问题，更好的写法是：

复制代码

 
        ;(function($,window,document,undefined){ 
       
        $.fn.changeColor = function(options){ 
       
        this.defaults = { 
       
        'color': '#000', 
       
        'fontSize': '14px', 
       
        'fontWeight': 'normal' 
       
        }; 
       
        this.opt = $.extend({}, this.defaults, options); 
       
        console.log(this.defaults); 
       
        this.css({ 
       
        'color': this.opt.color, 
       
        'font-size': this.opt.fontSize, 
       
        'font-weight': this.opt.fontWeight 
       
        }); 
       
        } 
       
        })(jQuery,window,document);

将我们要实现的代码封装在

复制代码

 
        ;(function($,window,document,undefined){ 
       
        //想要实现的功能的代码 
       
        })(jQuery,window,document);

这里的"；"最好添加上，可以避免代码压缩时出现问题
这种将系统变量以变量形式传递到插件内部* 的方法可以避免别人写的代码将window, undefined等这些系统变量或者关键字修改掉了，而我们又在自己的代码里面进行了使用。
看过一篇文章，里面有对这个undefined使用的介绍我这就直接复制过来了。

复制代码

 
        为了得到没有被修改的undefined， 
       
        我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传， 
       
        所以‘undefined’那个位置接收到的就是真实的'undefined'了。