一看就會的jQuery插件實現(xiàn)方法

來源：千鋒教育

發(fā)布人：wjy

時間： 2022-06-06 13:55:00 1654494900

插件是對具體業(yè)務邏輯的一個針對性封裝，在代碼層面，就是一個函數(shù)或者方法，按需調用。jQuery里提供了兩種兩種類型的插件實現(xiàn)方法。一個是擴展jQuery類方法，一個是擴展jQuery實例方法。

## jQuery類方法的擴展(jQuery.extend())

類方法是就jQuery自身的方法，如果foo是jQuery自身方法，就可以這樣調用$.foo()；實現(xiàn)起來也超級簡單的，就跟平常給一個對象添加方法一樣：

```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實例方法的擴展，有一個需要我們注意的地方，就是參數(shù)。大家知道，參數(shù)的設計分為三種情況，那就是不帶參數(shù)，必傳參數(shù)，可選參數(shù)。接下來我們以一個高亮顯示的例子給大家演示下。

```text

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

不帶參數(shù)

```js
$.fn.extend({
    highLight() {
        //讓實例對象的背景顏色和文字顏色發(fā)生改變
        //highLight是一個原型方法，this表示的是實例
        this.css({ "background-color": "yellow", color: "red" });
        return this;//形成鏈式調用
    },
});
$("div").highLight().width("500px");//黃底紅字寬500
```

必傳參數(shù)

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

可選參數(shù)，意思就是不傳就用默認的，傳參就用自定義的，

```js
//多個參數(shù)逐一列出
$.fn.extend({
    highLight(bgColor = "yellow", color = "red") {
        this.css({ "background-color": bgColor, color });
        return this;
    },
});
$("div").highLight(); //黃底紅字
$("div").highLight("blue"); //藍底紅字
$("div").highLight("blue", "white"); //藍底白字
//一個參數(shù)對象
$.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" });//藍底白字
```