插件是對具體業務邏輯的一個針對性封裝，在代碼層面，就是一個函數或者方法，按需調用。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
<!-- html結構 -->
<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" });//藍底白字
```

怎么樣，是不是炒雞簡單~~~

更多關于web培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。