一看就会的jQuery插件实现方法-千锋教育

一看就会的jQuery插件实现方法

发布时间:2022-06-06 13:55:00

发布人:wjy

插件是对具体业务逻辑的一个针对性封装，在代码层面，就是一个函数或者方法，按需调用。jQuery里提供了两种两种类型的插件实现方法。一个是扩展jQuery类方法，一个是扩展jQuery实例方法。

## jQuery类方法的扩展(jQuery.extend())

类方法是就jQuery自身的方法，如果foo是jQuery自身方法，就可以这样调用$.foo()；实现起来也超级简单的，就跟平常给一个对象添加方法一样：

```js
jQuery.foo = function(){
console.log("我是jQuery类方法foo");
}
jQuery.foo();
```

在jQuery里，专门提供了用于扩展类方法的写法jQuery.extend()，可以一次扩展多个方法，用法如下：

```js
$.extend({
fn1: function () {},
fn2: function () {},
});
$.fn1();
$.fn2();
$.fn3(); //报错
```

## jQuery实例方法的扩展(jQuery.fn.extend())

实例方法就是jQuery实例对象访问的方法，我们知道，按照面向对象对象设计思想，实例访问的方法通常是放到原型对象prototype上的。jQuery提供的用于扩展实例方法的写法是$.fn.extend()，这就意味着有这样一个等式关系成立:

```js
jQuery.prototype === $.fn //true
```

所以我们只需把扩展的方法写到$.fn.extend()的小括号里即可：

```js
$.fn.extend({
fn1:function(){},
fn2:function(){}
})
//jquery实例对象$("div")访问情况
$("div").fn1();
$("div").fn2();
$("div").fn3(); //报错
```

对jQuery实例方法的扩展，有一个需要我们注意的地方，就是参数。大家知道，参数的设计分为三种情况，那就是不带参数，必传参数，可选参数。接下来我们以一个高亮显示的例子给大家演示下。

```text

<div>高亮显示</div>
```

不带参数

```js
$.fn.extend({
    highLight() {
        //让实例对象的背景颜色和文字颜色发生改变
        //highLight是一个原型方法，this表示的是实例
        this.css({ "background-color": "yellow", color: "red" });
        return this;//形成链式调用
    },
});
$("div").highLight().width("500px");//黄底红字宽500
```

必传参数

```js
$.fn.extend({
    highLight(bgColor, color) {
        this.css({ "background-color": bgColor, color });
        return this;
    },
});
$("div").highLight("blue", "white").width("500px");//蓝底白字宽500
```

可选参数，意思就是不传就用默认的，传参就用自定义的，

```js
//多个参数逐一列出
$.fn.extend({
    highLight(bgColor = "yellow", color = "red") {
        this.css({ "background-color": bgColor, color });
        return this;
    },
});
$("div").highLight(); //黄底红字
$("div").highLight("blue"); //蓝底红字
$("div").highLight("blue", "white"); //蓝底白字
//一个参数对象
$.fn.extend({
    highLight(opts) {
        let defaults = { bgColor: "yellow", color: "red" }; //默认值
        //取到实际的值 options
        let options = $.extend({}, defaults, opts);//将一个或多个源对象复制给目标对象
        this.css({
            "background-color": options.bgColor,
            color: options.color,
        });
        return this;
    },
});
$("div").highLight();//黄底红字
$("div").highLight({ bgColor: "blue"});//蓝底红字
$("div").highLight({ bgColor: "blue", color: "white" });//蓝底白字
```