jQuery 插件机制

雨点打透心脏的1/2处 2022-05-14 13:26 225阅读 0赞

jQuery有着非常丰富的插件库，插件使用起来，非常方便，通过简单的调用就能轻松的实现相对繁琐的功能。其实在这背后凝聚者插件开发者大量的心血，那么jQuery插件是如何编写的呢，下面让我们来一探究竟。

jQuery的插件分为类级别插件和对象级别插件，类级别插件扩展方法：**jQuery.extend()**，对你级别插件扩展方法：**jQuery.fn.extend()**。请看下面的代码分别演示这两种插件的写法及调用方式。

<div id="div1">WEB前端梦之蓝</div>

插件功能：元素点击后将当前元素字体颜色设置为红色

/* 类级别插件封装 */
    $.extend({
        helang:function (el) {
            el.click(function () {
                $(this).css("color","#ff0000");
            });
        }
    });
    /* 类级别插件调用 */
    $.helang($("#div1"));

插件功能：元素点击后将当前元素背景颜色设置为黄色

/* 对象级别插件封装 */
    $.fn.extend({
       helang:function () {
           $(this).click(function () {
               $(this).css("background-color","#ffff00");
           });
       }
    });
    /*对象级别插件调用 */
    $("#div1").helang();

一年前我刚学习jQuery插件时，觉得无从下手。现在想想感觉一是当时买错了书，二是当时的基本功还太弱。所以在写插件之前要有扎实的代码功底，掌握面向对象编程技巧。上面代码示例的只是演示如何去编写和调用插件，更多的还需要自己去实现。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/57b0b38637f247a697c941569e709ae5.png