Функция jQuery для нескольких подобных функций

Question

Я использую jquery-circle-progress plugin, чтобы нарисовать некоторые круговые индикаторы хода на моем сайте.

Теперь в моем случае «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 является элементом, потому что вы объявили его элементом. Вы можете сделать любой из кругов, в которых вы нуждаетесь (я бы переименовал его в нечто вроде 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; 
}}); 

Вы можете сделать что-то подобное и сохранить все свои конфигураторы в переменных. Но теперь у вас SOOOOO много варов, что мы делаем.

Мы сочетаем их: 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. 
    }); 

Вы также можете установить конфигурации на е, а затем просто переобъявить е и повторно использовать переменные. Если вам не нужен var по какой-либо причине.

так е = $ ("firstCircle.); E.whatever; е = $ (". SecondCirlce "); e.setmyconfigs, или просто иметь переменную конфигурации и сохранить присвоение ему
правильный е.?. seem.force_process = false, поэтому у вас могут быть некоторые функции, которые возвращают ваш объект конфигурации.