Как еще можно оптимизировать js код?

Question

[Павел]

Я новичок в javascript. Приступил к рефакторингу кода. Исправил синтаксические ошибки. Вроде бы получилось структурировать компоненты. Предполагаю, что можно переписать многие части программы более простым способом.
Первоначальный вид кода:

class dateInput { 
   constructor() { 
    this.input = document.querySelector(".input"); 
     
    this.input.onChange = this.onChange; 
   } 
    
    onChange(event) { 
    this.inputValue = event.srcElement.value; 
    this.updateTime = new Date(); 
    return this.inputValue; 
   } 
  } 
  
  class dateRange extends dataInput { 
   constructor() { 
    this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems'); 
   } 
 
   createItems(period) { 
    let dates = []; 
    for (i = +period.start; i < +period.end; i+= 3600000 * 168) 
    dates.push(i); 
    let periods = []; 
    for(i=0;i<date.length;i++) { 
     let date = new Date(dates[i]); 
     if (date.getDay() == 1) period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
     else if (date.getDay() == 2) period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`; 
     else if (date.getDay() == 3) period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`; 
     else if (date.getDay() == 4) period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`; 
     else if (date.getDay() == 5) period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`; 
     else if (date.getDay() == 6) period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`; 
     else if (date.getDay() == 0) period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
 
     var n = periods.length, a = periods.length; 
     do { b = false; 
      a /= 1.3; 
      if (a == 9 || a == 10) a = 11; 
      if (a < 1) a = 1; 
      for (const i=0; i < n-a; i++) 
      { if (periods[ i ] > periods[i+a]) 
       { b = true; 
        var t = periods[i+a]; periods[i+a] = periods[ i ]; periods[ i ] = t; 
       } 
      } 
     } while (a > 1 || b); 
    } 
    return periods; 
   } 
    
   renderItems(items) { 
    this.container.appendChild(element = document.createElement('div')) 
    element.innerText = `Последнее изменение: ${this.updateTime.getDate() + '.' + this.updateTime.getMonth() > 9 ? ':' '0'+this.updateTime.getMonth() : this.updateTime.getMonth()}`      
    
    items.forEach(function(item) { 
     const element = document.createElement('div', {innerText: item}); 
         this.container.appendChild(element) 
    } 
   } 
    
   onChange() { 
    renderItems(this.createItems(this.createPeriod(this.inputValue))); 
   } 
 
   createPeriod(date) { 
    let newDate = date; 
    newDate.year = newDate.year + 1; 
    return { 
    start: date, 
    end: newDate 
    } 
   } 
  } 
   
  const range = Object.create(dateRange.prototype); 
  range.constructor = range.constructor.bind(range); 
  range.constructor();

Код после внесения изменений:

window.addEventListener('load', function() {

 class dateInput {

  constructor() { 
   this.input = document.querySelector(".input"); 
   this.input.onChange = this.onChange; 
 } 
  onChange(event) { 
   this.inputValue = event.srcElement.value; 
   this.updateTime = new Date(); 
    return this.inputValue; 
  } 
} 
// расчет диапазона времени
 class dateRange extends dataInput { 

  constructor() { 
   this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems');
  } 

  createItems(period) {
   var dates = [], 
       periods = [];

    for (var i = +period.start; i < +period.end; i+= 3600000 * 168) {
      dates.push(i);
    } 

    for (var i = 0; i < date.length; i++) { 

     var date = new Date(dates[i]),
      n = periods.length,
      a = periods.length; 

    if (date.getDay() == 1) {
         period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
      } else if (date.getDay() == 2) {
          period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`;
      } else if (date.getDay() == 3) {
          period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
      } else if (date.getDay() == 4) {
          period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
      } else if (date.getDay() == 5) {
          period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`;
      } else if (date.getDay() == 6) {
          period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`;
      } else (date.getDay() == 0) {
          period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
      }
     
    do {  
     b = false; 
     a /= 1.3;

      if (a == 9 || a == 10) {
          a = 11; 
       } else (a < 1) {
               a = 1;
       } 

        for (const i = 0; i < n-a; i++) {

         if (periods[i] > periods[i+a]) { 
           b = true; 
           var t = periods[i+a]; 
           periods[i+a] = periods[i]; 
           periods[i] = t; 
          } 
         } 
        } while (a > 1 || b); 
     }
     return periods;
  }
 } 

  renderItems(items) { 
   this.container.appendChild( element = document.createElement('div') ); 
   element.textContent = `Последнее изменение: ${this.updateTime.getDate() + '.' + this.updateTime.getMonth() > 9 ? : '0' + this.updateTime.getMonth() : this.updateTime.getMonth()}`; 

   items.forEach(function(item) { 
    const element = document.createElement('div', {textContent: item}); 
    this.container.appendChild(element); 
  });
 } 

  onChange() { 
   renderItems(this.createItems(this.createPeriod(this.inputValue))); 
  } 

  createPeriod(date) { 
   var newDate = date; 
    newDate.year = newDate.year + 1; 
     return { 
     start: date, 
     end: newDate 
    } 
  } 

	const range = Object.create(dateRange.prototype); 
	range.constructor = range.constructor.bind(range); 
	range.constructor(); 

});

Извеняюсь за такую "портянку". Подскажите, как еще можно оптимизировать(зарефакторить) данный js код?

Comments

[Pavel Shvedov]

и символ доллара потерялся в шаблонных строках

[Павел]

Егор Скороходов, со switch действительно меньше кода получилось:

switch(date.getDay()) {
		case 1: period = `{date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; break;
		case 2: period[i] = `{date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`; break;
		case 3: period[i] = `{date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`; break;
		case 4: period[i] = `{date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`; break;
		case 5: period[i] = `{date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`; break;
		case 6: period[i] = `{date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`; break;
		case 0: period[i] = `{date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; break;
	}

Спасибо за совет)

Answer 1

[Сергей delphinpro]

Берем портянку if-else

if (date.getDay() == 1) {
	period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
} else if (date.getDay() == 2) {
	period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`;
} else if (date.getDay() == 3) {
	period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
} else if (date.getDay() == 4) {
	period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
} else if (date.getDay() == 5) {
	period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`;
} else if (date.getDay() == 6) {
	period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`;
} else (date.getDay() == 0) {
	period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
}

и переписываем

let arr = [[-120,48], [null,168], [-24,144], [-48,120], [-48,120], [-72,96], [-96,72]];
let day = date.getDay();
let dateString1 = arr[day][0] === null ? date.toLocaleDateString() : date.setHours(arr[day][0]).toLocaleDateString();
let dateString2 = arr[day][1] === null ? date.toLocaleDateString() : date.setHours(arr[day][1]).toLocaleDateString();
period[i] = `${dateString1} - ${dateString2}`;

Плюс, если уж вы используете es6 синтаксис (классы у вас там, шаблонные строки), то объявляйте переменные через const/let, а не var

Comments

[marsdenden]

и еще можно убрать лишний цикл, вместо

for (var i = +period.start; i < +period.end; i+= 3600000 * 168) {
      dates.push(i);
    } 

    for (var i = 0; i < date.length; i++) { 

     var date = new Date(dates[i]),

сделать

let period=[];
    for (let dt = +period.start; dt < +period.end; dt+= 3600000 * 168) {

      let  date = new Date(dt),

тогда надо вместо
period[i] = `${dateString1} - ${dateString2}`;
использовать
period.push(`${dateString1} - ${dateString2}`);

в общем - нет предела совершенству