一看就會的jQuery外掛實現方法

       外掛是對具體業務邏輯的一個針對性封裝，在程式碼層面，就是一個函式或者方法，按需呼叫。jQuery裡提供了兩種兩種型別的外掛實現方法。一個是擴充套件jQuery類方法，一個是擴充套件jQuery例項方法。下面 班給大家分享：一看就會的jQuery外掛實現方法：

 

jQuery類方法的擴充套件(jQuery.extend())
類方法是就jQuery自身的方法，如果foo是jQuery自身方法，就可以這樣呼叫$.foo()；實現起來也超級簡單的，就跟平常給一個物件新增方法一樣：

jQuery.foo = function(){
console.log("我是jQuery類方法foo");
}
jQuery.foo();
在jQuery裡，專門提供了用於擴充套件類方法的寫法jQuery.extend()，可以一次擴充套件多個方法，用法如下：

$.extend({
fn1: function () {},
fn2: function () {},
});
$.fn1();
$.fn2();
$.fn3(); //報錯
jQuery例項方法的擴充套件(jQuery.fn.extend())
例項方法就是jQuery例項物件訪問的方法，我們知道，按照物件導向物件設計思想，例項訪問的方法通常是放到原型物件prototype上的。jQuery提供的用於擴充套件例項方法的寫法是$.fn.extend()，這就意味著有這樣一個等式關係成立:

jQuery.prototype === $.fn //true
所以我們只需把擴充套件的方法寫到$.fn.extend()的小括號裡即可：

$.fn.extend({
fn1:function(){},
fn2:function(){}
})
//jquery例項物件$("div")訪問情況
$("div").fn1();
$("div").fn2();
$("div").fn3(); //報錯
對jQuery例項方法的擴充套件，有一個需要我們注意的地方，就是引數。大家知道，引數的設計分為三種情況，那就是不帶引數，必傳引數，可選引數。接下來我們以一個高亮顯示的例子給大家演示下。

<!-- html結構 -->
<div>高亮顯示</div>
不帶引數

$.fn.extend({
highLight() {
//讓例項物件的背景顏色和文字顏色發生改變
//highLight是一個原型方法，this表示的是例項
this.css({ "background-color": "yellow", color: "red" });
return this;//形成鏈式呼叫
},
});
$("div").highLight().width("500px");//黃底紅字寬500
必傳引數

$.fn.extend({
highLight(bgColor, color) {
this.css({ "background-color": bgColor, color });
return this;
},
});
$("div").highLight("blue", "white").width("500px");//藍底白字寬500
可選引數，意思就是不傳就用預設的，傳參就用自定義的，

//多個引數逐一列出
$.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" });//藍底白字
       怎麼樣，是不是超級簡單！如果想要更多學習資料歡迎來長沙千鋒官網諮詢領取。