javascript - 更新 jQuery 插件以构建 HTML 并防止它在多次调用时重建

Question

我正在努力将简单的 JavaScript 圆环图转换为 jQuery 插件。

这是我的第一个 jQuery 插件，我需要一些帮助...

我目前拥有的演示:http://jsfiddle.net/jasondavis/qsgqebox/

以下是我目前拥有的 JavaScript。

jQuery

jQuery.fn.updatePercentageGraph = function (options) {

    var settings = $.extend({
            // These are the defaults.
            percent: 0,
        }, options );    

    var percent = settings.percent;

    if(typeof percent === 'undefined') {
        var percent = parseInt(this.data('percent'));
    }else{
        if(percent === '') {
            var percent = parseInt(this.data('percent'));
        }else{
            var percent = parseInt(percent);
            this.attr('data-percent', percent);
        }
    }

    var deg = 360*percent/100;
    if (percent > 50) {
        this.addClass('gt-50');
    }else{
        this.removeClass('gt-50');
    }
    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
    $('.ppc-percents span').html(percent+'%');

};

用法:

$('#project_progress2').updatePercentageGraph(34);

---

我需要什么帮助:

1)
它目前要求用户像这样设置 HTML:

<div id="project_progress" class="progress-pie-chart" data-percent="40">
    <div class="ppc-progress">
        <div class="ppc-progress-fill4" style="transform: rotate(136.8deg);"></div>
    </div>
    <div class="ppc-percents4">
        <div class="pcc-percents-wrapper">
            <span>40%</span>
        </div>
    </div>
</div>

不过我想做的是让你可以简单地做这样的事情....

<div id="project_progress" class="progress-pie-chart" data-percent="40"></div>

然后 jQuery 插件会自动创建适当的子节点。

jQuery 将自动创建的部分:

<div class="ppc-progress">
    <div class="ppc-progress-fill4" style="transform: rotate(136.8deg);"></div>
</div>
<div class="ppc-percents4">
    <div class="pcc-percents-wrapper">
        <span>40%</span>
    </div>
</div>

---

2) 更新一些选择器以允许页面上有多个圆环图

到目前为止，插件中的另一个问题是上面显示的 JavaScript 底部的第 3 行和第 4 行。它正在调用 $('.ppc-progress-fill') 和 $('.ppc-percents span') 这将阻止在页面上使用多个图表因此需要更新以仅针对当前图表中存在的类。

---

3)优化防止每次调用函数更新百分比值时都重新创建HTML结构

如果我将这个插件转换为自动生成 HTML 结构，那么我还需要考虑优化它，这样它就不必在每次运行我的代码时一遍又一遍地重新生成该结构调用 $('#project_progress2').updatePercentageGraph(34); 因为在我将使用它的元素中，这些图表将不断更新百分比值。

也许拥有一个创建初始图表 HTML 的函数，然后是一个可以反复调用的第二个函数，它只处理百分比的更新并且不会尝试重建和注入(inject)HTML 结构一遍又一遍!

---

我提到的这些问题是我目前有点卡住的关键领域，需要一些帮助。

JSFiddle 演示:

我目前拥有的 JSFiddle 以及一些用于测试更新百分比值的按钮:http://jsfiddle.net/jasondavis/qsgqebox/

Answer 1

1) The part jQuery would auto create

要解决这一点，您需要在创建插件时创建 HTML 结构。

2) Update some selectors to allow multiple Donut charts on page

防止使用整个页面选择器。相反，您可以保留对创建的 HTML 结构的引用并仅处理此子集。不是整个 DOM。

3) Optimize to prevent the HTML structure from being re-created every time the function is called to update the percent value

解决多个实例的常用模式是创建一个包含插件实例的 data 属性。如果一个实例已经存在，那么您只需对该实例进行操作，而不是创建一个新实例。

拥有此实例对于另一种用于向插件添加方法的 jQuery 模式也很有用。您可以检查传递给插件的参数是否为字符串，然后调用具有该名称的方法。

$('#project_progress').updatePercentageGraph('percent', percent);

您也可以使用不带参数的相同方法获取值:

var percent = $('#project_progress').updatePercentageGraph('percent');

总而言之，我会建议这样的事情:

(function ($, undefined) {
    'use strict';
    function PercentageGraph(element, options) {
        this.$percentageGraph = $(element).append(
            '<div class="ppc-progress">' +
                '<div class="ppc-progress-fill"></div>' +
            '</div>' +
            '<div class="ppc-percents">' +
                '<div class="pcc-percents-wrapper">' +
                    '<span>0%</span>' +
                '</div>' +
            '</div>'
        );
        this.options = $.extend({}, $(element).data(), options);
        this._init();
    }
    PercentageGraph.prototype = {
        _init: function () {
            this.percent(this.options.percent || 0);
        },
        _update: function () {
            var percent = this.options.percent;
            var deg = 360*percent/100;
            if (percent > 50) {
                this.$percentageGraph.addClass('gt-50');
            }else{
                this.$percentageGraph.removeClass('gt-50');
            }
            this.$percentageGraph.find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
            this.$percentageGraph.find('.ppc-percents span').html(percent+'%');
        },
        percent: function (percent) {
            // If no parameter, act as a getter. Otherwise act as a setter.
            if (percent === undefined) {
                return this.options.percent;
            } else {
                this.options.percent = percent;
                this._update();
            }
        },
    }

    $.fn.updatePercentageGraph = function (options) {
        var args = Array.prototype.slice.call(arguments, 1),
            result;
        this.each(function () {
            var plugin = $(this).data('percentage-graph');
            if (!plugin) {
                $(this).data('percentage-graph', (plugin = new PercentageGraph(this, options)));
            }
            var method = typeof options === 'string' ? options : '_init';
            result = plugin[method].apply(plugin, args);
            // Break the .each iteration if it is a getter, that is, when the method returns something.
            return result === undefined;
        });
        return result || this;
    };
}(jQuery));

参见 demo