一本色道久久88综合日韩精品 ,欧美熟妇另类久久久久久不卡,亚洲乱码日产精品a级毛片久久

jQuery 插件未使用的 14 種可能解釋

有這么多人開發(fā) jquery 插件，遇到一個簡單的 – 由于缺乏更好的語言 – 糟糕透頂?shù)那闆r并不少見。沒有示例或文檔，該插件不遵循最佳實踐等。但您是幸運者之一：本文將詳細介紹您必須避免的陷阱。

對于那些經(jīng)常使用 Nettuts+ 的人來說，jQuery 并不陌生。 Jeffrey Way 的《30 天學習 jQuery》（以及此處和其他地方的各種其他教程）很棒，帶領我們所有人走上了 Sizzle 支持的 Awesomesauce 之路。在所有的炒作中（以及開發(fā)人員和瀏覽器供應商在 JavaScript 采用方面的巨大飛躍），大量的插件已經(jīng)出現(xiàn)。這就是 jQuery 成為最流行的 JavaScript 庫的部分原因！唯一的問題是其中許多都不是太好。

在本文中，我們將不再專門關注 JavaScript，而是更多地關注插件交付的最佳實踐。

1 – 你不是在制作 jQuery 插件

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

 (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);

首先，我們創(chuàng)建一個自調用匿名函數(shù)來避免使用全局變量。我們傳入 $、window 和 undefined。調用自調用函數(shù)的參數(shù)是 jQuery 和 window；沒有為 undefined 傳入任何內容，因此，如果我們決定在插件中使用 undefined 關鍵字，“undefined”實際上將是未定義的。

這可以防止其他腳本可能向 undefined 分配惡意值，例如 true！

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

傳遞全局可訪問的 window 對象的變量允許通過縮小過程（您也應該這樣做）來壓縮更多的代碼。

接下來，我們使用 jQuery 插件模式，$.fn.PluginName。這是注冊插件以使用 $(selector).method() 格式的方法。它只是用您的新方法擴展了 jQuery 的原型。如果您想創(chuàng)建一個在 jQuery 對象上定義函數(shù)的插件，請直接添加它，如下所示：

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

這種類型的插件無法鏈接，因為定義為 jQuery 對象屬性的函數(shù)通常不會返回 jQuery 對象。例如，考慮以下代碼：

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

在這里，我們返回一個字符串數(shù)組。簡單地將其作為數(shù)組返回是有意義的，因為這可能是用戶想要使用的（如果他們愿意，他們可以輕松地將其包裝在 jQuery 對象中）。相反，請考慮以下人為的示例：

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

在這種情況下，用戶可能期望從 $.getOddEls 返回 jQuery 對象；因此，我們返回filter方法，該方法返回由傳遞的函數(shù)定義的jQuery集合。一個好的經(jīng)驗法則是將返回的元素包裝在 jQuery 函數(shù)中，特別是如果它們可以鏈接起來；如果您要返回數(shù)組、字符串、數(shù)字、函數(shù)或其他數(shù)據(jù)類型，請將它們打開。

2 – 您沒有（正確）記錄您的代碼

可以說，發(fā)布代碼時可以做的最重要的事情就是添加必要的文檔。您向開發(fā)人員解釋的內容與代碼實際執(zhí)行或可以執(zhí)行的操作之間的差距是用戶不想浪費時間來弄清楚代碼的來龍去脈。

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

這個過程應該既是內部實踐（在代碼中/散布在整個代碼中），也是外部實踐（在 wiki 或自述文件中徹底解釋每個公共方法、選項和多個用例）。

3 – 您沒有提供足夠的靈活性或可定制性

最流行的插件提供對用戶可能想要控制的變量（大多數(shù)插件稱為“選項”對象）的完全訪問。他們還可能提供插件的許多不同配置，以便它可以在許多不同的上下文中重用。例如，讓我們考慮一個簡單的滑塊插件。用戶可能希望控制的選項包括動畫的速度、類型和延遲。

最好還讓用戶訪問添加到插件插入或操作的 dom 元素中的類名/ID 名稱。但除此之外，他們可能還希望在每次幻燈片轉換時，或者當幻燈片轉換回開頭（一個完整的“循環(huán)”）時訪問回調函數(shù)。

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

讓我們考慮另一個例子：調用 API 的插件應該提供對 API 返回對象的訪問。以下面的簡單插件概念為例：

 $.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 });

宣傳這一點的另一種方式是提供“鉤子”作為選項。從 jQuery 1.7.1 及更高版本開始，我們可以在插件調用之后使用 .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); 			}); 	}); }

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

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

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

4 – 您需要太多配置

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

 $(selector).myPlugin();

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

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

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

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

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

事情應該只是……工作。

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

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

6 – 你沒有提供示例

證據(jù)就在布丁中：如果您無法提供一個實際示例來說明您的插件如何使用隨附的代碼，人們很快就會放棄使用您的插件。就那么簡單。不要偷懶。

一個很好的示例模板：

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

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

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

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

8 – 變更日志在哪里？

如果您還沒有學會如何使用版本控制，那么是時候咬緊牙關了。

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

其他資源

Git 書
使用 Git 輕松進行版本控制
使用 Git、GitHub 和 ssh 的完美工作流程
熟練使用 Git (19 美元)
GitCast

9 – 沒有人需要你的插件

世界不需要另一個滑塊插件。

好吧，我們在這里忽略它已經(jīng)足夠長的時間了：一些“插件”是無用的或太淺，不足以保證被稱為插件。世界不需要另一個滑塊插件！然而，應該指出的是，內部團隊可能會開發(fā)自己的插件供自己使用，這是完全可以的。但是，如果您希望將您的插件推向社交編碼領域，請找到編寫更多代碼的理由。俗話說，沒有理由重新發(fā)明輪子。相反，接過別人的方向盤，建造一輛賽車。當然，有時會有新的、更好的方法來做已經(jīng)做過的同樣的事情。例如，如果您使用更快或新技術，您很可能會編寫一個新的滑塊插件。

10 – 您沒有提供縮小版本

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

有關自動化解決方案，請參閱提示十三。

11 – 你的代碼太聰明了

當你編寫一個插件時，它的目的就是供其他人使用，對嗎？因此，最有效的源代碼是具有高度可讀性的。如果您正在編寫無數(shù)巧妙的單行 Lambda 樣式函數(shù)，或者您的變量名稱沒有語義，那么當錯誤不可避免地發(fā)生時，將很難對其進行調試。不要編寫短變量名來節(jié)省空間，而是遵循技巧九（縮小！）中的建議。這是優(yōu)秀文檔的另一部分；優(yōu)秀的開發(fā)人員應該能夠檢查您的代碼并了解其用途，而無需花費太多精力。

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

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

11.你不需要 jQuery

??>

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