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
// of what is stored will be instances
$.waiting.lookup = {
i: 0
};
// store the new instance.. $t=$(this)
$.waiting.lookup[++$.waiting.lookup.i] = new $.waiting($t, o);
$t.data('waiting', $.waiting.lookup.i);
// retrieve the instance
var inst = $.waiting.lookup[$(this).data('waiting')];
最後附上,JQ外掛的編寫模板,寫外掛的時候就不用考慮程式碼組織結構了。
/**
* Created by hugohua on 14-4-1.
* jQuery 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) {
//將dom jquery物件賦值給外掛,方便後續呼叫
this.$element = $(element);
//將外掛的預設引數及使用者定義的引數合併到一個新的obj裡
this.settings = $.extend({}, $.fn.plugin.defaults,options);
//如果將引數設定在dom的自定義屬性裡,也可以這樣寫
this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options);
//初始化呼叫一下
this.init();
}
/**
* 寫法一
* 外掛的公共方法,相當於介面函式,用於給外部呼叫
*/
Plugin.prototype.doSomething = function () {
/**
* 方法內容
*/
};
/**
* 寫法二
* 將外掛所有函式放在prototype的大物件裡
* @type {{}}
*/
Plugin.prototype = {
init:function(){
console.log('init');
},
doSomething2:function(){
}
};
return Plugin;
})();
/**
* 外掛的私有方法
*/
privateMethod = function () {
};
/**
* 這裡是將Plugin物件 轉為jq外掛的形式進行呼叫
* 定義一個外掛 plugin
*/
$.fn.plugin = function (options) {
return this.each(function () {
var $me = $(this),
instance = $me.data('plugin');
if(!instance){
//將例項化後的外掛快取在dom結構裡(記憶體裡)
$me.data('plugin', new Plugin(this, options));
}
/**
* 優雅處: 如果外掛的引數是一個字串,則 呼叫 外掛的 字串方法。
* 如 $('#id').plugin('doSomething') 則實際呼叫的是 $('#id).plugin.doSomething();
* doSomething是剛才定義的介面。
* 這種方法 在 juqery ui 的外掛裡 很常見。
*/
if ($.type(options) === 'string') instance[options]();
});
};
/**
* 外掛的預設值
*/
$.fn.plugin.defaults = {
property1: 'value',
property2: 'value'
};
/**
* 優雅處: 通過data-xxx 的方式 例項化外掛。
* 這樣的話 在頁面上就不需要顯示呼叫了。
* 可以檢視bootstrap 裡面的JS外掛寫法
*/
$(function () {
return new Plugin($('[data-plugin]'));
});
})(JQuery);
/**
* 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)關注“前端那些事兒”,帶你瞭解最新的前端技術。