Post

jQuery Plugin 1 入門

jQuery.fn

  • 利用 jQuery.fn 宣告你的 jQuery plugin
  • jQuery.fn 包含了所有 jQuery 內建的方法
  • jQuery.fn. 後面接 plugin 名稱 => jQuery.fn.plugin_name

雛形

1
2
3
jQuery.fn.plugin_name = function() {
  //plugin內容
};
  • 要使用此 plugin 的工程師,只要選到 jQuery 物件後,接上 plugin 的名稱()就可以使用了
1
$("element").plugin_name();

舉例

1
2
3
4
5
jQuery.fn.setColor = function() {
  this.css("color", "green");
};

$("a").setColor(); // Makes all the links green.

this

  • 匿名函式裡的 this 關鍵字,它會指向一個 jQuery 物件;而這個 jQuery 物件則是我們要指定的

雛形

1
2
3
4
jQuery.fn.plugin_name = function() {
  //plugin內容
  return this.each(function() {});
};

舉例

1
2
3
4
5
jQuery.fn.myplugin = function() {
  return this.each(function() {
    alert(this.id);
  });
};
1
2
3
4
5
<div id="myid1" class="myclass">123</div>
<div id="myid2" class="myclass">456</div>
<script>
  $(".myclass").myplugin(); // alert("myid1") 和 alert("myid2")
</script>

立即函數

  • 一直寫 jQuery 這幾個字實在是很累人的一件事;而且 jQuery 不是可以簡寫成 $ 嗎?不能直接用嗎?當然可以,只是這樣可能會和其他 JavaScript Library 發生衝突
  • 為了避免 $ 受到影響(全域變數污染),我們建立了立即函數(Immediately Invoked Function Expression)的作用域(scope),並將 jQuery 當作參數傳進去:

雛形

1
2
3
4
5
6
(function($) {
  $.fn.plugin_name = function() {
    //plugin 內容
    return this.each(function() {});
  };
})(jQuery);
  • 定義完 function,閉包起來之後接 (jQuery),就是定義且執行 function,稱為 IIFE(立即函數)
  • 前面的 ;,是因為怕和其他的 plugin 一起載入的時候,前面的人忘記寫 ;,導致程式錯誤
    • 事實上多寫 ; 並不會有問題,少寫 ; 才會有問題

參考資料

This post is licensed under CC BY 4.0 by the author.