有這麼多人開(kāi)發(fā) jQuery 插件，遇到一個(gè)簡(jiǎn)單的 - 由於缺乏更好的語(yǔ)言 - 糟糕透頂?shù)那闆r並不少見(jiàn)。沒(méi)有範(fàn)例或文檔，該插件不遵循最佳實(shí)踐等。但您是幸運(yùn)者之一：本文將詳細(xì)介紹您必須避免的陷阱。

#對(duì)於那些經(jīng)常使用 Nettuts 的人來(lái)說(shuō)，jQuery 並不陌生。 Jeffrey Way 的《30 天學(xué)習(xí) jQuery》（以及此處和其他地方的各種其他教程）很棒，帶領(lǐng)我們所有人走上了 Sizzle 支持的 Awesomesauce 之路。在所有的炒作中（以及開(kāi)發(fā)人員和瀏覽器供應(yīng)商在 JavaScript 採(cǎi)用方面的巨大飛躍），大量的插件已經(jīng)出現(xiàn)。這就是 jQuery 成為最受歡迎的 JavaScript 函式庫(kù)的部分原因！唯一的問(wèn)題是其中許多都不是太好。

在本文中，我們將不再專門(mén)關(guān)注 JavaScript，而是更專注於插件交付的最佳實(shí)踐。

1 - 你不是在製作 jQuery 外掛

有一些模式或多或少被普遍認(rèn)為是創(chuàng)建 jQuery 外掛的「正確方法」。如果您不遵循這些約定，您的插件可能...很糟糕！考慮最常見(jiàn)的模式之一：

(function($, window, undefined){
$.fn.myPlugin = function(opts) {
	var defaults = {
		// setting your default values for options
	}

  // extend the options from defaults with user's options
  var options = $.extend(defaults, opts || {});

	return this.each(function(){ // jQuery chainability
	  // do plugin stuff
	});
})(jQuery, window);

首先，我們建立一個(gè)自呼叫匿名函數(shù)來(lái)避免使用全域變數(shù)。我們傳入 $、window 和 undefined。呼叫自呼叫函數(shù)的參數(shù)是jQuery 和window；沒(méi)有為undefined 傳入任何內(nèi)容，因此，如果我們決定在插件中使用undefined 關(guān)鍵字，「undefined」實(shí)際上將是未定義的。

這可以防止其他腳本可能會(huì)向 undefined 指派惡意值，例如 true！

$ 作為 jQuery 傳遞；我們這樣做是為了確保在匿名函數(shù)之外， $ 仍然可以完全引用其他內(nèi)容，例如 Prototype。

傳遞全域可存取的 window 物件的變數(shù)允許透過(guò)縮小過(guò)程（您也應(yīng)該這樣做）來(lái)壓縮更多的程式碼。

接下來(lái)，我們使用 jQuery 外掛模式，$.fn.PluginName。這是註冊(cè)插件以使用 $(selector).method() 格式的方法。它只是用您的新方法擴(kuò)展了 jQuery 的原型。如果您想建立一個(gè)在 jQuery 物件上定義函數(shù)的插件，請(qǐng)直接新增它，如下所示：

$.PluginName = function(options){
	// extend options, do plugin stuff
}

這種類型的插件無(wú)法鏈接，因?yàn)槎x為 jQuery 物件屬性的函數(shù)通常不會(huì)傳回 jQuery 物件。例如，考慮以下程式碼：

$.splitInHalf = function(stringToSplit){
	var length = stringToSplit.length;
	var stringArray = stringToSplit.split(stringToSplit[Math.floor(length/2)]);
	return stringArray;
}

在這裡，我們回傳一個(gè)字串陣列。簡(jiǎn)單地將其作為數(shù)組返回是有意義的，因?yàn)檫@可能是用戶想要使用的（如果他們願(yuàn)意，他們可以輕鬆地將其包裝在 jQuery 物件中）。相反，請(qǐng)考慮以下人為的範(fàn)例：

$.getOddEls = function(jQcollection){ //
	return jQcollection.filter(function(index){
		var i = index+1;
		return (index % 2 != 0);
	});
}

在這種情況下，使用者可能期望從 $.getOddEls 傳回 jQuery 物件；因此，我們傳回filter方法，該方法傳回由傳遞的函數(shù)定義的jQuery集合。一個(gè)好的經(jīng)驗(yàn)法則是將傳回的元素包裝在 jQuery 函數(shù)中，特別是如果它們可以連結(jié)起來(lái)；如果您要傳回陣列、字串、數(shù)字、函數(shù)或其他資料類型，請(qǐng)將它們開(kāi)啟。

2 - 您沒(méi)有（正確）記錄您的程式碼

可以說(shuō)，發(fā)佈程式碼時(shí)可以做的最重要的事情就是添加必要的文件。您向開(kāi)發(fā)人員解釋的內(nèi)容與程式碼實(shí)際執(zhí)行或可以執(zhí)行的操作之間的差距是用戶不想浪費(fèi)時(shí)間來(lái)弄清楚程式碼的來(lái)龍去脈。

文件是一種沒(méi)有任何硬性規(guī)則的實(shí)踐；但是，人們普遍認(rèn)為擁有的（組織良好的）文檔越多越好。

這個(gè)過(guò)程應(yīng)該既是內(nèi)部實(shí)踐（在程式碼中/散佈在整個(gè)程式碼中），也是外部實(shí)踐（在 wiki 或自述文件中徹底解釋每個(gè)公共方法、選項(xiàng)和多個(gè)用例）。

3 - 您沒(méi)有提供足夠的彈性或可自訂性

最受歡迎的插件提供對(duì)使用者可能想要控制的變數(shù)（大多數(shù)插件稱為「選項(xiàng)」物件）的完全存取。他們還可能提供插件的許多不同配置，以便它可以在許多不同的上下文中重複使用。例如，讓我們考慮一個(gè)簡(jiǎn)單的滑桿插件。使用者可能想要控制的選項(xiàng)包括動(dòng)畫(huà)的速度、類型和延遲。

最好也讓使用者存取新增到外掛插入或操作的 DOM 元素中的類別名稱/ID 名稱。但除此之外，他們可能還希望在每次投影片轉(zhuǎn)換時(shí)，或者當(dāng)投影片轉(zhuǎn)換回開(kāi)頭（一個(gè)完整的「循環(huán)」）時(shí)存取回調(diào)函數(shù)。

您的工作是考慮插件的所有可能用途和需求。

讓我們考慮另一個(gè)例子：呼叫 API 的插件應(yīng)該提供對(duì) API 回傳物件的存取。以下面的簡(jiǎn)單外掛概念為例：

$.fn.getFlickr = function(opts) {
	return this.each(function(){ // jQuery chainability
		var defaults = { // setting your default options
			cb : function(data){},
			flickrUrl : // some default value for an API call
		}
	    // extend the options from defaults with user's options
	    var options = $.extend(defaults, opts || {});

	    // call the async function and then call the callback
	    // passing in the api object that was returned
	    $.ajax(flickrUrl, function(dataReturned){
			options.cb.call(this, dataReturned);
		});
	});
}

這使我們能夠做以下事情：

	$(selector).getFlickr(function(fdata){ // flickr data is in the fdata object });

宣傳這一點(diǎn)的另一種方式是提供“鉤子”作為選項(xiàng)。從 jQuery 1.7.1 及更高版本開(kāi)始，我們可以在插件調(diào)用之后使用 .on(eventName, function(){}) 將行為分離到它們自己的函數(shù)中。例如，使用上面的插件，我們可以將代碼更改為如下所示：

$.fn.getFlickr = function(opts) {
	return this.each(function(i,el){
		var $this = el;
		var defaults = { // setting your default options
			flickrUrl : "http://someurl.com" // some default value for an API call
		}
	    var options = $.extend(defaults, opts || {});

	    // call the async function and then call the callback
	    // passing in the api object that was returned
	    $.ajax(flickrUrl, function(dataReturned){
	    	// do some stuff
			$this.trigger("callback", dataReturned);
		}).error(function(){
				$this.trigger("error", dataReturned);
			});
	});
}

這允許我們調(diào)用 getFlickr 插件并鏈接其他行為處理程序。

$(selector).getFlickr(opts).on("callback", function(data){ // do stuff }).on("error", function(){ // handle an error });

您可以看到提供這種靈活性絕對(duì)重要；您的插件的操作越復(fù)雜，可用的控件就越復(fù)雜。

4 - 您需要太多配置

好的，第三條建議是，您的插件的操作越復(fù)雜，可用的控制就越復(fù)雜。可用。然而，一個(gè)很大的錯(cuò)誤是為插件功能提供了太多的選項(xiàng)。例如，基于 UI 的插件最好具有無(wú)參數(shù)默認(rèn)行為。

$(selector).myPlugin();

當(dāng)然，有時(shí)這是不現(xiàn)實(shí)的（例如，用戶可能正在獲取特定的提要）。在這種情況下，您應(yīng)該為他們做一些繁重的工作。有多種方式將選項(xiàng)傳遞給插件。例如，假設(shè)我們有一個(gè)簡(jiǎn)單的推文獲取器插件。該推文獲取器應(yīng)該有一個(gè)默認(rèn)行為，帶有一個(gè)必需選項(xiàng)（您要從中獲取的用戶名）。

$(selector).fetchTweets("jcutrell");

例如，默認(rèn)情況下可能會(huì)抓取一條推文，將其包裝在段落標(biāo)記中，然后使用該 html 填充選擇器元素。這是大多數(shù)開(kāi)發(fā)人員所期望和欣賞的行為。細(xì)粒度選項(xiàng)應(yīng)該就是：選項(xiàng)。

5 - 您正在混合外部 CSS 規(guī)則和內(nèi)聯(lián) CSS 規(guī)則

當(dāng)然，根據(jù)插件的類型，如果高度基于 UI 操作，則必須包含 CSS 文件，這是不可避免的。一般來(lái)說(shuō)，這是一個(gè)可以接受的問(wèn)題解決方案；大多數(shù)插件都與圖像和 CSS 捆綁在一起。但不要忘記第二點(diǎn) - 文檔還應(yīng)包括如何使用/引用樣式表和圖像。開(kāi)發(fā)人員不想浪費(fèi)時(shí)間查看源代碼來(lái)弄清楚這些事情。

事情應(yīng)該只是......工作。

話雖如此，使用注入樣式（可以通過(guò)插件選項(xiàng)高度訪問(wèn)）或基于類/ID 的樣式絕對(duì)是最佳實(shí)踐。這些 ID 和類也應(yīng)該可以通過(guò)前面提到的選項(xiàng)進(jìn)行訪問(wèn)。然而，內(nèi)聯(lián)樣式會(huì)覆蓋外部 CSS 規(guī)則；不鼓勵(lì)將兩者混合使用，因?yàn)殚_(kāi)發(fā)人員可能需要很長(zhǎng)時(shí)間才能弄清楚為什么插件創(chuàng)建的元素不遵守他們的 CSS 規(guī)則。在這些情況下請(qǐng)運(yùn)用您的最佳判斷。

根據(jù)經(jīng)驗(yàn)，內(nèi)聯(lián) CSS 很糟糕 - 除非它很小到無(wú)法保證有自己的外部樣式表。

6 - 你沒(méi)有提供示例

證據(jù)就在布丁中：如果您無(wú)法提供一個(gè)實(shí)際示例來(lái)說(shuō)明您的插件如何使用隨附的代碼，人們很快就會(huì)放棄使用您的插件。就那么簡(jiǎn)單。不要偷懶。

一個(gè)很好的示例模板：

• “hello world”示例 - 通常是傳遞最小配置/選項(xiàng)的插件調(diào)用，并且附帶 html/css
• 一些更復(fù)雜的示例 - 通常包含多個(gè)選項(xiàng)的完整功能的示例
• 集成示例 - 如果有人可能將另一個(gè)插件與您的插件一起使用，您可以在此處展示如何執(zhí)行此操作。 （這也能讓你在開(kāi)源開(kāi)發(fā)領(lǐng)域獲得加分。值得贊揚(yáng)。）

7 - 你的代碼與他們的 jQuery 版本不匹配

jQuery，像任何優(yōu)秀的代碼庫(kù)一樣，隨著每個(gè)版本的發(fā)布而成長(zhǎng)。即使在棄用支持后，大多數(shù)方法仍會(huì)保留。然而，添加了新的方法；一個(gè)完美的例子是 .on() 方法，它是 jQuery 的新的事件委托一體化解決方案。如果您編寫(xiě)一個(gè)使用 .on() 的插件，那么使用 jQuery 1.6 或更早版本的人將不走運(yùn)。現(xiàn)在，我并不是建議您針對(duì)最低公分母進(jìn)行編碼，但是，在您的文檔中，請(qǐng)務(wù)必解釋您的插件支持哪個(gè)版本的 jQuery。如果您引入了支持 jQuery 1.7 的插件，那么即使 1.8 發(fā)布，您也應(yīng)該強(qiáng)烈考慮維持對(duì) 1.7 的支持。您還應(yīng)該考慮利用 jQuery 中新的/更好的/更快的功能。

鼓勵(lì)開(kāi)發(fā)人員升級(jí)，但不要太頻繁地破壞您的插件！一種選擇是提供插件的“舊版”、已棄用、不受支持的版本。

8 - 變更日志在哪里？

如果您還沒(méi)有學(xué)會(huì)如何使用版本控制，那么是時(shí)候咬緊牙關(guān)了。

除了將 jQuery 版本支持/兼容性作為文檔的一部分之外，您還應(yīng)該進(jìn)行版本控制。版本控制（具體來(lái)說(shuō)，通過(guò) GitHub）在很大程度上是社交編碼的發(fā)源地。如果您正在開(kāi)發(fā)一個(gè) jQuery 插件并希望最終發(fā)布到官方存儲(chǔ)庫(kù)中，那么無(wú)論如何它都必須存儲(chǔ)在 GitHub 存儲(chǔ)庫(kù)中；如果您還沒(méi)有學(xué)會(huì)如何使用版本控制，那么是時(shí)候硬著頭皮了。版本控制有無(wú)數(shù)的好處，所有這些都超出了本文的范圍。但核心好處之一是，它允許人們查看您所做的更改、改進(jìn)和兼容性修復(fù)以及您何時(shí)進(jìn)行這些更改、改進(jìn)和兼容性修復(fù)。這也為您編寫(xiě)的插件的貢獻(xiàn)和定制/擴(kuò)展打開(kāi)了大門(mén)。

其他資源

• Git 書(shū)
• 使用 Git 輕松進(jìn)行版本控制
• 使用 Git、GitHub 和 SSH 的完美工作流程
• 熟練使用 Git (19 美元)
• GitCast

9 - 沒(méi)有人需要你的插件

世界不需要另一個(gè)滑塊插件。

好吧，我們?cè)谶@里忽略它已經(jīng)足夠長(zhǎng)的時(shí)間了：一些“插件”是無(wú)用的或太淺，不足以保證被稱為插件。世界不需要另一個(gè)滑塊插件！然而，應(yīng)該指出的是，內(nèi)部團(tuán)隊(duì)可能會(huì)開(kāi)發(fā)自己的插件供自己使用，這是完全可以的。但是，如果您希望將您的插件推向社交編碼領(lǐng)域，請(qǐng)找到編寫(xiě)更多代碼的理由。俗話說(shuō)，沒(méi)有理由重新發(fā)明輪子。相反，接過(guò)別人的方向盤(pán)，建造一輛賽車。當(dāng)然，有時(shí)會(huì)有新的、更好的方法來(lái)做已經(jīng)做過(guò)的同樣的事情。例如，如果您使用更快或新技術(shù)，您很可能會(huì)編寫(xiě)一個(gè)新的滑塊插件。

10 - 您沒(méi)有提供縮小版本

這個(gè)相當(dāng)簡(jiǎn)單：提供代碼的縮小版本。這使得它更小、更快。它還確保您的 Javascript 在編譯時(shí)不會(huì)出現(xiàn)錯(cuò)誤。當(dāng)您縮小代碼時(shí)，不要忘記也提供未壓縮的版本，以便您的同行可以查看底層代碼。對(duì)于各種經(jīng)驗(yàn)水平的前端開(kāi)發(fā)人員來(lái)說(shuō)，都有免費(fèi)且廉價(jià)的工具。

有關(guān)自動(dòng)化解決方案，請(qǐng)參閱提示十三。

11 - 你的代碼太聰明了

當(dāng)你編寫(xiě)一個(gè)插件時(shí)，它的目的就是供其他人使用，對(duì)嗎？因此，最有效的源代碼是具有高度可讀性的。如果您正在編寫(xiě)無(wú)數(shù)巧妙的單行 lambda 樣式函數(shù)，或者您的變量名稱沒(méi)有語(yǔ)義，那么當(dāng)錯(cuò)誤不可避免地發(fā)生時(shí)，將很難對(duì)其進(jìn)行調(diào)試。不要編寫(xiě)短變量名來(lái)節(jié)省空間，而是遵循技巧九（縮小?。┲械慕ㄗh。這是優(yōu)秀文檔的另一部分；優(yōu)秀的開(kāi)發(fā)人員應(yīng)該能夠檢查您的代碼并了解其用途，而無(wú)需花費(fèi)太多精力。

如果您發(fā)現(xiàn)自己調(diào)用變量“a”或“x”，那么您就做錯(cuò)了。

此外，如果您發(fā)現(xiàn)自己查閱文檔來(lái)記住您自己的看起來(lái)奇怪的代碼正在做什么，那么您也可能需要不那么簡(jiǎn)潔并更具解釋性。將每個(gè)函數(shù)的行數(shù)限制為盡可能少；如果它們延伸三十行或更多行，則可能會(huì)有代碼味道。

11.你不需要 jQuery

盡管我們都喜歡使用 jQuery，但重要的是要了解它是一個(gè)庫(kù)，而且成本很小。一般來(lái)說(shuō)，您不需要太擔(dān)心 jQuery 選擇器性能之類的事情。不要令人討厭，你會(huì)沒(méi)事的。 jQuery 是高度優(yōu)化的。也就是說(shuō)，如果您需要 jQuery（或插件）的唯一原因是在 DOM 上執(zhí)行一些查詢，您可能會(huì)考慮完全刪除抽象，而堅(jiān)持使用普通 JavaScript 或 Zepto。

注意：如果您決定堅(jiān)持使用普通 JavaScript，請(qǐng)確保您使用的是跨瀏覽器的方法。對(duì)于較新的 API，您可能需要一個(gè)小型的 polyfill。

---

13 - 您沒(méi)有自動(dòng)化該過(guò)程

使用咕嚕聲。期間。

Grunt 是一個(gè)“用于 JavaScript 項(xiàng)目的基于任務(wù)的命令行構(gòu)建工具”，最近在 Nettuts+ 上對(duì)此進(jìn)行了詳細(xì)介紹。它允許你做這樣的事情：

grunt init:jquery

此行（在命令行中執(zhí)行）將提示您一系列問(wèn)題，例如標(biāo)題、描述、版本、git 存儲(chǔ)庫(kù)、許可證等。這些信息有助于自動(dòng)化設(shè)置文檔、許可等的過(guò)程。

Grunt 所做的不僅僅是為您制作一些定制的樣板代碼；它還提供內(nèi)置工具，例如代碼 linter JSHint，只要您安裝了 PhantomJS（由 Grunt 負(fù)責(zé)），它就可以為您自動(dòng)執(zhí)行 QUnit 測(cè)試。這樣，您可以簡(jiǎn)化工作流程，因?yàn)闇y(cè)試在保存時(shí)會(huì)立即在終端中運(yùn)行。

14 - You didn’t test

Oh, by the way - you didtest your code, right? If not, how do you ensure/claim that your code works as expected? Manual testing has its place, but if you find yourself refreshing your browser countless times an hour, you're doing it wrong. Consider using tools like QUnit, Jasmine or even Mocha.

Tests are especially useful when merging pull requests on GitHub. You can require all requests to provide tests to ensure new/modified code does not break your existing plugins.

If the concept of testing jQuery plug-ins is new to you, consider watching our Premium-exclusive screencast, Testing the Technology That Drives jQuery Plugins. Additionally, we are launching a new JavaScript Testing with Jasmine course on the website later this week!

Some useful resources

We won't do you any good by simply telling you what you did wrong. Here are some links to get you back on the right path!

• Learn jQuery in 30 days
• Basic jQuery plug-in pattern - Smashing Magazine
• Use inheritance pattern to organize large jQuery applications
• Official jQuery documentation for plugin creation
• jQuery Template
• OOP jQuery plug-in template
• 10 Coding Tips for Writing Advanced jQuery Plugins

Conclusion

If you are writing a jQuery plugin, it is crucial to stay away from the pitfalls listed above. Did I miss any key signs that the plugin is performing poorly?

以上是jQuery 外掛程式未使用的 14 種可能解釋的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！