jQuery自定義插件開發(fā)實踐

# jQuery自定義插件開發(fā)實踐 ## JavaScript插件是什么?
我們寫代碼，有一個很重要的原則就是“避免重復造輪子”，我們得看一下是否需要將一部分經(jīng)常重復的代碼抽象出來，寫到一個單獨的文件中便于以后再次使用。所謂JavaScript插件就是那些已經(jīng)寫好的可以極大提高自己代碼質(zhì)量或者頁面展示效果的JavaScript文件(JavaScript代碼片段/函數(shù))，之所以叫做插件，那么就是開箱即用，或者我們只要添加一些配置參數(shù)就可以達到我們需要的結果。 ## JavaScript插件的思想 * 封裝復用 ”復用”是使用JavaScript插件的目的，“封裝”是實現(xiàn)JavaScript插件的方法 * 開箱即用 所謂“開箱即用”，指的就是插件引入到工程中之后，直接使用或者配置一些參數(shù)就可以達到我們需要的結果 * 可插拔 插件是以JavaScript文件的形式提供的，使用的時候引入JavaScript文件，不需要的時候注釋調(diào)用代碼即可，實現(xiàn)可插拔 * 易維護插件是被封裝的插件，一次封裝多處使用，需要修改或者變更的時候，可以直接修改插件本身，易于維護 ## 關于jQuery插件 jQuery是一款非常優(yōu)秀的開源JavaScript框架，封裝JavaScript插件時不僅可以基于原生的JavaScript實現(xiàn)，也可以更方便地基于jQuery框架實現(xiàn)。
要說jQuery最為成功的地方，筆者認為是它的可擴展性吸引了全球眾多的開發(fā)者為其開發(fā)插件，從而建立起了一個jQuery生態(tài)系統(tǒng)。相信讀者肯定也使用或者熟悉了不少jQuery插件，比如jQuery通知插件Noty，比如非常有名的jQuery zTree樹插件、jQuery上傳插件Uploadify、操作Cookie的jQuery-Cookie插件、還有很多其他非常炫酷的插件等等。毫不夸張地說，jQuery插件對Web應用產(chǎn)生了重大的影響。 開發(fā)人員如果想將能力上升一個臺階，那么編寫一個屬于自己的jQuery插件是個不錯的選擇，接下來筆者會介紹如何開發(fā)自定義jQuery插件，并示例給讀者。 ## jQuery插件開發(fā)模式 所謂模式，說白了就是套路，但這種套路是前人優(yōu)秀開發(fā)經(jīng)驗的總結，學習并使用模式可以讓我們更快、更好、更優(yōu)雅的編寫、組織代碼。
jQuery提供了三種插件開發(fā)模式，基于這三種模式我們可以自定義封裝jQuery插件
三種模式如下：
* **模式一：**通過$.extend()來擴展jQuery
* **模式二：**通過$.fn 向jQuery添加新的方法
* **模式三：**通過$.widget()應用jQuery UI的部件工廠方式創(chuàng)建 第三種模式是用于開發(fā)jQuery高級部件的，該模式開發(fā)出來的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)等，一般使用場景下用不到這種模式，本文不再細說。
第一種模式簡單些，僅僅是在jQuery命名空間或者可以理解為在jQuery身上添加了一個靜態(tài)方法而已，所以我們調(diào)用通過\$.extend()開發(fā)的插件(添加的函數(shù))時，我們直接通過\$符號調(diào)用(\$.myFunction())而不需要選中DOM元素(\$("#id").myFunction())，注意這里的myFunction指的是你自己定義的函數(shù)名。
請看下面的例子 ```html ```
運行結果如下：

如上就是基于\$.extend()模式自定義的一個簡單jQuery插件，這個插件給jQuery擴展了一個sayWelcome函數(shù)，然后可以通過\$直接調(diào)用。如同讀者所見，基于此模式開發(fā)一些輔助性的功能插件還是比較方便的，但這種模式?jīng)]有辦法利用jQuery強大選擇器帶來的便利，如果要處理DOM元素并將插件較好地運用在所選擇的元素身上，那么還是需要使用第二種模式來開發(fā)jQuery插件，我們通常見到或者使用的插件大多也是通過這種模式開發(fā)的。
接下來，筆者基于第二種模式來開發(fā)一個自定義的jQuery高亮插件并將其命名為：jqHighlight，該插件支持在頁面某個元素內(nèi)搜索某個關鍵詞并高亮關鍵詞，高亮樣式可以重新定義(高亮字體大小、高亮背景色)，支持右上角標顯示(角標可用于顯示解釋內(nèi)容或者錯誤詞匯所對應的正確詞匯等)，右上角標樣式也可以重新定義。
## 示例：開發(fā)自定義jQuery高亮插件jqHighlight * **jqHighlight插件效果實現(xiàn)思路** 1)關鍵詞搜索及高亮實現(xiàn)思路遍歷對象范圍內(nèi)的各個DOM元素節(jié)點，使用正則表達式匹配，若匹配到關鍵詞，則在關鍵詞外包裝一層標簽，后續(xù)高亮效果的實現(xiàn)都是對標簽的操作 2)右上角標實現(xiàn)思路 在包裝關鍵詞的標簽內(nèi)填充一個標簽，通過樣式控制標簽顯示在高亮關鍵詞的右上角 - **定義插件** jqHighlight插件實際包括兩部分：高亮和清除高亮。所以可以認為該插件由兩個小插件組成，定義如下 ```js // 高亮 $.fn.jqHighlight = function (words, options) { // 插件實現(xiàn) }; // 清除高亮 $.fn.jqHighlightClear = function (options) { // 插件實現(xiàn) }; ``` jqHighlight可以傳入兩個參數(shù)，words參數(shù)是需要搜索的關鍵詞，options是設置自定義參數(shù)的對象(后續(xù)會介紹到);jqHighlightClear主要用于清除高亮效果 - **插件中自定義參數(shù)的處理** 一般情況下，在插件內(nèi)部設置默認參數(shù)，實際使用的時候，如果傳入有自定義參數(shù)就覆蓋插件的默認參數(shù)，使用$.extend將自定義參數(shù)和默認參數(shù)合并 ```js var settings = { className: 'highlight', // 命中關鍵詞的顯示樣式，傳入css樣式類名，可以在插件外部定義該樣式的具體屬性，比如高亮字體大小、高亮背景色 supClassName:'sup', // 右上角標css樣式類名 caseSensitive: false, // 搜索關鍵詞時是否大小寫敏感，默認不敏感 suptext:'' // 標注內(nèi)容，比如搜索錯別字的時候可以在右上角標顯示正確的字 }; // extend方法會把options中重新定義的參數(shù)覆蓋到settings中，形成新的settings $.extend(settings, options); ``` - **jqHighlight插件代碼片段一** ```js $.fn.jqHighlight = function (words, options) { var settings = { className: 'highlight', // 命中關鍵詞的顯示樣式，傳入css樣式類名，可以在插件外部定義 該樣式的具體屬性，比如高亮字體大小、高亮背景色 supClassName:'sup', // 右上角標css樣式類名 caseSensitive: false, // 搜索關鍵詞時是否大小寫敏感，默認不敏感 suptext:'' // 標注內(nèi)容，比如搜索錯別字的時候可以在右上角標顯示正確的字 }; // 使用自定義參數(shù)覆蓋默認參數(shù) $.extend(settings, options); if (words.constructor === String) { words = [words]; } // 過濾搜索關鍵詞中的空元素 words = $.grep(words, function(word, i){ return word != ''; }); // 將搜索關鍵詞中的特殊字符轉(zhuǎn)義 words = $.map(words, function(word, i) { return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); }); if (words.length == 0) { return this; }; // 根據(jù)搜索時是否配置了大小寫敏感參數(shù)調(diào)整正則表達式 var flag = settings.caseSensitive ? "" : "i"; var pattern = "(" + words.join("|") + ")"; var re = new RegExp(pattern, flag); // 使用JavaScript正則表達式在對象范圍內(nèi)的元素中搜索關鍵詞，搜索到之后進行高亮及右上角標處理 return this.each(function () { // 使用第一種模式jQuery.extend的方式將jqHighlight插件的核心處理邏輯封裝為了輔助插件， 見后續(xù)介紹
$.highlight(this, re,settings.className, settings.supClassName,settings.suptext); }); }; ``` - **jqHighlight插件代碼片段二** 使用第一種模式jQuery.extend的方式將jqHighlight插件的核心處理邏輯封裝為了輔助插件，如下 ```js $.extend({ highlight: function (node, re, className,supClassName,suptext) { // DOM元素的節(jié)點屬性，3代表元素或?qū)傩灾械奈谋緝?nèi)容 if (node.nodeType === 3) { var match = node.data.match(re); if (match) { var highlight = document.createElement('span'); highlight.className = className || 'highlight'; var wordNode = node.splitText(match.index); wordNode.splitText(match[0].length); var wordClone = wordNode.cloneNode(true); highlight.appendChild(wordClone); wordNode.parentNode.replaceChild(highlight, wordNode); // 根據(jù)是否有傳入右上角標內(nèi)容添加右上角標顯示 if(suptext != null && $.trim(suptext).length>0) { $(highlight).css("position","relative"); $(highlight).append("" + suptext + ""); } } // 若沒有找到文本內(nèi)容，鉆取處理 } else if ((node.nodeType === 1 && node.childNodes) && !/(script|style)/i.test(node.tagName) && !(node.tagName === 'SPAN' && node.className === className)) { for (var i = 0; i < node.childNodes.length; i++) { $.highlight(node.childNodes[i],re,className,supClassName,suptext); } } } }); ``` - **jqHighlightClear插件代碼片段** 高亮效果生成以后，有時我們需要清除高亮效果，只要找到我們在做高亮效果時包裝的span標簽，然后把span標簽remove掉保留其中的內(nèi)容就可以了。實現(xiàn)代碼如下 ```js $.fn.jqHighlightClear = function (options) { var settings = { className: 'highlight' }; jQuery.extend(settings, options); return this.find("span." + settings.className).each(function () { var parent = this.parentNode; parent.replaceChild(this.firstChild, this); parent.normalize(); }); }; ``` **注意：**jqHighlightClear使用時需要根據(jù)情況傳入className參數(shù)，這個參數(shù)應當和使用jqHighlight時設置的className屬性保持一致，如果默認都默認即可，因為你的頁面元素中可能用于其他用途的span，而我們要remove的是我們包裝上去的擁有特定className的那些，remove時會右上角標會一并清除。 - **測試代碼** **Html** ```html

黑馬程序員是傳智播客旗下高端IT教育品牌，以務實、質(zhì)量、創(chuàng)新、分享、專注、責任為核心價值觀，致力于服務各大軟件企業(yè)，解決當前軟件開發(fā)技術飛速發(fā)展，而企業(yè)招不到優(yōu)秀人才的困擾。目前，“中關村黑馬程序員訓練營”已成長為行業(yè)“學員質(zhì)量好、課程內(nèi)容深、企業(yè)滿意”的移動開發(fā)高端訓練基地，并被評為中關村軟件園重點扶持人才企業(yè)。黑馬程序員不僅著重培養(yǎng)學員的基礎理論知識，更注重培養(yǎng)項目實施管理能力，并密切關注技術革新，不斷引入先進的技術，研發(fā)更新技術課程，確保學員進入企業(yè)后不僅能獨立從事開發(fā)工作，更能給企業(yè)帶來新的技術體系和理念。黑馬程序員的學員多為大學畢業(yè)后，想從事IT行業(yè)，但各方面條件還不成熟的年輕人。黑馬程序員的學員篩選制度非常嚴格，包括了嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、品德測試等。百里挑一的殘酷篩選制度確保了學員質(zhì)量，并降低了企業(yè)的用人風險。一直以來，黑馬程序員的教學研發(fā)團隊一直致力于打造精品課程資源，不斷在產(chǎn)、學、研三個層面創(chuàng)新自己的職教理念與教學方針，并集中黑馬程序員的優(yōu)勢力量，有針對性的出版了計算機系列教材30多冊，制作了配套教學視頻數(shù)十套，并發(fā)表各類技術文章數(shù)百篇。 黑馬程序員分享的免費視頻教程累計時長10余萬小時;率先在業(yè)內(nèi)推出免費公開課，現(xiàn)已經(jīng)開設700多節(jié);印制現(xiàn)有學科的光盤，并且面向全國范圍內(nèi)免費給學員發(fā)放，累計發(fā)出去的光盤數(shù)量已經(jīng)突破300萬，通過免費提供的資源已經(jīng)影響了近5000萬IT愛好者。 黑馬程序員始終秉承“為莘莘學子改變命運而講課，為千萬學生少走彎路而著書”的使命，以技術視角關注IT產(chǎn)業(yè)發(fā)展，以深度分享推進產(chǎn)業(yè)技術成長，致力于弘揚技術創(chuàng)新，倡導分享、開放和協(xié)作，努力打造高質(zhì)量的IT人才服務平臺。