整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
query插件就是一些人用jquery寫的一些工具，我們在調用時只需要用很少的代碼就能實現很好的效果，編寫jquery插件的目的主要是給已經有的一系列方法或函數做一個封裝，以便在其他地方重復使用，方便后期維護和提高開發效率。
讓我們來看一下，一些常用的jQuery插件:
jQuery表單驗證插件：Validation
最常使用JavScript的場合就是表單的驗證，而jQuery作為一個優秀的JavaScript庫，也提供了一個優秀的表單驗證插件——Validation.Validation是歷史最悠久的jQuery插件之一，經過了全球范圍內不同項目的驗證，并得到了許多Web開發者的好評。作為一個標準的驗證方法庫，
Validation擁有如下優點：
內置驗證規則：擁有必填、數字、E-Mail、URL和信用卡號碼等19類內置驗證規則
自定義驗證規則：可以很方便地自定義驗證規則
簡單強大的驗證信息提示：默認了驗證信息提示，并提供自定義覆蓋默認提示信息的功能
實時驗證：可以通過keyup或blur事件觸發驗證，而不僅僅在表單提交的時候驗證。
jQuery表單插件：Form
jQuery Form插件是一個優秀的Ajax表單插件，可以非常容易地、無侵入地升級HTML表單以支持Ajax。jQuery有兩個核心方法——ajaxForm()和ajaxSubmit()，它們集合了從控制表單元素到決定如何管理提交進程的功能。另外iain，
插件還包括其他的一些方法：
formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等
jQuery UI插件
jQuery UI源自于一個jQuery插件——Interface。Interface插件最早版本我1.2，只支持jQuery1.1.2的版本，后來有人對Interface的大部分代表基于jQuery1.2的API進行重構，并統一了API。由于改進重大，因此版本號不是1.3而是直接跳到1.5，并且改名為jQuery UI。
jQuery UI主要分為3個部分，交互、微件和效果庫
交互。這里都是一些 與鼠標 交互相關的內容。包括拖動，置放，縮放，選擇 和排序 等待。微件（Widget）中有部分是基于這些交互組建來制作的。此庫需要 一個jQuery UI 核心庫——ui.core.js支持
微件。這里主要是一些界面的擴展。里邊包括 了手風琴導航，自動完成，取色器，對話框，滑塊，標簽 ，日歷，放大鏡，進度條和微調控制器等待。此庫需要 一個jQuery UI 核心庫——ui.core.js支持
效果庫。此庫用于提供豐富的動畫效果，讓動畫不再局限于animate()方法。效果庫有自己的一套核心即effects.core.js，無需jQuery的核心庫ui.core.js支持
動態綁定事件插件:livequery
Query的事件綁定功能使得jQuery代碼與HTML代碼能夠完全分離，這樣代碼的層次關系更加清晰，維護起來也更加簡單。然而對于動態加載到頁面的HTML元素，每次都需要重新綁定事件到這些元素上，十分不便。
一款新的插件由此產生，即livequery，可以利用它給相應的DOM元素注冊時間或者觸發回調函數函數。不僅當前選擇器匹配的元素會被綁定事件，而且后來通過JavaScript添加的元素都會被綁定事件。當元素不再和選擇器匹配時，livequery會自動取消事件注冊，使得開發者不再需要關注HTML元素的來源，只需要關注如何編寫其綁定的事件即可。
通過jQuery選擇器選擇一個DOM元素，livequery插件會實時地在整個DOM范圍將其持久化。這意味著無論元素是先前存在的還是后來動態加載的，事件都會被綁定，就像是CSS給元素添加樣式一樣。同時，這款插件幾乎在沒占用什么資源的情況下就做到了這些功能。
以上就是什么是jQuery插件的詳細內容，更多請關注其它相關文章！
更多技巧請《轉發 + 關注》哦！
abel插件、webpack插件、vue-cli插件，為啥這么多的優秀框架都是使用插件系統？插件化架構是什么？帶來了什么好處？可以應用到什么場景呢？
插件化架構又稱微核架構，指的是軟件的內核相對較小，主要功能和業務邏輯都通過插件實現。插件化架構一般有兩個核心的概念：內核和插件。
內核一般會將要完成的所有業務進行抽象，抽象出最小粒度的基礎接口，供插件方來調用。這樣，插件開發的效率將會極大地提高。比方說，瀏覽器就是一個典型的插件化架構，瀏覽器是內核，頁面是插件，這樣通過不同的URL地址加載不同的頁面，來提供非常豐富的功能。而且，我們開發網頁時候，瀏覽器會提供很多API和能力，這些接口通過 window來掛載， 比如，DOM、BOM、Event、Location等等。
設計一個完善的插件化架構的系統，包含三要素：
我們將從plugCore、 pluginAPI和plugin三要素，來解析jQuery、Babel和Vue CLI這三大優秀的開源庫其插件化架構的實踐。
jQuery 是一個 JavaScript 庫，極大地簡化了JavaScript 編程，用更少的代碼完成更多工作。早期瀏覽器的標準不統一，開發網頁需要兼容不同瀏覽器的用戶使用是一件十分痛苦的事情。jQuery在適配了不同瀏覽器的差異的基礎上提供了更加完善易用API，供前端開發人員完成網頁編程，使用jQuery編寫的網頁，在一套代碼下也可以在不同廠商的瀏覽器上正常運行。在 MV* 框架流行之前，jQuery是絕對的扛霸子。jQuery是可擴展的，其擁有完善的插件體系，網頁開發所需要的各種插件在其生態都可以找到。我們解析一下jQuery插件體系。
特別說明：$.fn=jQuery.protype(插件精髓)。jQuery的插件機制通過原型鏈來掛載。
$app便可以在原型鏈上查找到myPlugin：
Babel 是一個工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。在代碼轉換的過程中會涉及許多特性和語法的轉換，而且ECMAScript的提案總是不斷地更新。如何組織大量（不斷增加）的轉換規則呢？我們來看看 Babel的工作原理。
Babel轉換源碼，分為三個步驟：
Babel在AST轉換的過程（即上圖的第2步），便使用插件化架構，下面將會詳細講解這個轉換過程的插件化架構的使用。
插件是一個函數，返回值是一個包含visitor的對象。插件定義的部分概念說明：
（筆者認為pluginAPI還應包括nodePath，因為，每個節點實例除了語法和詞法描述，還包含需求語法間的轉換方法）
箭頭函數轉換成普通函數的插件：@babel/plugin-transform-arrow-functions [3]源碼：
插件的執行思路：
單個插件的執行思路很明確了，那么在ATS遍歷過程，怎么做到多個插件一起工作呢？
Babel在轉換源碼過程中，插件化架構的工作流程是這樣的：
合并后的visitor對象：
visitor的對象中的值變成了 Array<function(nodePath)>
Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統。CLI插件是向你的 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin- (社區插件) 開頭，非常容易使用。下面，我們將會解析cli插件的定義、執行、安裝等過程。
插件必須是vue-cli-plugin-命名的npm包，并且目錄結構也是要嚴格遵循文件命名來定義。
注意：@vue/cli-service [6],會通過 項目根目錄下package.json中dependencies和devDependencies中定義的 npm包中符合插件命名規范的 npm包作為項目的插件。
文件命名和內容說明：
詳情可以去看Vue Cli 插件開發指南 [9]
我們把Vue CLI的插件執行分成兩種情況：
相比Babel的手動安裝添加插件方式，Vue CLI的插件系統提供命令行的安裝方式就顯得很方便了。我們看看Vue Cli插件系統時怎么實現一行命令添加插件的功能。
安裝流程的執行思路如下：
插件運行流程是由@vue/cli-service [14]這個插件系統定義的，這里的調用插件有兩種：
插件運行邏輯很簡單：
這兩個流程的 pluginAPI是不一樣的。
1）安裝流程
2）運行流程
一個插件系統是可以不多個插件類型，并且插件系統通過命令安裝插件的實現，用戶在使用插件系統時添加插件也是十分方便的。
通過上述的實例，總結處理插件架構的應用場景。
通過建立一個插件標準，將研發流程沉淀的能力進行插件化編程，整個公司通過使用一套的插件系統（中臺），這樣意味著，我們不用重復造業務輪子，團隊和企業可以持續積累自己的插件生態，讓軟件開可以像汽車等工業制造一樣，打造一條標準化裝配的流水線。
者：lzg9527
轉發鏈接：https://segmentfault.com/a/1190000022956602
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
