什么是jQuery插件

query插件就是一些人用jquery寫的一些工具，我們在調(diào)用時只需要用很少的代碼就能實現(xiàn)很好的效果，編寫jquery插件的目的主要是給已經(jīng)有的一系列方法或函數(shù)做一個封裝，以便在其他地方重復(fù)使用，方便后期維護(hù)和提高開發(fā)效率。

讓我們來看一下，一些常用的jQuery插件:

jQuery表單驗證插件：Validation

最常使用JavScript的場合就是表單的驗證，而jQuery作為一個優(yōu)秀的JavaScript庫，也提供了一個優(yōu)秀的表單驗證插件——Validation.Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球范圍內(nèi)不同項目的驗證，并得到了許多Web開發(fā)者的好評。作為一個標(biāo)準(zhǔn)的驗證方法庫，

Validation擁有如下優(yōu)點：

內(nèi)置驗證規(guī)則：擁有必填、數(shù)字、E-Mail、URL和信用卡號碼等19類內(nèi)置驗證規(guī)則

自定義驗證規(guī)則：可以很方便地自定義驗證規(guī)則

簡單強(qiáng)大的驗證信息提示：默認(rèn)了驗證信息提示，并提供自定義覆蓋默認(rèn)提示信息的功能

實時驗證：可以通過keyup或blur事件觸發(fā)驗證，而不僅僅在表單提交的時候驗證。

jQuery表單插件：Form

jQuery Form插件是一個優(yōu)秀的Ajax表單插件，可以非常容易地、無侵入地升級HTML表單以支持Ajax。jQuery有兩個核心方法——ajaxForm()和ajaxSubmit()，它們集合了從控制表單元素到?jīng)Q定如何管理提交進(jìn)程的功能。另外iain，

插件還包括其他的一些方法：

formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等

jQuery UI插件

jQuery UI源自于一個jQuery插件——Interface。Interface插件最早版本我1.2，只支持jQuery1.1.2的版本，后來有人對Interface的大部分代表基于jQuery1.2的API進(jìn)行重構(gòu)，并統(tǒng)一了API。由于改進(jìn)重大，因此版本號不是1.3而是直接跳到1.5，并且改名為jQuery UI。

jQuery UI主要分為3個部分，交互、微件和效果庫

交互。這里都是一些與鼠標(biāo) 交互相關(guān)的內(nèi)容。包括拖動，置放，縮放，選擇和排序等待。微件（Widget）中有部分是基于這些交互組建來制作的。此庫需要一個jQuery UI 核心庫——ui.core.js支持

微件。這里主要是一些界面的擴(kuò)展。里邊包括了手風(fēng)琴導(dǎo)航，自動完成，取色器，對話框，滑塊，標(biāo)簽，日歷，放大鏡，進(jìn)度條和微調(diào)控制器等待。此庫需要一個jQuery UI 核心庫——ui.core.js支持

效果庫。此庫用于提供豐富的動畫效果，讓動畫不再局限于animate()方法。效果庫有自己的一套核心即effects.core.js，無需jQuery的核心庫ui.core.js支持

動態(tài)綁定事件插件:livequery

Query的事件綁定功能使得jQuery代碼與HTML代碼能夠完全分離，這樣代碼的層次關(guān)系更加清晰，維護(hù)起來也更加簡單。然而對于動態(tài)加載到頁面的HTML元素，每次都需要重新綁定事件到這些元素上，十分不便。

一款新的插件由此產(chǎn)生，即livequery，可以利用它給相應(yīng)的DOM元素注冊時間或者觸發(fā)回調(diào)函數(shù)函數(shù)。不僅當(dāng)前選擇器匹配的元素會被綁定事件，而且后來通過JavaScript添加的元素都會被綁定事件。當(dāng)元素不再和選擇器匹配時，livequery會自動取消事件注冊，使得開發(fā)者不再需要關(guān)注HTML元素的來源，只需要關(guān)注如何編寫其綁定的事件即可。

通過jQuery選擇器選擇一個DOM元素，livequery插件會實時地在整個DOM范圍將其持久化。這意味著無論元素是先前存在的還是后來動態(tài)加載的，事件都會被綁定，就像是CSS給元素添加樣式一樣。同時，這款插件幾乎在沒占用什么資源的情況下就做到了這些功能。

以上就是什么是jQuery插件的詳細(xì)內(nèi)容，更多請關(guān)注其它相關(guān)文章！

更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦！

abel插件、webpack插件、vue-cli插件，為啥這么多的優(yōu)秀框架都是使用插件系統(tǒng)？插件化架構(gòu)是什么？帶來了什么好處？可以應(yīng)用到什么場景呢？

1. 插件化架構(gòu)定義

插件化架構(gòu)又稱微核架構(gòu)，指的是軟件的內(nèi)核相對較小，主要功能和業(yè)務(wù)邏輯都通過插件實現(xiàn)。插件化架構(gòu)一般有兩個核心的概念：內(nèi)核和插件。

內(nèi)核（pluginCore）通常只包含系統(tǒng)運行的最小功能；
插件（plugin）則是互相獨立的模塊，一般會提供單一的功能。

內(nèi)核一般會將要完成的所有業(yè)務(wù)進(jìn)行抽象，抽象出最小粒度的基礎(chǔ)接口，供插件方來調(diào)用。這樣，插件開發(fā)的效率將會極大地提高。比方說，瀏覽器就是一個典型的插件化架構(gòu)，瀏覽器是內(nèi)核，頁面是插件，這樣通過不同的URL地址加載不同的頁面，來提供非常豐富的功能。而且，我們開發(fā)網(wǎng)頁時候，瀏覽器會提供很多API和能力，這些接口通過 window來掛載，比如，DOM、BOM、Event、Location等等。

設(shè)計一個完善的插件化架構(gòu)的系統(tǒng)，包含三要素：

plugCore：插件內(nèi)核，提供插件運行時，管理插件的加載、運行、卸載等生命周期（類比瀏覽器）；
pluginAPI：插件運行時需要的基礎(chǔ)接口（類比瀏覽器例子，相當(dāng)于window）；
plugin：一系列特定功能的獨立模塊（類比瀏覽器例子，相當(dāng)于不同的網(wǎng)頁）。

2. 插件化架構(gòu)的實踐

我們將從plugCore、 pluginAPI和plugin三要素，來解析jQuery、Babel和Vue CLI這三大優(yōu)秀的開源庫其插件化架構(gòu)的實踐。

2.1 jQuery的插件化架構(gòu)

jQuery 是一個 JavaScript 庫，極大地簡化了JavaScript 編程，用更少的代碼完成更多工作。早期瀏覽器的標(biāo)準(zhǔn)不統(tǒng)一，開發(fā)網(wǎng)頁需要兼容不同瀏覽器的用戶使用是一件十分痛苦的事情。jQuery在適配了不同瀏覽器的差異的基礎(chǔ)上提供了更加完善易用API，供前端開發(fā)人員完成網(wǎng)頁編程，使用jQuery編寫的網(wǎng)頁，在一套代碼下也可以在不同廠商的瀏覽器上正常運行。在 MV* 框架流行之前，jQuery是絕對的扛霸子。jQuery是可擴(kuò)展的，其擁有完善的插件體系，網(wǎng)頁開發(fā)所需要的各種插件在其生態(tài)都可以找到。我們解析一下jQuery插件體系。

插件定義：

特別說明：$.fn=jQuery.protype(插件精髓)。jQuery的插件機(jī)制通過原型鏈來掛載。

插件機(jī)制執(zhí)行過程

demo 示例

$app便可以在原型鏈上查找到myPlugin：

從三要素來總結(jié)：

pluginCore：通過原型鏈賦值來擴(kuò)展不同的插件，再獲得jQuery實例后可以被調(diào)用。
pluginAPI：jQuery包的核心接口，（jQuery依靠其優(yōu)異的Api取勝）
plugin：無限制，可以是JavaScript的類型，一般是實現(xiàn)具體功能的模塊，比如，日期選擇器等。

2.2 Babel的插件化架構(gòu)

Babel 是一個工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。在代碼轉(zhuǎn)換的過程中會涉及許多特性和語法的轉(zhuǎn)換，而且ECMAScript的提案總是不斷地更新。如何組織大量（不斷增加）的轉(zhuǎn)換規(guī)則呢？我們來看看 Babel的工作原理。

Babel轉(zhuǎn)換源碼，分為三個步驟：

解析（parse）：進(jìn)行詞法分析（Lexical Analysis）和語法分析（Syntactic Analysis）以生成抽象語法樹（AST）；
轉(zhuǎn)換 (transform)：遍歷AST中每個節(jié)點并進(jìn)行相應(yīng)的轉(zhuǎn)換操作，該過程通過使用不同的插件來實現(xiàn)各種特性和語法的轉(zhuǎn)換；
生成 (generate)：根據(jù)AST生成目標(biāo)代碼。

Babel在AST轉(zhuǎn)換的過程（即上圖的第2步），便使用插件化架構(gòu)，下面將會詳細(xì)講解這個轉(zhuǎn)換過程的插件化架構(gòu)的使用。

插件定義：

插件是一個函數(shù)，返回值是一個包含visitor的對象。插件定義的部分概念說明：

name：插件名
pluginAPI: 插件運行時傳入的API
visitor: 是一個對象，對象的key是AST的每節(jié)點的類型，對象的值是一個函數(shù)，AST轉(zhuǎn)換的過程便在這里發(fā)生的。
nodePath：是一個AST的節(jié)點的實例對象，詳細(xì)可以參考：@babel/parser/src/parser/node.js [1]，其中， type字段 : 該節(jié)點的類型，常見類型：VariableDeclaration（變量聲明）、VariableDeclarator（變量聲明表達(dá)式）、ArrowFunctionExpression（箭頭函數(shù)表達(dá)式）等等，詳細(xì)可以參考@babel/types [2]。

（筆者認(rèn)為pluginAPI還應(yīng)包括nodePath，因為，每個節(jié)點實例除了語法和詞法描述，還包含需求語法間的轉(zhuǎn)換方法）

插件示例

箭頭函數(shù)轉(zhuǎn)換成普通函數(shù)的插件：@babel/plugin-transform-arrow-functions [3]源碼：

插件的執(zhí)行思路：

第一步，執(zhí)行該插件，獲取到包含visitor對象；
第二步，ATS遍歷節(jié)點，檢測nodePath的type==='ArrowFunctionExpression'，尋找到vistor對象的中key為 ArrowFunctionExpression的函數(shù)；
第三步，將nodePath傳入該函數(shù)進(jìn)行調(diào)用（AST在這步被修改）；

單個插件的執(zhí)行思路很明確了，那么在ATS遍歷過程，怎么做到多個插件一起工作呢？

Babel在轉(zhuǎn)換源碼過程中，插件化架構(gòu)的工作流程是這樣的：

第一步：通過解析babel的配置文件（或者命令行--plugins參數(shù)），獲取Babel配置的所有插件的描述；
第二步，將插件的require進(jìn)內(nèi)存，獲得插件函數(shù)，并執(zhí)行插件函數(shù)，獲取到多個包含vistor字段對象；（詳細(xì)邏輯：@babel/core/src/config/full.js [4]）
第三步，將多個包含vistor字段對象整合成一個大的visitor源碼展示（詳細(xì)邏輯：@babel/core/src/transformation/index.js [5]）：

合并后的visitor對象：

visitor的對象中的值變成了 Array<function(nodePath)>

第四步，AST遍歷時，每個節(jié)點根據(jù) NodeType，來獲取 visitor[NodeType]，并依次執(zhí)行。

從三要素來總結(jié)：

pluginCore：插件加載并整合（即vistor合并)，AST遍歷期間是調(diào)用查找vistor[NodeType]并依次調(diào)用；
pluginAPI：nodePath，提供不同類型節(jié)點的接口來轉(zhuǎn)換AST節(jié)點；
plugin：visitor[NodeType]=function(nodepath)。

2.3 vue-cli的插件化架構(gòu)

Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。CLI插件是向你的 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成、單元測試和 end-to-end 測試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內(nèi)建插件) 或 vue-cli-plugin- (社區(qū)插件) 開頭，非常容易使用。下面，我們將會解析cli插件的定義、執(zhí)行、安裝等過程。

插件定義

插件必須是vue-cli-plugin-命名的npm包，并且目錄結(jié)構(gòu)也是要嚴(yán)格遵循文件命名來定義。

注意：@vue/cli-service [6],會通過項目根目錄下package.json中dependencies和devDependencies中定義的 npm包中符合插件命名規(guī)范的 npm包作為項目的插件。

文件命名和內(nèi)容說明：

generator.js：會在插件被添加時執(zhí)行，可以安裝npm包、修改項目源碼等功能；

prompts.js：所有的對話邏輯都存儲在 prompts.js 文件中。對話內(nèi)部是通過 inquirer [7] 實現(xiàn)，在調(diào)用其獲得安裝選項結(jié)果，并在 generator.js調(diào)用時作為參數(shù)存入；

index.js：Service插件的入口，@vue/cli-service [8]啟動時被執(zhí)行

詳情可以去看Vue Cli 插件開發(fā)指南 [9]

我們把Vue CLI的插件執(zhí)行分成兩種情況：

第一種：插件未安裝，插件被添加的時候調(diào)用（prompts.js + generator.js）
第二種：插件已安裝，插件系統(tǒng)啟動時被執(zhí)行（index.js）

第一種安裝流程

相比Babel的手動安裝添加插件方式，Vue CLI的插件系統(tǒng)提供命令行的安裝方式就顯得很方便了。我們看看Vue Cli插件系統(tǒng)時怎么實現(xiàn)一行命令添加插件的功能。

安裝流程的執(zhí)行思路如下：

第一步：從命令行參數(shù)解析出插件名，使用npm（yarn）install vue-cli-plugin-xxx 安裝插件，源碼位置：@vue/cli/lib/add.js [10]
第二步：require('vue-cli-plugin-xxx/prompts'),并獲取用戶安裝是選項結(jié)果pluginOptions，源碼位置：@vue/cli/lib/invoke.js [11]

第三步：使用pluginName和pluginOptions作為參數(shù)構(gòu)成出Generator [12]對象的實例

第四步：執(zhí)行g(shù)enerator.generate方法。這步包括了三個關(guān)鍵步驟：1）require(vue-cli-plugin-xxx/generator)，獲得插件的執(zhí)行函數(shù)；2）構(gòu)建GeneratorAPI（即pluginAPI）；3）調(diào)用generator.js導(dǎo)出函數(shù)。

詳細(xì)代碼：@vue/cli/lib/Generator.js [113]
第五步：將插件的參數(shù)添加到vue.config.js文件中。

第二種運行流程

插件運行流程是由@vue/cli-service [14]這個插件系統(tǒng)定義的，這里的調(diào)用插件有兩種：

第一種內(nèi)置插件@vue/cli-service的命令和配置相關(guān)，將系插件統(tǒng)功能拆分出多個內(nèi)置插件，在插件系統(tǒng)中默認(rèn)調(diào)用）；
第二種項目插件，package.json 中定義的npm包名符合插件命名規(guī)范）。

插件運行邏輯很簡單：

這兩個流程的 pluginAPI是不一樣的。

安裝流程：@vue/cli/lib/GeneratorAPI [15]
運行流程：@vue/cli-service/lib/PluginAPI [16]

從三要素來總結(jié)：

1）安裝流程

pluginCore：@vue/cli [17]通過命令行參數(shù)獲得插件包名，然后安裝插件的npm包，并執(zhí)行prompts.js 獲得用戶安裝選項結(jié)果，然后，使用選項結(jié)果和generator.js作為參數(shù)構(gòu)造出generator，并在調(diào)用generator.generate中執(zhí)行generator.js函數(shù)；
pluginAPI：GeneratorAPI [18]，提供了源碼修改、npm包管理、模版文件生成等功能；
plugin：由prompts.js和generator.js組成，解決某種能力植入項目時，要處理的依賴。

2）運行流程

pluginCore：@vue/cli-service [19]，通過package.json中獲得項目插件后，與系統(tǒng)內(nèi)置插件合并，最后依次執(zhí)行；
pluginApI：PluginAPI [20]，提供webpack配置修改和命令管理的能力；
plugin：index.js文件，在不同命令下進(jìn)行工作。

一個插件系統(tǒng)是可以不多個插件類型，并且插件系統(tǒng)通過命令安裝插件的實現(xiàn)，用戶在使用插件系統(tǒng)時添加插件也是十分方便的。

3. 插件化架構(gòu)的應(yīng)用

3.1 應(yīng)用場景

通過上述的實例，總結(jié)處理插件架構(gòu)的應(yīng)用場景。

第一種：富pluginAPI場景：代碼在多種場景中運行，需要抹平場景中差異。（jQuery）；
第二種：富plugin場景，插件系統(tǒng)，可預(yù)期需求會越來越多，適合通過更多的插件來簡化系統(tǒng)的代碼量（Babel）
第三種：富pluginCore和pluginAPI場景，插件系統(tǒng)本身非常復(fù)雜，需要對開發(fā)人員要求極高，這時候，將復(fù)雜的工作放到內(nèi)核和中pluginApi實現(xiàn)，剩下大部分的簡單的編碼工作留給插件方實現(xiàn)，插件方借助pluginApi也可以快速完成業(yè)務(wù)開發(fā)（Vue CLI）

3.2 發(fā)展方向

通過建立一個插件標(biāo)準(zhǔn)，將研發(fā)流程沉淀的能力進(jìn)行插件化編程，整個公司通過使用一套的插件系統(tǒng)（中臺），這樣意味著，我們不用重復(fù)造業(yè)務(wù)輪子，團(tuán)隊和企業(yè)可以持續(xù)積累自己的插件生態(tài)，讓軟件開可以像汽車等工業(yè)制造一樣，打造一條標(biāo)準(zhǔn)化裝配的流水線。

者：lzg9527

轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000022956602

在線咨詢

上一篇：「老葉HTML入門筆記」03絕對地址與相對地址
下一篇：PHP動態(tài)網(wǎng)站設(shè)計試題

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

什么是jQuery插件

1. 插件化架構(gòu)定義

2. 插件化架構(gòu)的實踐

2.1 jQuery的插件化架構(gòu)

插件定義：

插件機(jī)制執(zhí)行過程

demo 示例

從三要素來總結(jié)：

2.2 Babel的插件化架構(gòu)

插件定義：

插件示例

從三要素來總結(jié)：

2.3 vue-cli的插件化架構(gòu)

插件定義

第一種 安裝流程

第二種 運行流程

從三要素來總結(jié)：

3. 插件化架構(gòu)的應(yīng)用

3.1 應(yīng)用場景

3.2 發(fā)展方向

您的項目需求

第一種安裝流程

第二種運行流程