一. jQuery的插件機(jī)制

公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出木蘭免費做網(wǎng)站回饋大家。

為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法
jQuery.extend(object) ,一個參數(shù)的用于擴(kuò)展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的 ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點像 “類名.方法名” 靜態(tài)方法的調(diào)用方式。

jQuery.extend() 擴(kuò)展
//擴(kuò)展jQuery對象本身
jQuery.extend({
"minValue": function (a, b) {
return a < b ? a : b;
},
"maxValue": function (a, b) {
return a > b ? a : b;
}
});
var i = 100; j = 101;
var min_v = $.minValue(i, j);

jQuery.extend()方法重載
jQuery.extend([deep], target, object1, [objectN])

參數(shù)
deep: 可選。如果設(shè)為true，則遞歸合并。
target: 待修改對象。
object1: 待合并到第一個對象的對象。
objectN: 可選。待合并到第一個對象的對象。

示例
合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options)

結(jié)果
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

用一個或多個其他對象來擴(kuò)展一個對象，返回被擴(kuò)展的對象。
如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。
如果第一個參數(shù)設(shè)置為true，則jQuery返回一個深層次的副本，遞歸地復(fù)制找到的任何對象。否則的話，副本會與原對象共享結(jié)構(gòu)。
未定義的屬性將不會被復(fù)制，然而從對象的原型繼承的屬性將會被復(fù)制。
Query.fn.extend(object)擴(kuò)展 jQuery 元素集來提供新的方法（常用來制作插件）。

首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype = {
　init: function( selector, context ) {.....};
};
原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對象的原型方法。我們知道擴(kuò)展原型上的方法，就相當(dāng)于為對象添加“成員方法”，類的“成員方法”要類的對象才能調(diào)用，所以使用jQuery.fn.extend(object)擴(kuò)展的方法，jQuery類的實例可以使用這個“成員函數(shù)”,比如$(‘p’).extend(obj)。
jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開來。
二. 自執(zhí)行的匿名函數(shù)/閉包

1. 什么是自執(zhí)行的匿名函數(shù)?
   它是指形如這樣的函數(shù): (function(){// code})();

2. 疑問 為什么(function() {// code})();可以被執(zhí)行, 而function() {// code}();卻會報錯?
   (1).首先,要清楚兩者的區(qū)別:(function(){// code})是表達(dá)式,function(){// code}是函數(shù)聲明.
   (2).其次, js"預(yù)編譯"的特點: js在"預(yù)編譯"階段, 會解釋函數(shù)聲明, 但卻會忽略表達(dá)式.
   (3).當(dāng)js執(zhí)行到function() {//code}();時, 由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過, js會跳過function(){//code}, 試圖去執(zhí)行();, 故會報錯;
   當(dāng)js執(zhí)行到(function(){// code})();時, 由于(function(){// code})是表達(dá)式, js會去對它求解得到返回值, 由于返回值是一 個函數(shù), 故而遇到();時, 便會被執(zhí)行.

匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。

例如：
var a=1;
(function(){
　　var a=100;
})();
alert(a); //彈出 1
三. 分步封裝JQuery插件

第一步定義一個閉包區(qū)域，防止插件“污染”。
(function($) {} )(window.jQuery);

第二步j(luò)Query.fn.extend(object)擴(kuò)展jquery方法制作插件
(function ($) {
$.fn.plugin=function(options){
//do something
};
})(window.jQuery);

第三步給插件默認(rèn)參數(shù)，實現(xiàn)插件的功能
(function ($) {
$.fn.plugin=function (options) {
var defaults={
foreground: 'red',
background: 'yellow'
};
//options合并到defaults上,defaults繼承了options上的各種屬性和方法,將所有的賦值給endOptions
var endOptions=$.extend({},defaults,options);
this.each(function () {
var $this = $(this);
$this.css({
backgroundColor: endOptions.background,
color: endOptions.foreground
});
});
return this;
};
})(jQuery);

最后調(diào)用插件
$(function () {
$("p").plugin({ foreground: 'orange', background: '#ccc' });
//調(diào)用自定義 插件
});
注意

1. 有一種東西叫腳本壓縮，前端頁面要減少腳本數(shù)量和腳本大小，所以要把一類的腳本壓縮在一起，為了避免壓縮時前一個腳本沒有寫最后一個分號而導(dǎo)致壓縮后腳本不能使用，所以要在開始加一個分號。

2. 函數(shù)全部放在閉包里，外面的函數(shù)就調(diào)用不到里面的參數(shù)了,比較安全。

3. 之所以插件要return this，返回當(dāng)前對象，是為了遵循jQuery的鏈?zhǔn)綄懛ㄌ攸c。
   
   總結(jié)

4. jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。jQuery.fn.extend()方法就是擴(kuò)展jQuery對象的原型方法。為對象添加“成員方法”，類的“成員方法”要類的對象才能調(diào)用，所以使用jQuery.fn.extend(object)擴(kuò)展的方法，jQuery類的實例可以使用這個“成員函數(shù)”,比如$(‘p’).extend(obj)。

5. 閉包可以構(gòu)建命名空間，以減少全局變量的使用，避免全局污染。

6. $.extend()多用來合并插件中的參數(shù),也可以用來拓展全局函數(shù)，$.fn.extend()用來為對象添加成員方法。

7. return this返回該對象，便于jQuery方法的鏈?zhǔn)秸{(diào)用。

分享名稱：前端知識|論jQuery如何編寫插件
文章出自：http://chinadenli.net/article10/ppgpdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站排名、定制開發(fā)、網(wǎng)頁設(shè)計公司、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)