在開發(fā)過很多 jQuery 插件以后，我慢慢的摸索出了一套開發(fā)jQuery插件比較標(biāo)準(zhǔn)的結(jié)構(gòu)和模式。這樣我就可以 copy & paste 大部分的代碼結(jié)構(gòu)，只要專注最主要的邏輯代碼就行了。
使用相同的設(shè)計(jì)模式和架構(gòu)也讓修復(fù)bug或者二次開發(fā)更容易。一套經(jīng)過驗(yàn)證的架構(gòu)可以保證我的插件不出大的問題，不論插件簡(jiǎn)單還是復(fù)雜。 我在這里分享10條我總結(jié)的經(jīng)驗(yàn)。
1. 把你的代碼全部放在閉包里面
這是我用的最多的一條。但是有時(shí)候在閉包外面的方法會(huì)不能調(diào)用。不過你的插件的代碼只為你自己的插件服務(wù)，所以不存在這個(gè)問題，你可以把所有的代碼都放在閉包里面。而方法可能應(yīng)該放在Prototype方法內(nèi)部，我們后面會(huì)講到這一點(diǎn)。
(function($){
//code here})(jQuery);
2. 提供插件的默認(rèn)選項(xiàng)
你的插件應(yīng)該會(huì)有一些選項(xiàng)是可以讓開發(fā)者設(shè)置的，所以提供恢復(fù)默認(rèn)選項(xiàng)是以有必要的。你可以通過jQuery的extend功能來設(shè)置這些選項(xiàng)：
var defaultSettings = {mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2'
};
settings = $.extend({}, defaultSettings, settings || {});
3. 使用返回一個(gè)元素
JavaScript/jQuery有一個(gè)很好的特點(diǎn)就是可以進(jìn)行方法級(jí)聯(lián)，所以我們不應(yīng)該破壞這個(gè)特性，始終在方法中返回一個(gè)元素。我在我的每一個(gè)jQuery插件中都遵守這一條。
【IT168 資訊】jQuery 2.0如期發(fā)布，該版本不再支持IE 6/7/8瀏覽器，因此變的更輕更快，但仍然可以繼續(xù)運(yùn)行在JavaScript環(huán)境中，在兼容這些老版本瀏覽器時(shí)，由于自身原因，常會(huì)產(chǎn)生一些錯(cuò)誤。但別擔(dān)心，jQuery團(tuán)隊(duì)將繼續(xù)對(duì)1.x 版本分支進(jìn)行維護(hù)，如果你無法拋棄IE 6/7/8，那么你可以繼續(xù)使用jQuery 1.9和即將發(fā)布的1.10。
隨著jQuery 2.0的發(fā)布，jQuery團(tuán)隊(duì)對(duì)1.x版本的一些環(huán)境將不再提供支持，因?yàn)?.x版本會(huì)是更好的選擇。但對(duì)支持老版本IE的非網(wǎng)站場(chǎng)景是提供支持的，它們包括：
Google Chrome附加組件
Mozilla XUL應(yīng)用程序和Firefox擴(kuò)展
Firefox OS應(yīng)用程序
Chrome OS應(yīng)用程序
Windows 8 Store (“Modern/Metro UI”) 應(yīng)用程序
BlackBerry 10 WebWorks應(yīng)用程序
PhoneGap/Cordova應(yīng)用程序
Apple UIWebView類
Microsoft WebBrowser控件
node.js
由于這些應(yīng)用處于開發(fā)階段，它們自身擁有一套規(guī)則或限制，并且與jQuery用在互聯(lián)網(wǎng)上的瀏覽器是不同的。雖然我們不能定期在這些非瀏覽器場(chǎng)景下測(cè)試，但我們?nèi)匀幌Ｍ牭?，你們?cè)谶@種情況下使用jQuery的感受。
jQuery 2.0有哪些的變化：
不再支持IE 6/7/8：如果在IE9/10版本中使用“兼容性視圖”模式也將會(huì)受到影響。
更輕更快：2.0版本文件與1.9.1相比小了12%。
可以構(gòu)建一個(gè)更小、更輕量的版本。
jQuery 2.0 API完全兼容jQuery 1.9 API。
此外，為了兌現(xiàn)承諾，減少API 1.x與2.x之間的分歧，我們將在未來一兩個(gè)月內(nèi)發(fā)布jQuery 1.10版本。
下載地址
http://code.jquery.com/jquery-2.0.0.min.js (minified, for production)
http://code.jquery.com/jquery-2.0.0.js (unminified, for testing)
【IT168 資訊】實(shí)時(shí)搜索是一種增強(qiáng)的搜索表單，它使用AJAX技術(shù)在同一視圖中提供結(jié)果或建議。這是一個(gè)常規(guī)的HTML輸入字段，它通過Chrome、Firefox或Safari等現(xiàn)代瀏覽器自動(dòng)完成搜索功能。
在應(yīng)用程序中使用實(shí)時(shí)搜索大大提高了網(wǎng)站的用戶友好性。無論使用什么后端技術(shù)— PHP、Java、Python、Ruby——JavaScript都是實(shí)現(xiàn)客戶端實(shí)時(shí)搜索功能的最佳選擇。
實(shí)時(shí)搜索一詞有點(diǎn)含糊不清，該術(shù)語沒有權(quán)威的定義。我遇到過一些標(biāo)簽為實(shí)時(shí)搜索的解決方案，但缺乏某些關(guān)鍵功能。
1、Ajax實(shí)時(shí)搜索
這是一個(gè)開源的實(shí)時(shí)搜索jQuery插件，具有良好的記錄，在Chrome、Firefox、Safari、Opera和IE8中均可完美呈現(xiàn)。 最令人印象深刻的功能是它可以以復(fù)制表的形式返回結(jié)果!
程序員可在官網(wǎng)或Github上了解更多信息(Github地址為：https://github.com/iranianpep/ajax-live-search)
2、Semantic UI搜索組件
如果程序員使用CSS框架，可以考慮Semantic UI。它有一個(gè)很酷的搜索組件，使程序員可以很容易地在表單上實(shí)現(xiàn)實(shí)時(shí)搜索。以下是示例代碼：
HTML：
JavaScript：
小但很強(qiáng)大，如果使用API設(shè)置選項(xiàng)，可以執(zhí)行自定義，例如將結(jié)果分組。同時(shí)，Semantic UI還專為React，Meteor，Ember和Angular設(shè)計(jì)了不同的風(fēng)格。
要了解更多信息，可以查看相關(guān)Demo或者查看官網(wǎng)(https://semantic-ui.com/modules/search.html)。
3、jQueryUI AutoComplete
這是一個(gè)jQuery小部件，它是jQuery UI庫的一部分。庫本身是一組精心設(shè)計(jì)的用戶界面組件，主題是建立在jQuery之上。
自動(dòng)填充帶有幾個(gè)模板，可以提供不同的實(shí)現(xiàn)。以下是簡(jiǎn)單示例：
HTML：
JavaScript：
4、DevBridge jQuery AutoComplete
DevBridge jQuery AutoComplete是一個(gè)小型JavaScript庫，可讓將常規(guī)文本輸入字段轉(zhuǎn)換為自動(dòng)填充建議框。它的API功能豐富、文檔良好，可以執(zhí)行相當(dāng)多的不同配置。
實(shí)現(xiàn)它很簡(jiǎn)單，看看這個(gè)例子：
HTML：
JavaScript(AJAX查找)：
JavaScript(本地查找)：
5. EasyAutocomplete
EasyAutocomplete是一個(gè)高度可定制的jQuery自動(dòng)完成插件，具有所有常用的功能。 它支持JSON，XML和純文本格式的本地和遠(yuǎn)程數(shù)據(jù)集。它還支持回調(diào)處理程序以及一些默認(rèn)樣式。
將這個(gè)插件分開的是它們的模板功能，模板用于定義結(jié)果視圖。程序員可以創(chuàng)建自定義模板或使用其中一種可用的內(nèi)置預(yù)設(shè)，其中包括：
1、描述模板
2、Icon 右/左模板
3、鏈接模板
使用此插件實(shí)現(xiàn)基本的自動(dòng)完成非常簡(jiǎn)單，請(qǐng)參閱以下示例代碼：
HTML：
JSON：
Javascript：
6、PixaBay jQuery-autoComplete
這是一個(gè)開源的自動(dòng)完成jQuery插件，您可以用于您的項(xiàng)目。最初該項(xiàng)目團(tuán)隊(duì)使用DevBridge的jQuery自動(dòng)填充功能。后來他們創(chuàng)建了一個(gè)fork，并開始更新它以滿足自己的需求。最終，他們對(duì)原始的源代碼進(jìn)行了多次迭代優(yōu)化，開源了這款超輕量級(jí)優(yōu)化插件。
該插件只有1.4 kB壓縮，支持多個(gè)數(shù)據(jù)源，回調(diào)和智能緩存系統(tǒng)。這是插件的一個(gè)示例實(shí)現(xiàn)：
JavaScript：
程序員要了解更多信息，可以去官網(wǎng)或Github上查看(github鏈接：https://github.com/Pixabay/jQuery-autoComplete)
7、Marco Polo
這是一個(gè)jQuery自動(dòng)完成插件，它具有高質(zhì)量的文檔、緩存、內(nèi)存選擇、自定義樣式、回調(diào)處理和WAI-ARIA支持。它需要jQuery v1.4.3或更高版本，并支持所有現(xiàn)代瀏覽器(甚至IE6!)。
實(shí)現(xiàn)Marco Polo很簡(jiǎn)單。這是一個(gè)示例實(shí)現(xiàn)：
HTML：
JSON(源數(shù)據(jù))：
Javascript：
程序員要了解更多信息，可以去官網(wǎng)或Github上查看(github鏈接：https://github.com/jstayton/jquery-marcopolo)
8、xDSoft Autocomplete Like Google
這是一個(gè)輕量級(jí)的自動(dòng)完成jQuery插件，具有本地和遠(yuǎn)程數(shù)據(jù)源支持。
以下是一個(gè)示例代碼：
JavaScript：
程序員要了解更多信息，可以去官網(wǎng)或Github上查看，自行百度即可。
9、 jQuery Typeahead Search
jQuery Typeahead Search是一個(gè)自動(dòng)完成插件，內(nèi)置深度自定義選項(xiàng)。它適用于所有來自IE8 +的現(xiàn)代瀏覽器，并支持多種內(nèi)部和外部AJAX回調(diào)。
如果查看演示頁面，你會(huì)發(fā)現(xiàn)許多不同代碼實(shí)現(xiàn)的示例。
10、Algolia Autocomplete
該JavaScript庫能夠在搜索框中添加快速且功能齊全的自動(dòng)填充菜單，它可以與Algolia搜索引擎結(jié)合使用。
它支持來自IE9的所有現(xiàn)代瀏覽器，可用作jQuery插件，Angular指令和獨(dú)立庫。除了常規(guī)功能，它還具有諸如防止XSS攻擊的安全功能。
11、ng-bootstrap Typeahead
如果在項(xiàng)目中使用Angular和Bootstrap，則應(yīng)使用ng-bootstrap框架。它具有一個(gè)類似于常規(guī)jQuery自動(dòng)完成插件的aTypeahead組件。
它支持模板，本地和遠(yuǎn)程數(shù)據(jù)集，以及通常的搜索功能。以下是維基百科搜索的部分代碼實(shí)現(xiàn)：
HTML：
Typescript：
12、React Autosuggest
你可以從標(biāo)題中知道這不是一個(gè)jQuery插件，但是它仍然是JavaScript。React Autosuggest是一個(gè)具有大量配置選項(xiàng)的開源庫。它符合移動(dòng)設(shè)備，符合WAI-ARIA，完全可定制，并且與Redux和Flux完美結(jié)合。
經(jīng)過恰當(dāng)?shù)呐渲?，程序員會(huì)得到一個(gè)真正的搜索插件，這是組件的部分代碼示例：
盡管源文檔說明了使用本地陣列進(jìn)行數(shù)據(jù)源的解決方案，但可以通過onSuggestionsFetchRequested()函數(shù)中的遠(yuǎn)程提取調(diào)用輕松地交換。
程序員要了解更多信息，可以去官網(wǎng)或Github上查看(github鏈接：https://github.com/moroshko/react-autosuggest)
13、W3Schools Ajax Live Search
如果希望避免依賴并使用純JavaScript實(shí)現(xiàn)解決方案，那么應(yīng)該嘗試使用w3schools提供的解決方案。
本示例中的后端使用PHP服務(wù)器。顯然，程序員可以用喜歡的服務(wù)器技術(shù)來代替。該代碼需要XML格式的數(shù)據(jù)，可以重寫代碼以接受JSON格式。
這個(gè)解決方案的偉大之處在于，它適用于所有現(xiàn)代瀏覽器和較早的IE5!
HTML：
Javascript：
14、WordPress Live Search
如果使用WordPress，程序員可以使用最少的編碼來實(shí)現(xiàn)實(shí)時(shí)搜索。只需要安裝和設(shè)置具有實(shí)時(shí)搜索功能的WordPress插件。最受歡迎的是Dave的WordPress Live Search，目前有超過10,000個(gè)活動(dòng)安裝。它與大多數(shù)主題兼容，具有多種可配置選項(xiàng)，并且易于集成，最小化。
總結(jié)
希望這份清單可以幫助程序員為項(xiàng)目選擇合適的實(shí)時(shí)搜索解決方案。根據(jù)您的經(jīng)驗(yàn)和項(xiàng)目環(huán)境，選擇比其他環(huán)境更容易實(shí)現(xiàn)和定制的方案。
沒有列出的其他有能力的解決方案，也許你可以在下面的評(píng)論中列出來。
【IT168 評(píng)論】jQuery得以流行的主要原因是可讓程序員輕松地選擇DOM元素，遍歷并修改其內(nèi)容。但這是在很多年前，那時(shí)程序員還被IE7困擾，ECMAScript 5還未面世。
在那之后，世界發(fā)生了翻天覆地的變化。瀏覽器已經(jīng)變得稱心如意，JavaScript出現(xiàn)了跨越式發(fā)展。這時(shí)，就有程序員站出來說，“我們還需要jQuery嗎?”恐怕你是不知道這六個(gè)原生DOM方法吧!看完，沒準(zhǔn)你會(huì)因?yàn)閖Query庫夠酷而愛上JavaScript!
1、append()
append方法執(zhí)行插入操作，即將節(jié)點(diǎn)添加到DOM樹。它將參數(shù)附加到被調(diào)用節(jié)點(diǎn)的子節(jié)點(diǎn)列表中，請(qǐng)考慮以下示例：
程序員或許會(huì)問：這與本機(jī)appendChild方法有什么不同呢?第一個(gè)區(qū)別是，anappend()可以一次使用多個(gè)參數(shù)，相應(yīng)的節(jié)點(diǎn)將被附加到子列表中。繼續(xù)代碼：
此外，一個(gè)參數(shù)可以是一個(gè)字符串。所以，使用appendChild()時(shí)，必須使用相當(dāng)詳細(xì)的語法：
parent.appendChild(document.createTextNode('just some text'))
與append()操作一樣短：
字符串轉(zhuǎn)換為Text節(jié)點(diǎn)，因此不會(huì)解析任何HTML：
這與jQuery方法形成對(duì)照，該方法分析了標(biāo)記字符串，并生成相應(yīng)節(jié)點(diǎn)插入到DOM樹中。
通常情況下，如果附加節(jié)點(diǎn)已存在于樹中，則首先從其舊位置移除：
append()和appendChild()之間的最后一個(gè)區(qū)別是后者返回附加節(jié)點(diǎn)，而前者返回undefined。
2、prepend()
prepend方法與append()非常相似。添加了子項(xiàng)，但是它們將被添加到調(diào)用該方法節(jié)點(diǎn)的子節(jié)點(diǎn)之前，就在第一個(gè)子節(jié)點(diǎn)之前：
方法的返回值為undefined。
3、after()
after方法是另一種插入方法，但它必須在子節(jié)點(diǎn)之后調(diào)用，也就是一個(gè)具有確定父節(jié)點(diǎn)的節(jié)點(diǎn)。節(jié)點(diǎn)作為相鄰的兄弟節(jié)點(diǎn)插入，如以下所示：
返回值是undefined。
4. before()
before()與after()類似，但是在子節(jié)點(diǎn)之前插入：
返回值同樣是undefined。
5. replaceWith()
假設(shè)程序員想替換一個(gè)DOM節(jié)點(diǎn)。當(dāng)然，他們可能有子節(jié)點(diǎn)，所以這個(gè)操作將替代整個(gè)DOM子樹。在介紹這套方法之前，將使用replaceChild()：
可以使用replaceWith以不冗長(zhǎng)的方式執(zhí)行相同的操作：
除了較短的語法之外，此方法的一個(gè)特點(diǎn)是接受幾個(gè)參數(shù)，允許用其他節(jié)點(diǎn)列表替換一個(gè)節(jié)點(diǎn)。繼續(xù)以前的交互式JavaScript會(huì)話：
方法的返回值也是undefined。
6、remove()
從DOM樹中刪除節(jié)點(diǎn)怎么辦?常用的方法是removeChild()。 如其名稱所示，它必須在被刪除節(jié)點(diǎn)n的父節(jié)點(diǎn)上調(diào)用：
然而，使用remove()，操作相當(dāng)簡(jiǎn)單：
本機(jī)與jQuery操作的不同之處在于如何處理附加到已刪除節(jié)點(diǎn)的事件偵聽器。 jQuery刪除與元素相關(guān)聯(lián)的所有綁定事件和數(shù)據(jù)，而本機(jī)方法不會(huì)觸及事件偵聽器：
這種行為更類似于jQuery detach方法。
瀏覽器支持
寫這篇文章時(shí)，這幾種方法所獲得的瀏覽器支持為：
prepend()>append()>before()>after()>replaceWith()
桌面瀏覽器如下：
1、谷歌瀏覽器從54版開始，全面支持上述方法。
2、Firefox從49版本開始，全面支持上述方法。
3、Safari從10版開始，全面支持上述方法。
4、Opera從41版開始，全面支持上述方法。
但是，請(qǐng)注意：Internet Explorer并不支持，Microsoft Edge也不支持(盡管對(duì)于Edge而言，該功能正在開發(fā)中)。remove方法得到了更廣泛的支持，Microsoft Edge自14版本以來就實(shí)現(xiàn)了。
insertAdjacentHTML
結(jié)束之前，還想說幾句insertAdjacentHTML。它提供類似于上面列出的前四種方法的插入操作：append()，prepend()，after()，before()，并且要添加的內(nèi)容使用HTML字符串指定：
請(qǐng)注意，我們必須使父節(jié)點(diǎn)成為另一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)才能使用該位置參數(shù)beforebegin andafterend。
幸運(yùn)的是，insertAdjacentHTML()隨處可見。
結(jié)論
看完這些方法之后，你認(rèn)為jQuery如何?還是因?yàn)槿狈E支持而打算放棄呢?程序員來說說你們的看法吧!萬一讓這個(gè)世界有點(diǎn)不同了呢!
【IT168 評(píng)論】jQuery表單向?qū)且粋€(gè)jQuery插件，與某種表格流協(xié)助表單創(chuàng)建(不用刷新頁面)。舉個(gè)例子，如果你有一個(gè)巨大的表格來輸入用戶數(shù)據(jù)，你可以使用表單向?qū)韺⑵浞殖梢幌盗邢嚓P(guān)步驟。這一優(yōu)點(diǎn)使用戶不會(huì)被超長(zhǎng)表單嚇到，并且當(dāng)用戶輸入信息時(shí)為其提供一些進(jìn)度指示。
在這篇文章中，我們列出了開發(fā)者最喜歡的六大jQuery表單向?qū)?，考量了它們的不同功能以及如何?chuàng)立你自己的向?qū)?。這不會(huì)是一個(gè)冗長(zhǎng)的列表，如果你正在尋找一個(gè)jQuery表單向?qū)?，這一定會(huì)為你指明正確的方向。
此列表在2017年8月30日更新，從列表中刪除了損壞和棄用的插件，并加入了新的插件來提供開發(fā)者要求的功能。
1. jQuery Steps
jQuery Steps是一個(gè)智能UI元素，使開發(fā)者可以很方便地創(chuàng)建向?qū)Ы缑妗＿@個(gè)插件將內(nèi)容分成區(qū)塊來形成更有結(jié)構(gòu)和順序 的頁面外觀。它有多種功能，例如、狀態(tài)保持(這會(huì)保存你每一步的輸入)以及每個(gè)區(qū)塊的過渡效果。它可以通過NuGet或者bower安裝，擁有內(nèi)容和功能豐富的API。
2. jQuery Smart Wizard
Smart Wizard是一個(gè)靈活且高度客戶化的jQuery步驟向?qū)Р寮蠦ootstrap支持。它很容易執(zhí)行，并且可以為你的表單、檢出屏幕、注冊(cè)步驟創(chuàng)建一個(gè)整潔而時(shí)髦的界面。它的功能包括主題支持(包括了多個(gè)主題)、URL導(dǎo)航、步驟選擇和動(dòng)態(tài)隱藏或關(guān)閉步驟。它可以通過npm、bower和composer安裝，擁有內(nèi)容和功能豐富的API。
3. formToWizard
這個(gè)小型插件可以用jQuery將任何網(wǎng)絡(luò)表格轉(zhuǎn)換成多步驟的向?qū)?，每個(gè)表格
京公網(wǎng)安備 11010502049343號(hào)