開發jQuery外掛程式的基本步驟

2022-03-11 10:31:50 字數 2100 閱讀 8044

在進行開發jquery外掛程式前,首先要了解一些知識:

1、閉包

1.1、閉包的作用:

· 避免全域性依賴

· 避免第三方破壞

· 相容jquery操作符'$'和jquery

1.2、閉包的形式

(function(arg))(param)
相當於定義了乙個引數為arg的匿名函式(function(arg)),並且將param作為引數來呼叫這個匿名函式。

在呼叫函式function(arg)時,是在函式後面寫上括號和實參(param)的,而由於操作符的優先順序,函式本身也需要用括號(function(arg))

(function($))(jquery)是一樣的,之所以只在形參使用$,是為了不與其他庫衝突,所以實參用jquery。

另外,(function($))(jquery)用來定義一些需要預先定義好的函式,用來存放開發外掛程式的**,執行其中的**時dom不一定存在。而$(function())則是用來在dom載入完成之後執行/執行那些預先定義好的函式,用來存放操作dom物件的**,執行其中**時dom物件已存在。

2、jquery外掛程式的開發方式

2.1、類級別元件開發

即給jquery命名空間下新增新的全域性函式,也稱為靜態方法。

jquery.myplugin = function()
例:$.ajax()、$.extend()

2.2、物件級別元件開發

掛在jquery原型下的方法,這樣通過選擇器獲取的jquery物件例項也能共享該方法,也稱為動態方法。

$.fn.myplugin = function()
例:addclass(),attr()等,都需要建立例項來呼叫

3、鏈式呼叫

使用例子:$('div').next().addclass(...)...

與上面介紹物件級別元件開發$.fn.myplugin = function()組合的實現:

$.fn.myplugin = function())

}

其中,return this返回當前物件,來維護外掛程式的鏈式呼叫;而each迴圈實現每個元素的訪問。

4、單例模式

使用單例模式是為了只生成乙個例項,可以避免過多的例項不好管理,比如乙個人售票還好,再多乙個人售票就會產生程序之間的一系列問題。

1	$.fn.myplugin = function()

10 }

其中,data()方法向被選元素附加資料(第8行),或者從被選元素獲取資料(第3行)。

5、開發jquery外掛程式

基本結構為:

(function($)

//定義所有例項物件共有的屬性和方法

myplugin.prototype=

return myplugin;

})();

//使myplugin能被通過選擇器獲取的jquery物件例項使用,並實現鏈式呼叫

$.fn.myplugin=function(options)

})}; //一般情況下,允許別人在使用我們開發的外掛程式時修改一些預設的屬性變數以達到不同的實現效果

//例如:我們開發乙個全屏切換的外掛程式,預設情況下為豎直變換,但允許使用者使用是改為水平切換

$.fn.myplugin.defaults=;

//使dom元素呼叫外掛程式方法實現效果

$(function());

})(jquery);

乙個全屏切換外掛程式的例子。

以上為個人見解,望指教。

jQuery外掛程式的開發

jquery外掛程式開發方式主要有三種 通過 extend 來擴充套件jquery 通過 fn 向jquery新增新的方法 通過 widget 應用jquery ui的部件工廠方式建立 通常我們使用第二種方法來進行簡單外掛程式開發,說簡單是相對於第三種方式。第三種方式是用來開發更高階jquery部件...

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...

jquery 外掛程式開發

自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...