jQuery扩展(插件)编写方法

HTML/CSS/JS 阅读: 245

点进来的同学一定都用过jQuery,它提供了很多实用、简单、便捷的方法。jQuery虽然好用,但有时候需要定制自己所需要的功能时候,应该去怎么扩展jQuery呢,今天作者就带大家一起总结一下jQuery插件编写方法。

扩展jQuery有两种不同的方式:

  1. 扩展jQuery对象的方法,使用 $.fn.extend
  2. 扩展jQuery本身的方法,使用 $.extend

jQuery Pugin

扩展jQuery对象的方法

jQuery对象的方法就是使用选择器选中元素后可以使用的方法,比如click方法。使用 $.extend 可以扩展对象方法。
jQuery扩展大多数属于此类型。

例子:改变元素背景颜色的扩展方法

$.fn.extend({
    setBackColor: function(color){
        return this.css('background-color', color || '#ffffff');
    },
});

说明:

  1. $.fn.extend 传入一个对象,每个键值对即为扩充的方法名和方法体, 这意味着你可以一次扩展多个方法;
  2. 扩展方法内,如setBackColor 中,this为包裹当前元素的jQuery对象;
  3. 扩展方法应该返回 this,以便可以提供链式操作。

使用方法:
这类插件使用和使用jQuery内置的对象方法一样,先选择元素再调用扩展方法:

$('h1').setBackColor('#ff0000');

这会将h1元素的背景颜色修改为红色。

扩展jQuery本身的方法

jQuery本身的方法指的是jquery的全局方法(静态方法),不需要选择元素就可以使用,比如 $.ajax 方法。

例子:jquery弹窗扩展

$.extend({
    alert: function(text){
        return alert(text);
    },
    confirm: function(text){
        return confirm(text);
    },
});

说明:

  1. $.extend 传入一个对象,每个键值对即为扩充的方法名和方法体, 这意味着你可以一次扩展多个方法;
  2. 扩展方法内,this 为jQuery函数本身;
  3. 不需要返回this,根据需要返回所需要的内容。

使用方法:
这类插件使用和就和使用其他jQuery全局方法一样:

$.alert('jquery alert ok!');
$.confirm('jquery confirm ok!');

插件编写经验

使用 $.extend 设置默认参数

$.extend 还有一种使用方法,当给 $.extend 传递多个参数时候,例如:

var options = $.extend({
    width: 150,
    height: 100,
}, options);

后面参数相同中的值会依次覆盖掉前面的参数值。$.extend的详细说明: 戳这里查看

所以在编写插件时,需要传入一些参数,可以这样写:

$.fn.extend({
    setSize: function(options){
        options = $.extend({
            width: '100px',
            height: '100px',
        }, options);
        this.css('width', options.width);
        this.css('height', options.height);
        return this;
    },
});

这个例子扩展了一个修改元素尺寸的方法,需要传入两个参数widthheight,使用上面的这种方法。不仅不需要记住参数顺序,而且可以设置默认参数,

将代码放在匿名函数中

将插件所有的相关代码放在一个匿名函数中,可以防止污染全局命名空间。

例子:改写上面的修改元素尺寸插件

/**
 * jquery修改元素尺寸插件
 * @author  luoluolzb
 * @version 1.0
 * @datetime 2019/5/2
 */
;(function($){
    function setSize(options){
        options = $.extend({
            width: '100px',
            height: '100px',
        }, options);
        this.css('width', options.width);
        this.css('height', options.height);
        return this;
    };

    $.fn.extend({
        'setSize': setSize,
    });
})(jQuery);

说明:

  1. 首行分号为了防止引入的其他库的代码末尾没有分号导致的问题;
  2. 可以在匿名函数中定义一些辅助函数和变量给插件函数使用,这样外部无法访问,也不会导致名称冲突。

插件文件命名方法

一般应该将插件放在一个单独js文件中,命名方法可以使用:jquery.pluginName.js

例如,上面的修改元素尺寸插件应该命名为:jquery.setSize.js,压缩后:jquery.setSize.min.js

作者写的一些jQuery插件

图片轮播插件:jquery-lqImgCarousel

项目地址:https://github.com/luoluolzb/jquery-plugin/tree/master/jquery-lqImgCarousel

图片滚动插件:jquery-lqImgSlider

项目地址:https://github.com/luoluolzb/jquery-plugin/tree/master/jquery-lqImgSlider

文件上传插件:jquery-lqUploader

项目地址:https://github.com/luoluolzb/jquery-plugin/tree/master/lqUploader

版权声明:本文为博主原创文章,转载需注明来自: 洛洛の空间