jQuery自定義外掛簡單介紹

antzone發表於2017-03-13
jQuery

雖然jQuery中提供了豐富便利的函式，但是有時候可能還是不能夠滿足需要，在實際應用中，可能需要自己定義一些更為遍歷的函式，也就是我們所說的自定義外掛，下面就介紹簡單介紹一下如何實現自定義外掛。

一.外掛製作基本原則:

1.命名原則:

如果要將外掛單獨生成一個檔案，推薦命名方式如下:

[JavaScript] 純文字檢視 複製程式碼
jquery.外掛名.js

這樣命名可以明確告知其他程式設計師這是自定義外掛，例如:

[JavaScript] 純文字檢視 複製程式碼
jquery.color.js

2.例項方法還是靜態方法:

如果是例項方法要附加到jQuery.fn物件。

如果是靜態方法要附加到jQuery物件。

jQuery.fn可以參閱jQuery.fn的作用是什麼一章節。

jQuery.extend()函式可以參閱jQuery.extend()方法一章節。

3.this的指向:

在自定義函式的內部，this是指向選擇器獲取的jQuery物件，於是可以通過this.each()函式來遍歷jQuery物件集合中的每一個元素。

each()函式可以參閱jQuery each()一章節。 

自定義外掛例項可以參閱點選彈出居中登陸框例項程式碼一章節。

4.關於分號的使用:

分號是用來分隔js語句的，為了防止在程式碼壓縮的時候出錯，那麼最好要以分號，甚至在外掛的開頭使用分號。

5.因為鏈式呼叫是jQuery的一個比較好的特徵，所以自定義外掛最好要返回一個物件，以實現鏈式呼叫效果。

二.簡單程式碼例項:

1.外掛程式碼:

[JavaScript] 純文字檢視 複製程式碼
;(function($){
  $.fn.extend({
    "color":function(value){
      return this.css("color",value);
    }
  });
})(jQuery);

在以上程式碼大家可以注意到在程式碼最開頭和結尾都有分號的使用，並且宣告一個匿名函式，將jQuery物件作為引數傳入。

使用$.fn.extend()函式擴充套件例項物件方法，此方法可以參閱jQuery.fn.extend()一章節。 

2.外掛的使用:

[JavaScript] 純文字檢視 複製程式碼
<script type="text/javascript"> 
$(document).ready(function(){
  $("#thediv").color("red");
})
</script> 
</head> 
<body> 
<div id="thediv">螞蟻部落</div>
</body>

相關文章