JQuery——插件的开发和使用（一）

最新推荐文章于 2022-11-08 07:29:41 发布

独孤文彬

最新推荐文章于 2022-11-08 07:29:41 发布

阅读量1.1k

点赞数

分类专栏： ●Web之旅 ------【JQuery】文章标签：插件 jquery

本文链接：https://blog.csdn.net/t131452n/article/details/50654667

版权

●Web之旅同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

------【JQuery】

6 篇文章 0 订阅

订阅专栏

什么是JQuery插件？

官网的介绍：

A jQuery plugin is simply a new method that we use to extend jQuery’s prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you calljQuery() you’re creating a new jQuery object, with all of jQuery’s methods inherited.

The idea of a plugin is to do something with a collection of elements. You could consider each method that comes with the jQuery core a plugin, like.fadeOut() or .addClass().

You can make your own plugins and use them privately in your code or you can release them into the wild. There are thousands of jQuery plugins available online. The barrier to creating a plugin of your own is so low that you’ll want to do it straight away !

简单的来理解：从本质上说他其实就是我们塞进jQuery命名空间中一个庞大的函数。通过使用别人或者自己开发好的插件，我们可以写更少的代码来实现一个想要的功能，极大的提高我们的开发效率。

为什么用插件？（一些网友们的看法，仅供参考）

(1）结构清晰、易于理解。各个插件之间是相互独立的，所以结构非常清晰也更容易理解。
(2）易修改、可维护性强。由于插件与宿主程序之间通过接口联系，就像硬件插卡一样，可以被随时删除，插入和修改，所以结构很灵活，容易修改，方便软件的升级和维护。
(3）可移植性强、重用力度大。因为插件本身就是由一系列小的功能结构组成，而且通过接口向外部提供自己的服务，所以复用力度更大，移植也更加方便。
(4）结构容易调整。系统功能的增加或减少，只需相应的增删插件，而不影响整个体系结构，因此能方便的实现结构调整。
(5）插件之间耦合度较低。由于插件通过与宿主程序通信来实现插件与插件，插件与宿主程序间的通信，所以插件之间的耦合度更低。
(6）可以在软件开发的过程中修改应用程序。由于采用了插件的结构，可以在软件的开发过程中随时修改插件，也可以在应用程序发行之后，通过补丁包的形式增删插件，通过这种形式达到修改应用程序的目的。
(7）灵活多变的软件开发方式。可以根据资源的实际情况来调整开发的方式，资源充足可以开发所有的插件，资源不充足可以选择开发部分插件，也可以请第三方的厂商开发，用户也可以根据自己的需要进行开发。

怎么写自己的插件？

一般说来，对于JQuery的插件开发我们有三种模式。

1、通过$.extend()来扩展jQuery

代码示例：

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'default') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('Bill'); //带参调用

以上的代码，通过 $.extend()向jQuery添加了一个sayHello函数，然后通过$ 直接调用。到此，可以说是完成了一个简单的JQuery插件的添加。
评价：

优点：
a、开发和使用非常简单
b、定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。
缺点：
a、无法利用jQuery强大的选择器。

2、通过$.fn 向jQuery添加新的方法:
基本语法示例：

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

demo：《改变连接样式的JQuery插件》
HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src = "JQuery.pluginTest.js"></script>
</head>
<body>
    <ul>

    <li>
        <a href="http://blog.csdn.net/t131452n">我的csdn博客</a>
    </li>
    <li>
        <a href="http://m15350711093.blog.163.com/">我的网易博客</a>
    </li>
</ul>
<p>这是p标签不是a标签，我不会受影响</p>

<script type="text/javascript">
    $(function(){
        $('a').myPlugin();//选中a标签，并调用插件
    })
</script>
</body>
</html>

Js文件的代码如下

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

评价：

优点：
1、能够方便的使用JQuery强大的选择器
2、支持链式调用，但是需要使用return。
缺点：
1、相对于第一种方法来说，有些复杂
2、要想开发出灵活，功能更加复杂，并且容易维护，具有良好的组织结构的插件需要比较深厚的code功力。

3、通过$.widget()应用jQuery UI的部件工厂方式创建。（这里不做具体说明了。。这种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心。有兴趣的童鞋可以自己尝试一下）

怎么用别人的插件？

详情见下一篇博客——《JQuery——插件的开发和使用（二）之qTip2 插件的使用》

小结：

我们要学会站在巨人的肩膀上，那么首先要做的一件事情是：解决就怕不知道的问题。意思是说：你要知道有那么个东西，至于具体怎么做，到了用的时候再去找具体实现的办法就行了。对于JQuery插件的使用和编写，对于如此优秀的咱们来说，怎么能够拒绝呢？！

独孤文彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
JQuery——插件的开发和使用（一）

什么是JQuery插件？官网的介绍：A jQuery plugin is simply a new method that we use to extend jQuery’s prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you
复制链接

扫一扫

专栏目录