第一個jQuery插件：TagCloud

Question

這是我第一個jQuery插件。我可以得到一些指針嗎？它目前沒有工作......

; (function($) { 

$.fn.tagCloud = function(options) { 
     options = options || {}; 

    var maxPercent = options['maxPercent'] || 150; 
    var minPercent = options['minPercent'] || 100; 
    var retrieveCount = options['retrieveCount'] || function(element) { return $(element).attr('rel'); }; 
    var apply = options['apply'] || function(element, size) { $(element).attr('style', 'font-size:' + size + '%;'); }; 

    var max = null; 
    var min = null; 

    var tagElements = this; 

    tagElements.each(function(element) { 
     count = retrieveCount(element); 
     max = (max == null || count > max ? count : max); 
     min = (min == null || min > count ? count : min); 
    }); 

    var multiplier = (maxPercent - minPercent)/(max - min); 

    tagElements.each(function(element) { 
     count = retrieveCount(count); 
     size = (minPercent + (count - min) * multiplier); 
     apply(element, size); 
    }); 
} 
})(jQuery); 

用法：$('a.tag').tagCloud();

Answer 1

化妝用一組靜態編碼它們的默認值，而不是硬的。這樣用戶可以覆蓋這些withough havingto它們設置在呼叫例如：

$.fn.tagCloud.defaults = { 
    maxPercent: 150, 
    minPercent: 100, 
    countCallback: function(element){return $(element).attr('rel');}, 
    applyCallback: function(element, size) { $(element).attr('style', 'font-size:' + size + '%;');} 
}; 

然後在你的插件的一開始，你會用一個簡單的替換這些變種聲明的很多：

var o = $.extend($.fn.tagCloud.defaults, options||{}); 

那麼你會用o.*或o['*'] ID訪問一切也使你們中的一些邏輯到封裝方法..我通常只是想/希望看到一個this.each（）塊的主要邏輯。

也順便我相信，如果你選擇不必須在其收集的任何元素youre去用0來劃分或NaN通常是一個禁忌。如果我正確的，你可能想默認最小/最大值爲1或做一個簡單的檢查，以確保收集長度大於0，如果它沒有取決於你想要它做什麼，保釋。

Answer 2

我想通了：

; (function($) { 

$.fn.tagCloud = function(options) { 
    options = options || {}; 

    var maxPercent = options['maxPercent'] || 150; 
    var minPercent = options['minPercent'] || 100; 
    var retrieveCount = options['retrieveCount'] || function(element) { return $(element).attr('rel'); }; 
    var apply = options['apply'] || function(element, size) { $(element).attr('style', 'font-size:' + size + '%;'); }; 

    var max = null; 
    var min = null; 

    var tagElements = this; 

    tagElements.each(function(index) { 
     var count = retrieveCount(this); 
     max = (max == null || count > max ? count : max); 
     min = (min == null || min > count ? count : min); 
    }); 

    var multiplier = (maxPercent - minPercent)/(max - min); 

    tagElements.each(function(index) { 
     var count = retrieveCount(this); 
     size = (minPercent + (count - min) * multiplier); 
     apply(this, size); 
    }); 
} 
})(jQuery);