前端隨記 自定義jQuery外掛程式

2021-08-17 23:15:28 字數 1897 閱讀 4144

使用過 jquery.tips.js、bootstrap-fileinput 等外掛程式後，思考這些外掛程式時如何實現的呢，於是便有了如下的研究。

note：僅僅只做基礎演示與說明，專案具體內容請檢視

乙個 jquery 外掛程式需要有自己的專業職能，如 jquery.tips.js 就負責資訊提示，bootstrap-fileinput 是檔案控制項，負責檔案上傳的處理，那麼我們自己的外掛程式要做什麼呢，那就做乙個**處理的功能吧。實現乙個 bootstrap 風格的 jquery 外掛程式，能通過 js 注入**資料，實現**的自動生成。

新建乙個專案 bootstrap.table.js，其目錄結構如下：

bootstrap.table


.js|- css                # 存放自定義 css


|- example            # demo


|- js                 # 存放自定義 js


|- lib                # 依賴庫
先將依賴庫（jquery, bootstrap, font-awesome）放入 lib 目錄下，然後在 js 目錄下新建乙個 bootstrap.table.js 檔案，首先加入如下**：

// $ 是形參, jquery 是傳入給函式的實參


(function ($) )(jquery)；
在自實現 jquery 外掛程式時，一般都使用(function($){})(jquery)**來存放外掛程式**，相當於執行了var fn = function($){}; fn(jquery)。這種寫法最大的好處在於形成了閉包，從而使得在匿名函式內部定義的函式、變數只有在匿名函式內有效，形成了私有變數/函式的概念。

note：這實際是 js 匿名函式的寫法，(function(arg))(param)

$.fn.table = function


(option, data) , $.fn.table.defaults, option, );


if (!config.columns) 


// ...


var table = new table($tb, config);


table.init();


};
關鍵**分析：

note：table 是自定義類，具體**檢視 /blob/master/js/bootstrap.table.js

注意 bootstrap.table.js 的預設配置$.fn.table.defaults必須在$.fn.table宣告之後，否則會由於$.fn.table尚未定義，從而丟擲 undefined 異常。

當我們將$.fn.table豐富完畢後，就可以在 html 中呼叫了，跟呼叫普通 jquery 函式一樣即可。

1. 首先在介面中引入依賴庫，然後引入bootstrap.table.js

2. 在 html 中加入標籤元素

3. 在中直接執行$('#tb').table()即可

在編寫自己的 jquery 外掛程式時，不僅能夠學到許多的知識，而且可以認識到自己的不足，從而去彌補這些漏洞，因此可以嘗試去實現乙個屬於自己的 jquery 外掛程式，融合自己所學。當然乙個真正可用的 jquery 外掛程式，需要考慮到易用性、可擴充套件性、效能優化等非功能性需求，而不僅僅是完成基礎功能而已。

jquery自定義外掛程式

jquery自定義外掛程式的幾種常用的方法 第一種方法 fn.fun function target fun 第二種方法 fn.extend target fun 第三種方法 extend fun 在這裡需要詳細解釋一下jquery的api extend var obj1 var obj2 var ...

jquery自定義外掛程式

實現方法 jquery為開發外掛程式提拱了兩個方法，分別是 jquery.fn.extend object 給jquery物件新增方法。jquery.extend object 為擴充套件jquery類本身.為類新增新的方法，可以理解為新增靜態方法。這兩個方法都接受乙個引數，型別為object，ob...

Jquery 自定義外掛程式

jquery外掛程式分三種 1.給jquery原型新增全域性函式 2.給jquery物件新增擴充套件 3.擴充套件器擴充套件 自定義jquery外掛程式的一些規約 1.命名 jqurey.pluginname.js 2.擴充套件規則 新方法新增到 jquery.fn上 新功能新增到jquery上 3...