?
2.3 暴露插件的默認設(shè)置
我們應(yīng)該對上面代碼的一種改進是暴露插件的默認設(shè)置。這對于讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來我們開始利用函數(shù)對象。 ????
?
Java代碼?
// 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)在使用者可以包含像這樣的一行在他們的腳本里: ?
//這個只需要調(diào)用一次,且不一定要在ready塊中調(diào)用 ?
$.fn.hilight.defaults.foreground = 'blue'; ???
接下來我們可以像這樣使用插件的方法,結(jié)果它設(shè)置藍色的前景色: ?
$('#myDiv').hilight(); ??
?
如你所見,我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值:
// 覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一個新的缺省設(shè)置調(diào)用插件
$('.hilightDiv').hilight();
// ...
// 通過傳遞配置參數(shù)給插件方法來覆蓋缺省設(shè)置
$('#green').hilight({
??foreground: 'green'
}); ?
2.4 適當?shù)谋┞兑恍┖瘮?shù)
這段將會一步一步對前面那段代碼通過有意思的方法擴展你的插件(同時讓其他人擴展你的插件)。例如,我們插件的實現(xiàn)里面可以定義一個名叫"format"的函數(shù)來格式化高亮文本。我們的插件現(xiàn)在看起來像這樣,默認的format方法的實現(xiàn)部分在hiligth函數(shù)下面。
Java代碼?
// plugin definition ???
$.fn.hilight = function(options) { ???
??// iterate and reformat each matched element ???
??return this.each(function() { ???
????var $this = $(this); ???
????// ... ???
????var markup = $this.html(); ???
????// call our format function ???
????markup = $.fn.hilight.format(markup); ???
????$this.html(markup); ???
??}); ???
}; ???
// define our format function ???
$.fn.hilight.format = function(txt) { ???
return '' + txt + ''; ???
}; ????
??????我們很容易的支持options對象中的其他的屬性通過允許一個回調(diào)函數(shù)來覆蓋默認的設(shè)置。這是另外一個出色的方法來修改你的插件。這里展示的技巧是進一步有效的暴露format函數(shù)進而讓他能被重新定義。通過這技巧,是其他人能夠傳遞他們自己設(shè)置來覆蓋你的插件,換句話說,這樣其他人也能夠為你的插件寫插件。
??????考慮到這個篇文章中我們建立的無用的插件,你也許想知道究竟什么時候這些會有用。一個真實的例子是Cycle插件.這個Cycle插件是一個滑動顯示插件,他能支持許多內(nèi)部變換作用到滾動,滑動,漸變消失等。但是實際上,沒有辦法定義也許會應(yīng)用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle插件對使用者暴露"transitions"對象,使他們添加自己變換定義。插件中定義就像這樣:
$.fn.cycle.transitions = {
// ...
};
這個技巧使其他人能定義和傳遞變換設(shè)置到Cycle插件。
評論
查看更多