Question

我使用jquery-circle-progress plugin在我的网站上绘制一些圆形进度条。

现在，在我的情况下，有些＆＃39;是八，所以我对每个进度条有八个非常大的定义。

现在我想知道是否有可能将其分解为更小的代码段。我可以用变量作为函数编写所有配置代码，然后为八个不同的进度条添加值。

但如果需要多个变量，这是如何工作的呢？

以下是其中一个进度条的代码：

var e = $('.element1'),
    inited_e = false;

e.circleProgress({
  value: 0,
  size: size
});

e.appear(
  { force_process: true }
);

e.on('appear', function() {
  if (!inited_e) {
    e.circleProgress({
      value: 0.85,
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#00C853", "#00E676"]
      }
    });

    inited_e = true;

  }

});

那么，这个配置中的变量是什么？首先是脚本所依赖的元素，因此e将针对每个元素进行更改。此外，每个元素都有另一个值和另一个渐变。所以我需要为每个函数迭代一个对象（？！），它将值和填充关联到八个不同的进度条。

Answer 1

您可以重构代码，如下所示：

var conf={
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#00C853", "#00E676"]
      }
    };

然后：

function circlify(selector,value){
      conf.value=value; //override value for each element
      var e = $(selector),inited_e = false;

      e.circleProgress({value: 0, size: size});

      e.appear({ force_process: true });

      e.on('appear', function() {
             if (!inited_e) {
               e.circleProgress(conf); // here set conf object
                 inited_e = true;

        }

        });

}

然后，使用您的API：

circlify('#element1',0.75);
circlify('#element2,#element3',0.5);

Answer 2

你对自己这么努力。

var e = $('.element1'),
inited_e = false;

e是元素，因为您声明它是元素。你可以制作你需要的任何圆圈（我会将它重命名为circleElement）。

现在我们只设置您的配置。

var circleProgElement1 = { value: 0,
  size: size};
var circleProgElement2 = {value: 1, size: 283974};
var appearelement1 = {force_process : true}; 
//etc
var configElement1 = {
  value: 0.85,
  size: size,
  lineCap: "round",
  fill: {
    gradient: ["#00C853", "#00E676"]
  }
};

var configElement2 = {
  value: 10.85,
  size: size,
  lineCap: "whatever",
  fill: {
    gradient: ["#000", "#FFF"]
  }
}

circleElement1.circleProgress(circleProgElement1);
circleElement2.circleProgress(circleProgElement2);
//etc
    circleElement1.appear(appearelement1);
circleElement1.on('appear', function() {
if (!inited_e) {
     this.circleProgress(configElement1);
inited_e = true;
}});

您可以执行类似的操作并将所有配置存储到变量中。但是现在你有很多变量，我们做什么。

我们将它们结合起来：D

var configElement1 = { 
    circleProg1 : {  value: 0, size: size },
    appear : { force_process: true },
    circleProgend: {
      value: 0.85,
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#00C853", "#00E676"]
      },
}

现在您可以将属性（您的配置对象）调用到您需要的方法中;

e.circleProgress(configElmeent1.circleProg1);
e.appear(configElement1.appear);
e.on("appear",{closure : configElement  } ,function(event){
    if(w/e){ e.circleProgress(closure.circleProend);};
    //we need to add the data property because we are in a different scope so        //just pass the closure into the jq func.  
    });

您还可以在e上设置配置，然后重新声明e并重复使用这些变量。除非你因任何原因需要var。

所以e = $（“。firstCircle）; e.whatever; e = $（”。secondCirlce“）; e.setmyconfigs;或者只是拥有配置变量并继续分配给它。
对？ e.appear.force_process = false;所以你可以有一些函数来返回你的配置对象。

jQuery函数用于几个类似的函数

2 个答案: