jQuery函數用於幾個類似的函數

Question

我使用jquery-circle-progress插件在我的網站上繪制了一些圓形進度條。

現在，在我的情況下，“ some”是八個，因此每個進度條都有八個非常大的定義。

現在，我想知道是否有可能將其分解為較小的代碼段。 我可以一次用變量作為函數編寫所有配置代碼，然后為八個不同的進度條添加值。

但是，如果需要幾個變量，該如何工作？

這是其中一個進度條的代碼：

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是元素，因為您已將其聲明為元素。 您可以將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; 因此您可以使用某些函數來返回您的配置對象。