Post

jQuery Plugin 1 入門

Posted Updated
By Elaine
2 min read

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 一起載入的時候，前面的人忘記寫 ;，導致程式錯誤
    • 事實上多寫 ; 並不會有問題，少寫 ; 才會有問題

參考資料

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