擴(kuò)展jquery的時(shí)候。最核心的方法是以下兩種：
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到北海網(wǎng)站設(shè)計(jì)與北海網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋北海地區(qū)。
$.extend(object) 可以理解為jquery添加一個(gè)靜態(tài)方法
$.fn.extend(object) 可以理解為jquery實(shí)例添加一個(gè)方法
$.extend(object)
例子：
/* $.extend 定義與調(diào)用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("執(zhí)行方法一"); } });//定義
$.fun1();//調(diào)用
$.fn.extentd(object)
/* $.fn.extend 定義與調(diào)用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("執(zhí)行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("執(zhí)行方法三"); }
$(this).fun3();
定義jquery插件的基本結(jié)構(gòu)
1． 定義作用域：
為插件定義一個(gè)私有作用域。外界代碼不能直接訪問(wèn)插件內(nèi)部。插件內(nèi)部代碼不受外界干擾，也不會(huì)污染到全局變量。
//step01 定義JQuery的作用域
(function ($) {
})(jQuery);
2. 為插件添加擴(kuò)展方法：
復(fù)制代碼
//step01 定義JQuery的作用域
(function ($) {
//step02 插件的擴(kuò)展方法名稱
$.fn.easySlider = function (options) {
}
})(jQuery);
復(fù)制代碼
3. 設(shè)置默認(rèn)值：
//step01 定義JQuery的作用域
(function ($) {
//step03-a 插件的默認(rèn)值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的擴(kuò)展方法名稱
$.fn.easySlider = function (options) {
//step03-b 合并用戶自定義屬性，默認(rèn)屬性
var options = $.extend(defaults, options);
}
})(jQuery);
其中：var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，并把值賦給了options。
在插件環(huán)境中，就表示用戶設(shè)置的值，覆蓋了插件的默認(rèn)值；如果用戶沒(méi)有設(shè)置默認(rèn)值的屬性，還是保留插件的默認(rèn)值。
4. 支持jquery選擇器：
//step01 定義JQuery的作用域
(function ($) {
//step03-a 插件的默認(rèn)值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的擴(kuò)展方法名稱
$.fn.easySlider = function (options) {
//step03-b 合并用戶自定義屬性，默認(rèn)屬性
var options = $.extend(defaults, options);
//step4 支持JQuery選擇器
this.each(function () {
});
}
})(jQuery);
5 ．支持JQuery的鏈接調(diào)用：
為了能達(dá)到鏈接調(diào)用的效果必須要把循環(huán)的每個(gè)元素return
//step01 定義JQuery的作用域
(function ($) {
//step03-a 插件的默認(rèn)值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的擴(kuò)展方法名稱
$.fn.easySlider = function (options) {
//step03-b 合并用戶自定義屬性，默認(rèn)屬性
var options = $.extend(defaults, options);
//step4 支持JQuery選擇器
//step5 支持鏈?zhǔn)秸{(diào)用
return this.each(function () {
});
}
})(jQuery);
6. 插件里的方法：
在插件里定義的方法，外界不能直接調(diào)用，我在插件里定義的方法也沒(méi)有污染外界環(huán)境。
復(fù)制代碼
//step01 定義JQuery的作用域
(function ($) {
//step03-a 插件的默認(rèn)值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定義方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的擴(kuò)展方法名稱
$.fn.easySlider = function (options) {
//step03-b 合并用戶自定義屬性，默認(rèn)屬性
var options = $.extend(defaults, options);
//step4 支持JQuery選擇器
//step5 支持鏈?zhǔn)秸{(diào)用
return this.each(function () {
//step06-b 在插件里定義方法
showLink(this);
});
}
})(jQuery);
現(xiàn)在網(wǎng)上關(guān)于js和jquery封裝的插件很多，我剛剛接觸前端的時(shí)候，就很敬佩那些自己寫(xiě)插件的大牛們！因?yàn)槭撬麄兘o網(wǎng)站開(kāi)發(fā)更多的便利，很多網(wǎng)頁(yè)效果，網(wǎng)上很多現(xiàn)成的插件！那么這些插件是如何寫(xiě)的呢看首先是有扎實(shí)的js和jquery技術(shù)基礎(chǔ)，其次還有一些寫(xiě)插件的方法和技巧。關(guān)于js和jquery的技術(shù)基礎(chǔ)，那是一個(gè)慢慢積累的過(guò)程。但是關(guān)于寫(xiě)插件的一些注意和技巧，本文可以略微介紹一下，方便以后寫(xiě)插件的時(shí)候用得到。
jquery插件開(kāi)發(fā)模式
jquery插件一般有三種開(kāi)發(fā)方式：
通過(guò)$.extend()來(lái)擴(kuò)展jQuery
通過(guò)$.fn 向jQuery添加新的方法
通過(guò)$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
第一種$.extend()相對(duì)簡(jiǎn)單，一般很少能夠獨(dú)立開(kāi)發(fā)復(fù)雜插件，第三種是一種高級(jí)的開(kāi)發(fā)模式，本文也不做介紹。第二種則是一般插件開(kāi)發(fā)用到的方式，本文著重講講第二種。
編寫(xiě)插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開(kāi)發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫(xiě)jQuery插件
類型
jQuery的插件主要分為3種類型
1、封裝對(duì)象方法
這種插件是將對(duì)象方法封裝起來(lái)，用于對(duì)通過(guò)選擇器獲取的jQuery對(duì)象進(jìn)行操作，是最常見(jiàn)的一種插件。此類插件可以發(fā)揮出jQuery選擇器的強(qiáng)大優(yōu)勢(shì)，有相當(dāng)一部分的jQuery的方法，都是在jQuery腳本庫(kù)內(nèi)部通過(guò)這種形式“插”在內(nèi)核上的，例如：parent()方法、appendTo()方法等。這些方法在現(xiàn)在來(lái)看都是jQuery本身自帶的方法了。平時(shí)，我們是可以直接拿來(lái)就用的，只需引入jQuery庫(kù)就行
2、封裝全局函數(shù)
可以將獨(dú)立的函數(shù)加到j(luò)Query命名空間下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的
3、選擇器插件
雖然jQuery的選擇器十分強(qiáng)大，但是在少數(shù)情況下，還是會(huì)需要用到選擇器插件來(lái)擴(kuò)充一些自己喜歡的選擇器
要點(diǎn)
1、jQuery插件的文件名推薦命名為jQuery.[插件名].js，以免和其他JS庫(kù)插件混淆
2、所有的對(duì)象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上
3、在插件內(nèi)部的this指向的是當(dāng)前通過(guò)選擇器獲取的jQuery對(duì)象，而不像一般方法那樣，如click，內(nèi)部的this指向的是DOM元素
4、可以通過(guò)this.each來(lái)遍歷所有的元素
5、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾。否則壓縮的時(shí)候可能出現(xiàn)問(wèn)題。為了穩(wěn)妥些，甚至可以在插件頭部先加上一個(gè)分號(hào)，以免他人不規(guī)范的代碼影響自身的插件代碼
6、插件應(yīng)該返回一個(gè)jQuery對(duì)象，以保證插件的可鏈?zhǔn)讲僮?/p>
7、避免在插件內(nèi)部使用$作為jQuery對(duì)象的別名，而應(yīng)使用完整的jQuery來(lái)表示，避免沖突。當(dāng)然，也可以利用閉包來(lái)回避這種問(wèn)題，使插件內(nèi)部繼續(xù)使用$作為jQuery的別名
閉包
利用閉包的特性，即可以避免內(nèi)部臨時(shí)變量影響全局空間，又可以在插件內(nèi)容繼續(xù)使用$作為jQuery的別名。常見(jiàn)的jQuery插件都是以下這種形式的:
(function(){
/*這里放置代碼*/
})();
首先定義一個(gè)匿名函數(shù)function(){/*這里放置代碼*/}，然后用括號(hào)括起來(lái)，變成(function(){/*這里放置代碼*/})這種形式，最后通過(guò)()這個(gè)運(yùn)算符來(lái)執(zhí)行?？梢詡鬟f參數(shù)進(jìn)行，以供內(nèi)部函數(shù)使用
//為了更好的兼容性，開(kāi)始前有個(gè)分號(hào)
;(function($){??? //此處將$作為匿名函數(shù)的形參
/*這里放置代碼，可以使用$作為jQuery的縮寫(xiě)別名*/
})(jQuery);????? //這里就將jQuery作為實(shí)參傳遞給匿名函數(shù)了
上面的代碼是一種常見(jiàn)的jQuery插件的結(jié)構(gòu)
插件機(jī)制
jQuery提供了兩個(gè)用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封裝對(duì)象方法的插件，jQuery.extend()方法用于拓展封裝全局函數(shù)的插件和選擇器插件。這兩個(gè)方法都接受一個(gè)參數(shù)，類型為Object。Object對(duì)象的"名/值對(duì)"分別代表"函數(shù)或方法名/函數(shù)主體"
【jQuery.fn.extend()】
jQuery.fn.extend()方法用于將一個(gè)對(duì)象的內(nèi)容合并到j(luò)Query的原型，以提供新的jQuery實(shí)例方法
labelinput type="checkbox" name="foo" Foo/label
labelinput type="checkbox" name="bar" Bar/label
button id="btn1"全選/button
button id="btn2"全不選/button
script
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$('#btn1').click(function(){
$( "input[type='checkbox']" ).check();
});
$('#btn2').click(function(){
$( "input[type='checkbox']" ).uncheck();
});
/script
【jQuery.extend()】
jQuery.extend()方法用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，然后返回被擴(kuò)展的對(duì)象
jQuery.extend( target [, object1 ] [, objectN ] )
例如，合并settings對(duì)象和options對(duì)象，修改并返回settings對(duì)象
var settings = {validate:false,limit:5,name:"foo"};
var options = {validate:true,name:"bar"};
var newOptions = jQuery.extend(settings,options);
console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}
jQuery.extend()方法經(jīng)常被用于設(shè)置插件方法的一系列默認(rèn)參數(shù)
function foo(options){
options=jQuery.extend({
name:"bar",
length:5,
dataType:"xml"
},options);
如果用戶調(diào)用foo()方法的時(shí)候，在傳遞的參數(shù)options對(duì)象設(shè)置了相應(yīng)的值，那么就使用設(shè)置的值，否則使用默認(rèn)值
通過(guò)使用jQuery.extend()方法，可以很方便地用傳入的參數(shù)來(lái)覆蓋默認(rèn)值。此時(shí)，對(duì)方法的調(diào)用依舊保持一致，只不過(guò)要傳入的是一個(gè)映射而不是一個(gè)參數(shù)列表。這種機(jī)制比傳統(tǒng)的每個(gè)參數(shù)都去檢測(cè)的方式不僅靈活而且更加簡(jiǎn)潔。此外使用命名參數(shù)意味著再添加新選項(xiàng)也不會(huì)影響過(guò)去編寫(xiě)的代碼，從而使開(kāi)發(fā)者使用起來(lái)更加直觀明了
so sasy!
1.$.fn.插件名=function(){}
2.$.插件名=function(){}
不知道什么意思或者調(diào)用，再說(shuō)吧！
jQuery 如何寫(xiě)插件 -
jQuery插件的開(kāi)發(fā)包括兩種：
一種是類級(jí)別的插件開(kāi)發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，另一種是對(duì)象級(jí)別的插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法。下面就兩種函數(shù)的開(kāi)發(fā)做詳細(xì)的說(shuō)明。
1、類級(jí)別的插件開(kāi)發(fā)
類級(jí)別的插件開(kāi)發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開(kāi)發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：
1.1
添加一個(gè)新的全局函數(shù)
添加一個(gè)全局函數(shù)，我們只需如下定義：
jQuery.foo =
function() {
alert('This is a test. This is only a
test.');
};
1.2
增加多個(gè)全局函數(shù)
添加多個(gè)全局函數(shù)，可采用如下定義：
Java代碼 收藏代碼
jQuery.foo = function() {
alert('This is a test. This is
only a test.');
};
jQuery.bar =
function(param) {
alert('This function takes a
parameter, which is "' + param + '".');
};
調(diào)用時(shí)和一個(gè)函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3
使用jQuery.extend(object);
jQuery.extend({
foo:
function() {
alert('This is a test. This is
only a test.');
},
bar: function(param)
{
alert('This function takes a
parameter, which is "' + param +'".');
}
});
1.4
使用命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他jQuery插件沖突，因此我們習(xí)慣將一些方法封裝到另一個(gè)自定義的命名空間。
jQuery.myPlugin =
{
foo:function()
{
alert('This is a test. This is only a
test.');
},
bar:function(param)
{
alert('This function takes a parameter, which is "' + param +
'".');
}
};
采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時(shí)采用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');
通過(guò)這個(gè)技巧（使用獨(dú)立的插件名），我們可以避免命名空間內(nèi)函數(shù)的沖突。
2、對(duì)象級(jí)別的插件開(kāi)發(fā)
對(duì)象級(jí)別的插件開(kāi)發(fā)需要如下的兩種形式：、
形式1：
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes
here.
}
})
})(jQuery);
形式2：
(function($)
{
$.fn.pluginName = function()
{
// Our plugin implementation code goes here.
};
})(jQuery);
上面定義了一個(gè)jQuery函數(shù),形參是$，函數(shù)定義完成之后,把jQuery這個(gè)實(shí)參傳遞進(jìn)去.立即調(diào)用執(zhí)行。這樣的好處是,我們?cè)趯?xiě)jQuery插件時(shí),也可以使用$這個(gè)別名,而不會(huì)與prototype引起沖突.
2.1
在JQuery名稱空間下申明一個(gè)名字
這是一個(gè)單一插件的腳本。如果你的腳本中包含多個(gè)插件，或者互逆的插件（例如：
$.fn.doSomething() 和
$.fn.undoSomething()），那么你需要聲明多個(gè)函數(shù)名字。但是，通常當(dāng)我們編寫(xiě)一個(gè)插件時(shí)，力求僅使用一個(gè)名字來(lái)包含它的所有內(nèi)容。我們的示例插件命名為“highlight“
$.fn.hilight
= function() {
// Our plugin implementation
code goes
here.
};
我們的插件通過(guò)這樣被調(diào)用：
$('#myDiv').hilight();
但是如果我們需要分解我們的實(shí)現(xiàn)代碼為多個(gè)函數(shù)該怎么辦？有很多原因：設(shè)計(jì)上的需要；這樣做更容易或更易讀的實(shí)現(xiàn)；而且這樣更符合面向?qū)ο?。這真是一個(gè)麻煩事，把功能實(shí)現(xiàn)分解成多個(gè)函數(shù)而不增加多余的命名空間。出于認(rèn)識(shí)到和利用函數(shù)是javascript中最基本的類對(duì)象，我們可以這樣做。就像其他對(duì)象一樣，函數(shù)可以被指定為屬性。因此我們已經(jīng)聲明“hilight”為jQuery的屬性對(duì)象，任何其他的屬性或者函數(shù)我們需要暴露出來(lái)的，都可以在"hilight"
函數(shù)中被聲明屬性。稍后繼續(xù)。
2.2
接受options參數(shù)以控制插件的行為
讓我們?yōu)槲覀兊牟寮砑庸δ苤付ㄇ熬吧捅尘吧墓δ?。我們也許會(huì)讓選項(xiàng)像一個(gè)options對(duì)象傳遞給插件函數(shù)。例如：
// plugin definition
$.fn.hilight =
function(options) {
var defaults = {
foreground:
'red',
background:
'yellow'
};
//
Extend our default options with those provided.
var
opts = $.extend(defaults, options);
// Our
plugin implementation code goes here.
};
我們的插件可以這樣被調(diào)用：
$('#myDiv').hilight({
foreground: 'blue'
});
2.3
暴露插件的默認(rèn)設(shè)置
我們應(yīng)該對(duì)上面代碼的一種改進(jìn)是暴露插件的默認(rèn)設(shè)置。這對(duì)于讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來(lái)我們開(kāi)始利用函數(shù)對(duì)象。
//
plugin definition
$.fn.hilight =
function(options) {
// Extend our default options with those
provided.
// Note that the first arg to extend is an
empty object -
// this is to keep from overriding our
"defaults" object.
var opts = $.extend({},
$.fn.hilight.defaults, options);
// Our
plugin implementation code goes here.
};
// plugin
defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
現(xiàn)在使用者可以包含像這樣的一行在他們的腳本里：
//這個(gè)只需要調(diào)用一次，且不一定要在ready塊中調(diào)用
$.fn.hilight.defaults.foreground
=
'blue';
接下來(lái)我們可以像這樣使用插件的方法，結(jié)果它設(shè)置藍(lán)色的前景色：
$('#myDiv').hilight();
如你所見(jiàn)，我們?cè)试S使用者寫(xiě)一行代碼在插件的默認(rèn)前景色。而且使用者仍然在需要的時(shí)候可以有選擇的覆蓋這些新的默認(rèn)值：
//
覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
//
使用一個(gè)新的缺省設(shè)置調(diào)用插件
$('.hilightDiv').hilight();
// ...
//
通過(guò)傳遞配置參數(shù)給插件方法來(lái)覆蓋缺省設(shè)置
$('#green').hilight({
foreground:
'green'
});
重慶分公司
重慶分公司
