Plugin 的撰寫

又重新看了 jQuery: Novice to Ninja ，所以做了些關於 Plugin 的筆記。以下使用 jQuery Newsticker Plugin 作為說明範例。

Step 1：使用閉包

避免汙染全域變數，關於閉包可參考這篇-JavaScript Scoping and Hoisting，清楚說明 Scope、Hoisting、Function 的相關觀念。

(function($) {
  //...
})(jQuery);

Step 2：決定使用者可以傳入的參數和使用的 method

以 jQuery Newsticker Plugin 為例，我們允許使用者根據需求調整（意即覆寫預設值）height、speed、start、interval 和 move。其中 move 是開放讓使用者客製化的 function，如果使用者不滿意目前 newsticker 內容由下往上移動方式，則可自行撰寫，其預設值是 null。

var config = $.extend(
  {},
  {
    height: 30,
    speed: 800,
    start: 8,
    interval: 3000,
    move: null,
  },
  opts,
);

Step 3：撰寫內部程式

接下來便是撰寫 plugin 的功能。

功能分割

功能的切割以未來好維護為原則。

這個 newsticker 會有幾個功能

• 初始化：初始設定，例如：設定目前要展示的項目、其他 function 的初始化。
• 移動：newsticker 內容由下往上移動。
• 暫停：當滑鼠移到內容上方時，newsticker 會停止移動，讓使用者順利閱讀；滑鼠移開再繼續移動。

因此，程式區塊就看到了三個主要的 function，後續便針對這三個 function 補滿應有的內容。

function init() {
  //初始化
  //...
}

function suspend() {
  //暫停
  //...
}

function move() {
  //移動
  //...
}

執行使用者定義的 method

由於我們開放 config.move 讓使用者客製 newsticker 的移動方式，因此必須先判斷使用者是否輸入自己寫好的 function，如果沒有，則執行預設的移動方式。這裡使用一個小技巧 $.isFunction 來幫忙做判斷。

if ($.isFunction(config.move)) {
  config.move.call(this);
} else {
  //執行預設的移動方式
}

Step 4：初始化這個 Plugin

// initialize every element
this.each(function() {
  init($(this));
});
return this;

Step 5：使用這個 Plugin

在這裡也可以代入要覆寫的參數，例如：speed。

$(function() {
  $('.newsticker').newsticker({
    speed: 1000,
  });
});

除了撰寫 Plugin，還有其他擴充方法嗎？

擴充為 jQuery 的核心

如果是常用的功能，我們也可以使用 jQuery.fn.extend() 或 $.fn.extend() 擴充為 jQuery 的核心，當成一般 jQuery method 使用。假設我們擴充 prompt 這個 method 來做提示功用。

$.fn.extend({
  prompt: function() {
    return this.each(function() {
      console.log('this is a prompt.');
    });
  },
});

這樣就可以使用了…前後都可以加上其他 method 使之成為 chain。

obj
  .show()
  .prompt()
  .hide();

擴充原有的 method，使其有新的功能

擴充 $.trim，使其具有把字串中所有空白都移除的功能。我們將原本的 $.trim 存到變數 _trim 中，假設在使用 method 時傳入「clear 為 true」則使用擴充的用法 - 將字串中所有空白的移除。

(function($) {
  var _trim = $.trim;
  $.extend({
    trim: function(text, clear) {
      if (clear) {
        return text.replace(/\s+/g, '');
      }
      return _trim.call(this, text);
    },
  });
})(jQuery);

傳入不同參數有不同的結果…

直接 prompt 原始字串。

console.log(' aa aa a '); // aa aa a

原本的功能，只去除前後空白。

console.log($.trim(' aa aa a ')); //aa aa a

擴充的功能，將字串中所有空白的移除。

console.log($.trim(' bb bb b ', true)); //bbbbb

之後我也會陸續把以前寫過的 plugin release 出來啦。

References

• jQuery: Novice to Ninja
• JavaScript Scoping and Hoisting
• jQuery Newsticker Plugin