總結(jié)jQuery插件開發(fā)中的一些要點(diǎn)
基礎(chǔ)
1、jQuery插件開發(fā)主要使用如下兩個(gè)方法：
1.1、添加靜態(tài)方法
jQuery.extend(object);
為擴(kuò)展jQuery本身，為類添加新的方法，可以理解文添加靜態(tài)方法。
$.extend({
addMethod : function(a, b){return a + b;} // $.addMethod(1, 2); //return 3
});
1.2、添加成員方法
jQuery.fn.extend(object); jQuery.fn = jQuery.prototype
給jQuery對象添加方法，對jQuery.prototype進(jìn)行擴(kuò)展，為jQuery類添加成員方法：
$.fn.extend({
getInputText:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#username").getInputText();
2、一個(gè)通用的框架：
以下是一個(gè)通用的框架：
(function($){
$.fn.yourPluginName = function(options){
//各種屬性和參數(shù)
var options = $.extend(defaults, options);
this.each(function(){
//插件的實(shí)現(xiàn)代碼
});
};
})(jQuery);
關(guān)于
$.extend(defaults, options);
就是通過合并defaults和options來擴(kuò)展defaults，實(shí)現(xiàn)插件默認(rèn)參數(shù)的功能。
實(shí)踐
1、聲明插件名稱：
添加一個(gè)函數(shù)到j(luò)Query.fn（jQuery.prototype）對象，該函數(shù)的名稱就是你的插件名稱：
jQuery.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
在命名不與jQuery其他函數(shù)沖突的情況，可以使用閉包的方式使用$符號：
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );
2、插件中的上下文：
jQuery接收一個(gè)回調(diào)，該回調(diào)本身就指向了dom，直接使用this就相當(dāng)于我們平時(shí)的$(this)的情況：
(function( $ ){
$.fn.myPlugin = function() {
// there's no need to do $(this) because
// "this" is already a jquery object
// $(this) would be the same as $($('#element'));
this.fadeIn('normal', function(){
// the this keyword is a DOM element
});
};
})( jQuery );
$('#element').myPlugin();
下面是一個(gè)簡單的jQuery插件，實(shí)現(xiàn)獲取所有div的最大高度：
(function( $ ){
$.fn.maxHeight = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max;
};
})( jQuery );
var tallest = $('div').maxHeight(); // Returns the height of the tallest div
3、維護(hù)鏈接性：
前面的示例返回一個(gè)整數(shù)值最高的div，但是通常的意圖僅在某種程度上是僅修改插件的元素集合,并將它們傳遞到下一個(gè)鏈中的方法。這樣的jQuery的設(shè)計(jì)優(yōu)雅的地方。所以保持鏈接性放到一個(gè)插件,您必須確保您的插件返回這個(gè)關(guān)鍵字。
(function( $ ){
$.fn.lockDimensions = function( type ) {
return this.each(function() {
var $this = $(this);
if ( !type || type == 'width' ) {
$this.width( $this.width() );
}
if ( !type || type == 'height' ) {
$this.height( $this.height() );
}
});
};
})( jQuery );
$('div').lockDimensions('width').css('color', 'red');
因?yàn)椴寮祷豻his關(guān)鍵字的范圍,它維護(hù)鏈接性，jQuery可以繼續(xù)利用jQuery方法，如. css。所以，如果你的插件不返回一個(gè)內(nèi)在價(jià)值,你應(yīng)該總是返回this。
4、參數(shù)的傳遞，Defaults和Options：
(function( $ ){
$.fn.tooltip = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);
return this.each(function() {
// Tooltip plugin code here
});
};
})( jQuery );
$('div').tooltip({
'location' : 'left'
});
通過$.extend合并默認(rèn)參數(shù)和調(diào)用者傳入的參數(shù)。
5、命名空間：
正確的命名空間在插件開發(fā)中是一個(gè)非常重要的部分。正確的命名空間，可以確保你的插件將有一個(gè)很低的幾率在同一個(gè)頁面上被他插件或代碼覆蓋。
在任何情況下都不應(yīng)該在一個(gè)插件的jQuery.fn對象中聲稱多個(gè)名稱空間。
(function( $ ){
$.fn.tooltip = function( options ) {
// THIS
};
$.fn.tooltipShow = function( ) {
// IS
};
$.fn.tooltipHide = function( ) {
// BAD
};
$.fn.tooltipUpdate = function( content ) {
// !!!
};
})( jQuery );
你應(yīng)該收集所有的方法到一個(gè)對象化字面，并且通過方法的字面值進(jìn)行調(diào)用：
(function( $ ){
var methods = {
init : function( options ) {
// THIS
},
show : function( ) {
// IS
},
hide : function( ) {
// GOOD
},
update : function( content ) {
// !!!
}
};
$.fn.tooltip = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
// calls the init method
$('div').tooltip();
// calls the init method
$('div').tooltip({
foo : 'bar'
});
// calls the hide method
$('div').tooltip('hide');
// calls the update method
$('div').tooltip('update', 'This is the new tooltip content!');
這種類型的方法封裝和體系結(jié)構(gòu)在jQuery插件社區(qū)中是一個(gè)標(biāo)準(zhǔn)，它適用于無數(shù)的插件,包括jQueryUI插件和小部件。
6、Events：
Bind方法允許通過命名空間的方式綁定事件，如果你的插件綁定了事件，可以通過命名空間的方式，在解除綁定事件時(shí)，你也可以這樣做，來防止影響到其他的事件。可以通過“.<namespace>” 的方式來設(shè)置綁定事件的命名空間。
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy : function( ) {
return this.each(function(){
$(window).unbind('.tooltip');
})
},
reposition : function( ) {
// ...
},
show : function( ) {
// ...
},
hide : function( ) {
// ...
},
update : function( content ) {
// ...
}
};
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
$('#fun').tooltip();
// Some time later...
$('#fun').tooltip('destroy');
7、Data：
關(guān)于data方法可以參考官方的文檔：http://docs.jquery.com/Data，既是在頁面的元素中綁定存儲數(shù)據(jù)。
這里通過編寫插件，實(shí)現(xiàn)在頁面中的每個(gè)元素都綁定一些當(dāng)前的狀態(tài)或者內(nèi)容。
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});
// If the plugin hasn't been initialized yet
if ( ! data ) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target : $this,
tooltip : tooltip
});
}
});
},
destroy : function( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition : function( ) { // ... },
show : function( ) { // ... },
hide : function( ) { // ... },
update : function( content ) { // ...}
};
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 跟我一起學(xué)寫jQuery插件開發(fā)方法（附完整實(shí)例及下載）
- jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- 自己動(dòng)手開發(fā)jQuery插件教程
- jquery插件開發(fā)方法(初學(xué)者)
- 跟我一起學(xué)JQuery插件開發(fā)
- jQuery插件開發(fā)詳細(xì)教程
- jQuery 插件開發(fā) 其實(shí)很簡單
- 為開發(fā)者準(zhǔn)備的10款最好的jQuery日歷插件
- 最佳6款用于移動(dòng)網(wǎng)站開發(fā)的jQuery 圖片滑塊插件小結(jié)
相關(guān)文章
這篇文章主要介紹了10分鐘學(xué)會寫Jquery插件,通過一個(gè)實(shí)例分兩步完成一個(gè)簡單的插件,非常實(shí)用,需要的朋友可以參考下2014-09-09
jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-06-06
jQuery使用post方法提交數(shù)據(jù)實(shí)例
這篇文章主要介紹了jQuery使用post方法提交數(shù)據(jù),實(shí)例分析了jQuery中post方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法
這篇文章主要介紹了jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法，需要的朋友可以參考下2014-07-07
jQuery實(shí)現(xiàn)新消息閃爍標(biāo)題提示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)新消息閃爍標(biāo)題提示的方法,實(shí)例分析了jQuery操作樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
自定義jQuery選項(xiàng)卡插件實(shí)例，需要的朋友可以參考一下2013-03-03
jquery動(dòng)態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動(dòng)態(tài)加載js代碼，但不能加載css，后來自己寫了一個(gè)可加載js與css的程序2014-10-10
本身不熟悉js略懂JQuery，閑著沒事幫朋友公司一個(gè)程序小伙修改了個(gè)消息提示框，把修改后的代碼和代價(jià)分享一下2011-07-07
JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)
下面小編就為大家?guī)硪黄狫Query 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
jQuery EasyUI API 中文文檔 - Panel面板
jQuery EasyUI API 中文文檔 - Panel面板，使用jQuery EasyUI的朋友可以參考下。2011-09-09