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

使用一组静态默认值而不是硬编码。这样，用户可以覆盖它们，而不必在调用中设置它们，例如：

$.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声明：

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

然后您将使用o.*或o['*'] ID访问所有内容，同时也使您的某些逻辑成为封装的方法。我通常只希望/期望看到一个this.each（）块用于主要逻辑。

另外，我相信如果你的选择器在其集合中没有任何元素，你将被除以0或NaN，这通常是禁止的。如果我是正确的你可能想要默认最小/最大为1或做一个简单的检查，以确保收集长度是＆gt; 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);

第一个jQuery插件：TagCloud

2 个答案: