Plugin的撰寫

Plugin的撰寫

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出來啦~

Reference

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-Plugin 的撰寫。

留言

張貼留言