jQuery外掛程式開發(引自juqery官網)

2022-03-12 05:07:15 字數 3886 閱讀 5826

以前寫js的時候都沒有注意一些封裝外掛程式的方法和技巧,如今將jquery的文件翻譯一下,在自己學習的同時也給跟我類似的菜鳥一點精神食糧吧~親~

寫乙個外掛程式,首先是要往 jquery.fn 物件中新增乙個由你命名的function物件

jquery.fn.myplugin = function() ;

如果要使用我們熟悉的 $ 符號,並不希望它與其他指令碼庫衝突,那麼如下

(function( $ ) ;

})( jquery );

現在我們就能用美元符號代替那個麻煩的「jquery」了

現在我們可以開始開發我們自己的外掛程式了,但在此之前,我們必須注意一點,在我們所編寫的外掛程式function的作用域內,this關鍵字所代表的是呼叫該外掛程式的jquery物件。

這是乙個常見的錯誤,因為在jquery的**函式裡this關鍵字往往是表示乙個dom元素,這導致this關鍵字總被過度封裝。

(function( $ ));

};})( jquery );

$('#element').myplugin();

現在我們了解了jquery外掛程式的背景,現在我們寫乙個小demo來看看外掛程式是怎麼實現的

(function( $ ));

return max;

};})( jquery );

var tallest = $('div').maxheight(); //

返回最高的div的height

這是乙個簡單的例子

前面的例子返回了乙個div的高度值,但通常外掛程式是簡單的修改集合的元素,並通過鏈將元素傳遞到下乙個方法執行。

所以為了保持連線性,我們必須確保我們的外掛程式將this關鍵字返回

(function( $ )

if ( !type || type == 'height' )

});};

})( jquery );

$('div').lockdimensions('width').css('color', 'red');

因為外掛程式在它的作用域內返回了this關鍵字,使它保持了關聯性並且使其他jquery方法可以繼續操作這些jquery集合,例如.css。

所以你的外掛程式如果不返回乙個固有值,你應該在你外掛程式function的作用域裡返回this關鍵字。

此外,如你所想的,你傳遞給你外掛程式呼叫的引數獲得了你外掛程式function的作用域(好吧。。。我承認這句不太會翻。。。大概意思就是傳進來的引數在作用域裡都可用吧,廢話@_@~!)。

所以在前面的例子中,字串『width』在外掛程式函式中變為了引數『type』。

對於更複雜的和可配置的外掛程式提供了許多options,當外掛程式呼叫時,具有可擴充套件的預設設定(用$.extend)是一種最好的實現方法。

所以與其呼叫的外掛程式擁有大量的引數,不如呼叫這個外掛程式時只有乙個引數,但這個引數是乙個可重寫設定的object物件。

這裡是如何實現的例子

(function( $ ), options);

return

this.each(function() );

};})( jquery );

$('div').tooltip();

在這個例子裡,用給定的options呼叫tooltip外掛程式之後,預設的location設定被重新設定為『left』,而 background-color還是預設的『blue』。

所以最終的settings物件應該是:

這是乙個偉大的方式,提供了乙個不需要開發人員定義所有有效options的高度可配置外掛程式。

適當的命名空間對於外掛程式開發是乙個非常重要的部分。

正確的命名空間可以確保你的外掛程式只有極小的可能被同乙個page的其他外掛程式或者**給覆蓋。

命名空間可以讓你作為外掛程式開發者的生活更輕鬆,因為它能幫助你更好的跟蹤你的method、event和資料。

在任何情況下乙個單獨的外掛程式都要求在jquery.fn物件裡有乙個以上的命名空間。

(function( $ );

$.fn.tooltipshow = function( ) ;

$.fn.tooltiphide = function( ) ;

$.fn.tooltipupdate = function( content ) ;

})( jquery );

這個是不好的,因為它使jquery.fn命名空間變得雜亂。

為了解決這個問題,你應該收集你所有的外掛程式裡的方法到乙個object物件,並且通過傳遞這個方法的name字串到外掛程式來呼叫它們。

(function( $ ),

show : function( ) ,

hide : function( ) ,

update : function( content )

};$.fn.tooltip = function( method ) );

//

calls the hide method

$('div').tooltip('hide');

//

calls the update method

$('div').tooltip('update', 'this is the new tooltip content!');

這種型別的外掛程式架構允許你將你所有的方法封裝在外掛程式的父封閉(父作用域?)中,並首先傳入方法名稱字串來呼叫它們,然後為這些方法傳入你所需要的引數。

在jquery plugin社群這類方法的封裝和結構是乙個標準,它被無數外掛程式所使用,包括了jqueryui的外掛程式和部件。

乙個鮮為人知的繫結方法的特色是允許命名已繫結的方法。 如果你的外掛程式繫結了乙個事件,乙個很好的方法是命名它(意思應該就是例子中那種通過命名空間方法傳事件名字串來呼叫吧?!)

這樣,如果你以後要解除繫結(unbind),這樣做可以排除可能繫結到同乙個事件型別的其他事件的干擾。

(function( $ ));

},destroy : function( ) )

},reposition : function( ) ,

show : function( ) ,

hide : function( ) ,

update : function( content ) );

//如果外掛程式已經初始化

if ( ! data ) );

}});

},destroy : function( ) )

},reposition : function( ) ,

show : function( ) ,

hide : function( ) ,

update : function( content )

使用data幫助你在你的外掛程式方法裡跟蹤變數和狀態。命名你的資料到乙個object物件,這樣你就能很輕鬆的從乙個中心位置訪問到你外掛程式的所有屬性,並且能輕鬆取消你想要移除的資料命名。

編寫jquery外掛程式能使利用高效的庫(library),以及抽象最靈活有用的功能,使之成為可重用的**,可以節省你的時間和使你的開發更高效。

1、始終將您的外掛程式放在乙個閉包中: 

(function( $ ))( jquery );

2、在你的外掛程式function的作用域裡不要重複封裝this關鍵字

3、除非你的外掛程式要返回乙個固定值,否則使外掛程式總是返回this關鍵字以保持連續性

4、與其使用大量的引數,不如將你的設定傳入乙個可擴充套件你外掛程式預設值的object物件中。

5、不要使乙個外掛程式具有超過1個命名空間,導致jquery.fn物件混亂。

6、始終命名(namespace)你的方法、事件和資料。

Eclipse外掛程式開發引用外部包

這學期的專案要開發乙個eclipse外掛程式,比較不同版本 的差異,最後要把結果寫到xml檔案上去,所以要用到jdom.jar。在網上搜了很多匯入包的方法都不對,後來問已經工作的同學,按照同學的說法做了就好使了,下面就跟大家分享下,希望對大家有幫助 1.在專案的根目錄下手工建立乙個lib的資料夾,然...

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...