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

我正在将我的简单JavaScript甜甜圈图表转换为jQuery插件

这是我的第一个jQuery插件，我可以在一些地方使用一些帮助，请

到目前为止我所拥有的演示：

下面是我到目前为止使用的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);

<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>

用法：

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);

<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>

---

我需要什么帮助：

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);

<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>

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>

40%

但我想做的是，让它成为你可以简单地做像这样的事情的地方

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

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

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);

<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>

40%

---

2）更新一些选择器以允许页面上有多个甜甜圈图表

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);

<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>

到目前为止，插件中的另一个问题是上面显示的JavaScript底部的第3行和第4行。它正在调用

$（'.ppc progress fill'）

和

$（'.ppc percents span'）

，这将阻止在页面上使用多个图表，因此需要更新以仅针对当前图表中存在的类

---

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

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);

<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>

如果我将这个插件转换成自动生成HTML结构，那么我也需要考虑优化它，这样它就不必在每次我的代码运行时不断地重新生成该结构，该代码将调用<代码> $（'SypjPurixPrimsS2'）。代码>因为在我的项目中，我将使用它，这些图表将不断更新它们的百分比值

也许最好有一个创建初始图表HTML的函数，然后有一个可以反复调用的第二个函数，该函数只处理百分比的更新，不会反复尝试重建和注入HTML结构

---

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

jsiddle演示：

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);

<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>

js到目前为止，我有一些按钮来测试更新百分比值：

我疯了吗？是的，我是

给你

我不会向你解释所有这些代码。我只想说这是我通常为jQuery编写插件的方式

(function($) {
    'use strict';

    var PercentageGraph = function(element) {
        // Setup settings
        this.settings = $.extend({
            percent: element.data('percent') ? element.data('percent') : 0
        });

        // Store the given element
        this.element = element;

        // Create the progress bar
        this.create();

        // Initialization
        this.update();
    }

    PercentageGraph.prototype = {
        create: function() {
            // Create:
            // <div class="ppc-progress">
            //     <div class="ppc-progress-fill4"></div>
            // </div>
            this.progress = $('<div />');
            this.progress.addClass('ppc-progress');

            this.progressFill = $('<div />');
            this.progressFill
                .addClass('ppc-progress-fill')
                .appendTo(this.progress);

            // Create:
            // <div class="ppc-percents4">
            // <div class="pcc-percents-wrapper">
            //     <span>40%</span>
            // </div>
            // </div>
            this.percents = $('<div />');
            this.percents.addClass('ppc-percents');

            this.percentsWrapper = $('<div />');
            this.percentsWrapper
                .addClass('pcc-percents-wrapper')
                .appendTo(this.percents);

            this.percentsContent = $('<span />');
            this.percentsContent
                .text(this.settings.percent)
                .appendTo(this.percentsWrapper);

            // Append everything to the element
            this.progress.appendTo(this.element);
            this.percents.appendTo(this.element);
        },
        update: function(p) {
            var percent = p ? p : this.settings.percent,
                deg = 360 * percent / 100;

            if (percent > 50) {
                this.element.addClass('gt-50');
            } else {
                this.element.removeClass('gt-50');
            }

            this.progressFill.css('transform', 'rotate('+ deg +'deg)');
            this.percentsContent.html(percent + '%');
        }
    }

    jQuery.fn.percentageGraph = function() {
        return new PercentageGraph(this);
    }
})(jQuery);

(function($) {
    $(document).ready(function() {
        var progress = $('div#project_progress').percentageGraph();

        // Handle it
        $('.update-button').on('click', function() {
            var percent = $(this).data('percent');

            // Update it
            progress.update(percent);
        });        
    });
})(jQuery);

（函数（$）{
"严格使用",；
var PercentageGraph=函数（元素）{
//设置设置
this.settings=$.extend({
百分比：element.data（'percent'）？element.data（'percent'）：0
});
//存储给定的元素
this.element=元素；
//创建进度条
这个。create（）；
//初始化
这个.update（）；
}
PercentageGraph.prototype={
创建：函数（）{
//创建：
// 
//     
// 
此项。进度=$（''）；
this.progress.addClass（'ppc-progress'）；
this.progressFill=$（''）；
这是我的
.addClass（'ppc-progress-fill'）
（本进度）的附录；
//创建：
// 
// 
//     40%
// 
// 
该百分比=$（''）；
此.percents.addClass（'ppc-percents'）；
此.percentsWrapper=$（''）；
这是百分百说唱歌手
.addClass（'pcc-percents-wrapper'））
.appendTo（这个百分比）；
this.percents内容=$（''）；
这是百分含量
.text（此.settings.percent）
.appendTo（此.percentsWrapper）；
//将所有内容附加到元素
this.progress.appendTo（this.element）；
此.percents.appendTo（此.element）；
},
更新：职能（p）{
var percent=p？p:this.settings.percent，
度=360*百分比/100；
如果（百分比>50）{
this.element.addClass（'gt-50'）；
}否则{
此.element.removeClass（'gt-50'）；
}
css（'transform'，'rotate（'+deg+'deg'）；
此.percentsContent.html（百分比+“%”）；
}
}
jQuery.fn.percentageGraph=函数（）{
返回新的百分比图（此）；
}
})（jQuery）；
（函数（$）{
$（文档）.ready（函数（）{
var progress=$（'div#project_progress'）。percentageGraph（）；
//处理它
$（'.update button'）。在（'单击'，函数（）上）{
变量百分比=$（此）.data（'percent'）；
//更新它
进度。更新（百分比）；
});        
});
})（jQuery）；

1） jQuery将自动创建部件

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

2） 更新一些选择器以允许在页面上显示多个甜甜圈图表

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

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

解决多个实例的一种常见模式是创建一个包含插件实例的

data

属性。如果一个实例已经存在，那么您只需对该实例执行操作，而不是创建一个新实例

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

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

你也可以