jQuery外掛封裝方法（二）
阿新 • • 發佈：2020-08-14
轉自：https://www.jianshu.com/p/5196cb659fb6
概述
最近在慕課網上學習奇舞團課程系列--全屏切換效果的視訊課程，在學到如何實現jQuery外掛框架中，學到了封裝jQuery外掛的方法和基本的框架結構，將學習到的知識點整理在本文中，便於以後參考；
如何編寫jQuery框架
閉包
// 立刻執行函式
(function($){
// code
})(jQuery);
引數說明
形參： $
實參: jQuery
閉包的作用
-
避免全域性依賴
-
避免第三方破壞
-
相容jQuery操作符'$'和jQuery；
開發方式
類級別元件開發
即是給jQuery名稱空間下新增新的全域性函式，也稱為靜態方法；
程式碼結構如下
jQuery.pluginName = function() {
// code
};
例如：$.Ajax(), $.extend()就是採用的類級別元件開發；
物件級別元件開發
即是掛在jQuery原型下的方法，這樣通過選擇器獲取的jQuery物件例項也能共享改方法，稱為動態方法；
程式碼結構如下：
$.fn.pluginName = function() {
// code
};
其中：
$.fn === $.prototype;
例如：addClass(),attr()等方法，需要建立例項來呼叫這些方法；
鏈式呼叫
// 例子
$('div').next().addClass()...
$.fn.plugin = function() {
return this.each(function() {
// code
})
}
程式碼說明
return this: 返回當前物件，來維護外掛的鏈式呼叫;
each: 迴圈實現每個元素的訪問；
單例模式
建立物件的例項，存在單例模式；
$.fn.pluginName = function() {
var me = $(this),
instance = me.data('pluginName');
if (!instance) {
me.data("pluginName", (instance = new pluginName()));
}
}
說明：
如果例項存在，則不再重新建立；
利用data方法來存放外掛物件的例項；
jQuery框架基本結構
利用閉包建立一個自執行的函式
(function($) {
// code
})(jQuery);
定義外掛物件
var pluginName = (function() {
// code
// 返回外掛物件
return pluginName ;
})();
在外掛物件的原型鏈上定義使用者配置項
$.fn.pluginName.defaults = {
optionName: value
...
};
建立外掛的例項物件
$.fn.pluginName = function() {
// 實現鏈式呼叫
return this.each(function(options) {
// 快取this物件
var me = this;
var instance = me.data('pluginName');
// 判斷例項是否存在，不存在則建立物件，並將該物件及配置項傳入
if (!instance) {
instance = new pluginName(me, options);
// 存放例項
me.data('pluginName', instance)
}
// 在外部可以通過$(selection).pageSwitch("init")
if ($.type(options) === "String") {
return instance[options]();
}
});
};
給物件新增屬性和方法,及初始化外掛
function pluginName(element, options) {
// 深拷貝，合併物件
this.settings = $.extend(true, $.fn.pluginName.defaults, options || []);
this.element = element;
// 初始化外掛
this.init();
}
在外掛的原型上定義方法，以便例項可以呼叫
pluginName.prototype = { fnName: function() {} };
案例程式碼
(function($) {
// 私有方法
var privateFun = function() {};
// 合併物件等
var pageSwitch = (function() {
function pageSwitch(element, options) {
// 設定為true深拷貝,合併物件
this.settings = $.extend(true, $.fn.pageSwitch.default, options || {});
this.element = element;
// 初始化外掛
this.init()
}
// 在pageSwitch原型上定義方法,讓例項可以呼叫這些方法
pageSwitch.prototype = {
// 功能方法
init: function() {}
};
return pageSwitch;
})();
// 建立物件例項
$.fn.pageSwitch = function(options) {
// 實現鏈式呼叫
return this.each(function() {
var me = $(this),
instance = me.data("pageSwitch");
// 判斷例項是否存在，不存在則建立物件，並將該物件及配置項傳入
if (!instance) {
instance = new pageSwitch(me, options);
// 存放例項
me.data("pageSwitch", instance);
}
// 在外部可以通過$(selection).pageSwitch("init")
if ($.type(options) === "String" || $.type(options) === "string") {
return instance[options]();
}
});
};
// 配置引數
$.fn.pageSwitch.default = {
// 選擇器
selectors: {
// 父層容器
sections: '.sections',
// 頁面容器
section: '.section',
// 分頁容器
page: '.pages',
// 分頁選中時的高亮效果
active: '.active'
},
// 頁面開始的索引值
index: 0,
// 動畫的效果
easing: 'ease',
// 動畫執行的時間
duration: 500,
// 頁面是否迴圈播放
loop: false,
// 是否進行分頁處理
pagination: true,
// 是否觸發鍵盤事件
kerboard: true,
// 全屏方向，橫屏，豎屏
direction: 'vertical',
// 實現滑屏動畫後執行的回撥函式
callback: ""
};
// 在外掛內部初始化，但是這種寫法需要在目標元素上新增data-pageSwitch
$(function() {
$("[data-pageSwitch]").pageSwitch();
})