jquery外掛及zepto外掛 寫法異同
阿新 • • 發佈：2019-02-10
jquery外掛及zepto外掛，寫法上有些區別。
區別點：
1、自定義事件的名稱空間
jq的時間名稱空間是用點“.”，而zepto是用冒號“:”
如
//jquery $(this).trigger('cusevent.pluginname'); //zepto $(this).trigger('cusevent:pluginname');
2、data() 方法
jq的data方法非常強大，可以儲存字串、物件、函式等一切js資料
而zepto的data方法則非常簡陋，只能純一下字串。
由於寫外掛時，常用data方法來快取外掛例項化後的內容，所以這裡需要做一下相容修改。
// i is simply a counter, the rest 最後附上，JQ外掛的編寫模板，寫外掛的時候就不用考慮程式碼組織結構了。
/**
* Created by hugohua on 14-4-1.
* jQuery plugin template
*/
/**
* 將外掛封裝在一個閉包裡面，防止外部程式碼汙染 衝突
*/
(function ($) {
/**
* 定義一個外掛 Plugin
*/
var Plugin,
privateMethod; //外掛的私有方法，也可以看做是外掛的工具方法集
/**
* 這裡是外掛的主體部分
* 這裡是一個自執行的單例模式。
* 這裡之所以用一個 Plugin 的單例模式 包含一個 Plugin的類，主要是為了封裝性，更好的劃分程式碼塊
* 同時 也 方便區分私有方法及公共方法
* PS：但有時私有方法為了方便還是寫在了Plugin類裡，這時建議私有方法前加上"_"
*/ /**
* Created by hugohua on 14-4-1.
* zepto plugin template
*/
/**
* 將外掛封裝在一個閉包裡面，防止外部程式碼汙染 衝突
*/
(function ($) {
/**
* 定義一個外掛 Plugin
*/
var Plugin,
privateMethod; //外掛的私有方法，也可以看做是外掛的工具方法集
/**
* 這裡是外掛的主體部分
* 這裡是一個自執行的單例模式。
* 這裡之所以用一個 Plugin 的單例模式 包含一個 Plugin的類，主要是為了封裝性，更好的劃分程式碼塊
* 同時 也 方便區分私有方法及公共方法
* PS：但有時私有方法為了方便還是寫在了Plugin類裡，這時建議私有方法前加上"_"
*/
Plugin = (function () {
/**
* 外掛例項化部分，初始化時呼叫的程式碼可以放這裡
* @param element 傳入jq物件的選擇器，如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
* @param options 外掛的一些引數神馬的
* @constructor
*/
function Plugin(element, options) {
//將外掛的預設引數及使用者定義的引數合併到一個新的obj裡
this.settings = $.extend({}, $.fn.plugin.defaults, options);
//將dom jquery物件賦值給外掛，方便後續呼叫
this.$element = $(element);
//初始化呼叫一下
this.init();
}
/**
* 寫法一
* 外掛的公共方法，相當於介面函式，用於給外部呼叫
*/
Plugin.prototype.doSomething = function () {
/**
* 方法內容
*/
};
/**
* 寫法二
* 將外掛所有函式放在prototype的大物件裡
* @type {{}}
*/
Plugin.prototype = {
init:function(){
},
doSomething2:function(){
}
};
return Plugin;
})();
/**
* 外掛的私有方法
*/
privateMethod = function () {
};
/**
* 這裡是將Plugin物件 轉為jq外掛的形式進行呼叫
* 定義一個外掛 plugin
* zepto的data方法與jq的data方法不同
* 這裡的實現方式可參考文章：http://trentrichardson.com/2013/08/20/creating-zepto-plugins-from-jquery-plugins/
*/
$.fn.plugin = function(options){
return this.each(function () {
var $this = $(this),
instance = $.fn.plugin.lookup[$this.data('plugin')];
if (!instance) {
//zepto的data方法只能儲存字串，所以用此方法解決一下
$.fn.plugin.lookup[++$.fn.plugin.lookup.i] = new Plugin(this,options);
$this.data('plugin', $.fn.plugin.lookup.i);
instance = $.fn.plugin.lookup[$this.data('plugin')];
}
if (typeof options === 'string') instance[options]();
})
};
$.fn.plugin.lookup = {i: 0};
/**
* 外掛的預設值
*/
$.fn.plugin.defaults = {
property1: 'value',
property2: 'value'
};
/**
* 優雅處： 通過data-xxx 的方式 例項化外掛。
* 這樣的話 在頁面上就不需要顯示呼叫了。
* 可以檢視bootstrap 裡面的JS外掛寫法
*/
$(function () {
return new Plugin($('[data-plugin]'));
});
})(JQuery);長按圖片識別圖中二維碼(或搜尋微信公眾號FrontEndStory)關注“前端那些事兒”，帶你瞭解最新的前端技術。
