当前位置：首页 > article >正文

jQuery基础——开发插件

article 2024/11/21 1:25:00

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

啥叫插件？怎么开发？插件有啥用？

下面一一解答。

JQ插件介绍

JQ插件，其实就是使用JQ来封装的一个功能或者特效。

啥时候特效？就是动画咯。

JQ插件本质上就是一个js文件而已，所以说引入很简单——在html文件上，通过Script标签引入即可。

当然了，你需要注意引入顺序——先是JQ库文件，然后才是你的插件，或者是其他在网上下载的插件。

如果引入顺序出现了错误，会出现bug。

为什么要先引入JQ库文件？

因为浏览器解析html文件是从上往下执行的，JQ插件本身就是通过JQ写的，如果你的库文件没有先被解析，那你的JQ插件就没有效果了。

为什么要开发插件？

因为JQ插件本身的冗余代码很多，性能可能不够。

自己开发的，一般都是针对于某个功能的。

关于命名

命名其实很简单，跟JS库文件类似即可。

jquery.[插件名].js

JQ常用插件

既然都是常用的插件了，那这肯定不是我们自己写的。

下面介绍几个非常好用的插件。

文本溢出：dotdotdot.js

什么是文本溢出效果？

其实很简单理解，dot就是“点”的意思，三个dot不就是“...”的意思吗？非常的形象生动。

其实这个效果，不需要JQ插件也是可以做到类似的。

只不过，使用CSS写的效果，只能应用在单行文本上，不能用于多行文本，而这个插件则是允许多行文本。

CSS写的：

overflow: hidden
white-space: nowrap
text-overflow: ellipsis

怎么使用这个JQ插件？

其实很简单：先引入这个插件，然后再使用。

语法：$().插件名()

$()是用来选取DOM元素的，使用插件其实就是把插件看作是一个方法即可。

疑惑：我这段落文本是不是每行都有“...”的效果？

其实不是，只是最后一行有这个效果。

延迟加载：lazyload.js

什么是延迟加载？

其实就是懒加载，一般都是懒加载图片，不会说懒加载别的内容。

懒加载效果就是，一个页面，一般是很长的，如果你从一开始开起来，如果你没有到某个图片，那这个图片就先不显示，当你刷到这里的时候，我才开始加载给你看。

使用这个效果有什么好处？

那就是降低后台压力，毕竟不是所有人都需要看到最后的。

如果每一次进入页面都全部加载，后台压力要炸了。

而且这也有利于提高用户使用体验，因为加载的东西少了，用户打开网页也更快了，性能也更好了。

使用步骤：

1.引入JQ插件——lazyload.js。

2.图片的src属性用data-original代替，也就是属性值不变，把src改为data-original即可。

3.添加JQ代码：

$().lazyload({ effect: "fadeIn" })

注意：这里的$()选取的DOM元素是网站展示图片的元素，也就是img元素。

fadeIn是嘛呀？

不就是之前学到的JQ动画中的淡入效果嘛。

复制粘贴：zclip.js

实话说，我不知道这个有啥用。

所以不说。

表单验证：validate.js

这个很好用，讲这个吧。

步骤其实就两个，引入和使用。

1.引入JQ插件，但是这里的插件有两个：validate.js和message_zh.js。

2.添加JQ代码：
$().validate({
    // 自定义验证规则
    rules: {
        ...
    }
})

这个跟vue中使用的差不多。

rules里面添加的验证规则写法：对象的形式：

rules: {
    name: { required: true, maxlength: 6 },
    password: { required: true, maxlength: 20 }
}

这里的name/password都是input中的name属性。

注意：一般只有表单元素有name属性。

required是必选，还是可选的意思，true是必选，false是可选。

maxlength直译即可，max最大，length长度，合起来就是最大长度。

JQ插件

现在介绍一下JQ插件的分类。

一般来说，JQ插件分为：

方法类插件

函数类插件

这里说的都是常用的，不常用的，我去掉了。

方法类插件

什么是方法类插件？

其实先使用JQ选择器来选取一个DOM元素，从而获取一个JQ对象，然后再给这个获取到的JQ对象添加一个方法：

定义语法：

(function($){
    $.fn.extend({
        "插件名": function(参数) {
            ...
        }
    })
})(jQuery)

为什么要加上立即执行函数？

是因为防止“$”变量污染，其实所有插件都可以使用这个立即执行函数。

使用语法：

$().函数名(参数)

这个跟内置方法的语法是差不多的。

可以看出来，所谓的“封装JQ插件”，其实就是把功能封装成一个函数而已。

按照这个逻辑，你其实还可以使用：

(function($){
    $.fn.插件名 = function(参数){ ... }
})(jQuery)

其实这种还有个不是那么好的点，那就是传参不是很OK。

其实我们可以把参数改为一个对象，使用对象传值也是OK的：

(function($){
    $.fn.extend({
        "插件名": function(options) {
            $().css({ "color": options.color })
        }
    })
})(jQuery)

当然啦，如果你想要设置默认值也是OK的。

只需要在function内部定义一个默认值就OK了。

也可以同时封装多个JQ插件。

函数类插件

函数类插件在语法上跟方法类插件其实是差不多的。

定义语法：

(function($){
    $.extend({
        "插件名": function() {
            ...
        }
    })
})(jQuery)

你就说，是不是差不多的？

怎么区别？

看看有没有fn，有没有参数即可。

不是，怎么跟工具函数好像长得一毛一样？

其实工具函数本身就是函数类插件，这两个是一样的，只是叫法不一样。

使用上是一样的，这里不展开。

总结

1.插件的命名最好是按照jquery.[插件名].js或者jquery.[插件名].min.js的格式。

2.在插件的最后必须使用return $(this)来返回当前JQ对象，以便保持链式调用的功能。

3.无论是啥插件，定义的结尾都要使用分号结尾，否则压缩后可能会出现错误。

4.我们常说的JQ插件，指的都是方法类插件。

5.$.extend()方法是在JQ全局对象上扩展的一个方法，而$.fn.extend()方法是在选择器上扩展的一个方法。所以定义工具函数应该用$.extend()方法，定义JQ插件应该用$.fn.extend()方法。