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,後續便針對這三個 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


這篇文章的原始位置在這裡-Plugin 的撰寫

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: jQuery
comments powered by Disqus