摘要：我們也可以在設(shè)置中間允許一個(gè)回調(diào)函數(shù)，來(lái)覆蓋默認(rèn)的函數(shù)，這也是一個(gè)支持定制的非常棒的方法。對(duì)外暴露了一個(gè)對(duì)象。所以我們的設(shè)置應(yīng)該像這樣對(duì)于也可以使用同樣的方法來(lái)實(shí)現(xiàn)提供回調(diào)函數(shù)如果你的插件是事件驅(qū)動(dòng)的話，最好為每個(gè)事件提供回調(diào)函數(shù)。

_Advanced Plugin Concepts_，翻譯自 jQuery 官方網(wǎng)站。

對(duì)于上一篇文章最后的代碼，我們可以改進(jìn)，也應(yīng)該改進(jìn)的地方就是，為我們的插件的默認(rèn)設(shè)置提供共有接口，使得用戶可以直接更改默認(rèn)設(shè)置。

這樣做的好處就是可以讓用戶用最少的代碼量來(lái)定制我們的插件。這次的例子是：

// Plugin definition.
$.fn.hilight = function( options ) {
 
    // Extend our default options with those provided.
    // Note that the first argument 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)在用戶可以這樣更改默認(rèn)設(shè)定：

// This needs only be called once and does not
// have to be called from within a "ready" block
$.fn.hilight.defaults.foreground = "blue";

這樣使用我們的插件：

$( "#myDiv" ).hilight();

你可以看到，我們?cè)试S用戶使用僅僅一行代碼就覆蓋了某個(gè)默認(rèn)設(shè)定。除此之外，用戶仍然可以傳入?yún)?shù)來(lái)覆蓋他們?cè)O(shè)定的默認(rèn)設(shè)置。

// Override plugin default foreground color.
$.fn.hilight.defaults.foreground = "blue";
 
// ...
 
// Invoke plugin using new defaults.
$( ".hilightDiv" ).hilight();
 
// ...
 
// Override default by passing options to plugin method.
$( "#green" ).hilight({
    foreground: "green"
});

為某些附屬函數(shù)提公共接口，能夠非常好的去擴(kuò)展和讓別人擴(kuò)展你的插件。

舉個(gè)例子，我們的插件可能實(shí)現(xiàn)了一個(gè)叫 format 的函數(shù)， 這個(gè)函數(shù)格式化強(qiáng)調(diào)文本的形式。我們?cè)?hilight 函數(shù)下面定義了 format 的默認(rèn)方法。

// Plugin definition.
$.fn.hilight = function( options ) {
 
    // Iterate and reformat each matched element.
    return this.each(function() {
 
        var elem = $( this );
 
        // ...
 
        var markup = elem.html();
 
        // Call our format function.
        markup = $.fn.hilight.format( markup );
 
        elem.html( markup );
 
    });
 
};
 
// Define our format function.
$.fn.hilight.format = function( txt ) {
    return "" + txt + "";
};

我們也可以在設(shè)置中間允許一個(gè)回調(diào)函數(shù)，來(lái)覆蓋默認(rèn)的 format 函數(shù)， 這也是一個(gè)支持定制的非常棒的方法。
使用這些技術(shù)，其他人可以非常方便的定制你的插件，然后發(fā)布。換句話說(shuō)，其他人可以為你的插件來(lái)寫插件。

考慮到這篇文章里這個(gè)蒼白的例子并不是非常具有說(shuō)服力，一個(gè)現(xiàn)實(shí)的例子就是 Cycle Plugin。這個(gè)插件是一個(gè)幻燈片插件，內(nèi)置非常多切換特效，像滾動(dòng)、滑動(dòng)、淡出等。但是實(shí)際上它不可能定義每個(gè)人想要的效果，那么插件的擴(kuò)展性就非常重要了。

Cycle Plugin 對(duì)外暴露了一個(gè) transitions 對(duì)象。 在這里用戶可以自己定義他們的切換特效。

$.fn.cycle.transitions = {
 
    // ...
 
};

對(duì)外提供一部分你的插件的公共接口確實(shí)很強(qiáng)大，但是你要想清楚哪些部分需要提供給公共接口，哪些不需要。當(dāng)函數(shù)一旦暴露在外，任何對(duì)參數(shù)和語(yǔ)義（函數(shù)的功能）的更改都會(huì)摧毀向后兼容性。一般來(lái)說(shuō)，如果你不確定一個(gè)方法是否應(yīng)該設(shè)為公有，那么也許答案是不。

所以我們?nèi)绾卧诓桓銇y命名空間并且保持私有的情況下定義更多的函數(shù)呢？這就是閉包的事情了。

為了展示如何解決這個(gè)問(wèn)題，我們?cè)谖覀兊牟寮锛恿艘粋€(gè)函數(shù) debug。這個(gè)函數(shù)在 console 中輸出選定的對(duì)象。我們將整個(gè)插件用一個(gè)函數(shù)包裹起來(lái)（上一篇文章也有提到）。

// Create closure.
(function( $ ) {
 
    // Plugin definition.
    $.fn.hilight = function( options ) {
        debug( this );
        // ...
    };
 
    // Private function for debugging.
    function debug( obj ) {
        if ( window.console && window.console.log ) {
            window.console.log( "hilight selection count: " + obj.length );
        }
    };
 
    // ...
 
// End of closure.
 
})( jQuery );

Bob 已經(jīng)創(chuàng)建了一個(gè)新的畫廊插件（叫 "superGallery"）。這個(gè)插件使得一系列圖片變得可導(dǎo)航的。Bob 同樣還添加了一些動(dòng)畫效果使得插件變得更加有趣。他想讓他的插件獲得最大程度的可定制性，所以他寫出了下面的代碼：

jQuery.fn.superGallery = function( options ) {
 
    // Bob"s default settings:
    var defaults = {
        textColor: "#000",
        backgroundColor: "#fff",
        fontSize: "1em",
        delay: "quite long",
        getTextFromTitle: true,
        getTextFromRel: false,
        getTextFromAlt: false,
        animateWidth: true,
        animateOpacity: true,
        animateHeight: true,
        animationDuration: 500,
        clickImgToGoToNext: true,
        clickImgToGoToLast: false,
        nextButtonText: "next",
        previousButtonText: "previous",
        nextButtonTextColor: "red",
        previousButtonTextColor: "red"
    };
 
    var settings = $.extend( {}, defaults, options );
 
    return this.each(function() {
        // Plugin code would go here...
    });
 
};

你想到的第一件事情可能就是，這個(gè)插件該有多大才能實(shí)現(xiàn)這么多可定制功能。這個(gè)插件的體積可能完全沒(méi)必要這么大。

Bob 對(duì)他的插件非常滿意。他覺(jué)得他的插件會(huì)在不同的情景之下會(huì)是一個(gè)通用的解決方案。

Sue 決定去用一用這個(gè)新插件。她設(shè)置了所有的選項(xiàng)，但是她意識(shí)到，如果圖片的寬度以低速變化的話，會(huì)獲得更加好的效果。她趕緊去搜索了 Bob 的文檔，但是并沒(méi)有找到 animateWidthDuration 類似的選項(xiàng)。

問(wèn)題的關(guān)鍵是并不是你的插件有多少個(gè)選項(xiàng)，而是有什么選項(xiàng)。

Bob 做的有點(diǎn)兒過(guò)了。他提供的定制性看起來(lái)很高，其實(shí)非常低。特別是考慮到一個(gè)人可能想要在這個(gè)插件中控制的所有特性。Bob 犯了個(gè)錯(cuò)誤，它提供了非常多荒誕的選項(xiàng)，殊不知讓他的插件變得更難定制了。

所以現(xiàn)在非常明顯了，Bob 需要一個(gè)新的定制模型。一個(gè)并沒(méi)有放棄必須的控制和抽象細(xì)節(jié)的定制模型。

這里有一些建議，可以讓你更好的創(chuàng)建一個(gè)可定制化插件。

使用你的插件的開發(fā)者不應(yīng)該要去學(xué)一門新的語(yǔ)言或新的技術(shù)，只要搞定他們的工作。

Bob 他為 delay 這個(gè)選項(xiàng)提供了最大的定制性。他設(shè)置了4個(gè)不同的延遲：

var delayDuration = 0;
 
switch ( settings.delay ) {
 
    case "very short":
        delayDuration = 100;
        break;
 
    case "quite short":
        delayDuration = 200;
        break;
 
    case "quite long":
        delayDuration = 300;
        break;
 
    case "very long":
        delayDuration = 400;
        break;
 
    default:
        delayDuration = 200;
 
}

這導(dǎo)致不僅僅用戶所能控制的延遲水平變少了，還花費(fèi)了比較多的空間。20行代碼僅僅就為了定義一個(gè)延遲時(shí)間，有點(diǎn)兒多了。

一個(gè)更加好的方式就是讓用戶自己傳入延遲的時(shí)間。

如果你的插件在DOM中創(chuàng)建了一些元素。那么你最好讓用戶有方法去控制它。有些時(shí)候這意味著提供給用戶傳入ID或者類名的方法。但是注意你的插件不應(yīng)該全局依賴這些。

一個(gè)不好的實(shí)現(xiàn)：

// Plugin code
$( "
" ).appendTo( "body" );

一個(gè)好一點(diǎn)兒的實(shí)現(xiàn)：

// Retain an internal reference:
var wrapper = $( "
" )
    .attr( settings.wrapperAttrs )
    .appendTo( settings.container );
 
// Easy to reference later...
wrapper.append( "..." );

注意我們使用了 .attr() 來(lái)增加特定的屬性。所以我們的設(shè)置應(yīng)該像這樣：

var defaults = {
    wrapperAttrs : {
        class: "gallery-wrapper"
    },
    // ... rest of settings ...
};
 
// We can use the extend method to merge options/settings as usual:
// But with the added first parameter of TRUE to signify a DEEP COPY:
var settings = $.extend( true, {}, defaults, options );

對(duì)于CSS 也可以使用同樣的方法來(lái)實(shí)現(xiàn)：

var defaults = {
    wrapperCSS: {},
    // ... rest of settings ...
};
 
// Later on in the plugin where we define the wrapper:
var wrapper = $( "
" )
    .attr( settings.wrapperAttrs )
    .css( settings.wrapperCSS ) // ** Set CSS!
    .appendTo( settings.container );

如果你的插件是事件驅(qū)動(dòng)的話，最好為每個(gè)事件提供回調(diào)函數(shù)。

var defaults = {
 
    // We define an empty anonymous function so that
    // we don"t need to check its existence before calling it.
    onImageShow : function() {},
 
    // ... rest of settings ...
 
};
 
// Later on in the plugin:
 
nextButton.on( "click", showNextImage );
 
function showNextImage() {
 
    // Returns reference to the next image node
    var image = getNextImage();
 
    // Stuff to show the image here...
 
    // Here"s the callback:
    settings.onImageShow.call( image );
}

你的插件不可能在所有的情況下都能工作。同樣的，當(dāng)你提供很少的控制的方法的時(shí)候，它也有可能沒(méi)啥用。所以，權(quán)衡是非常重要的事情。以下有三點(diǎn)：

靈活性：你的插件要處理多少種情況？

大?。耗愕牟寮笮『退墓δ芟嗥ヅ鋯幔?/p>

性能：你的插件無(wú)論什么情況都會(huì)處理設(shè)置選項(xiàng)嗎？影響速度嗎？值得嗎？