Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.05.2020, 07:38
Новичок на форуме
Отправить личное сообщение для Космос Посмотреть профиль Найти все сообщения от Космос
 
Регистрация: 04.05.2020
Сообщений: 6

Как думаете, можно ли так делать?
Здравствуйте, пишу календарь, решил сформировать массив вот так:

for(var a in b = {"start - 1": "x + (count[(month ? (month - 1) : 11)] - (start - 2))", "count[month]": "i", "49 - (c + 1)": "i"}){

var i = 0, c = days.length - 1;

Array.from(Array(eval(a)).keys(), x => {

i++;
days[c + i] = eval(b[a]);

});

}

Как думаете, можно ли так писать?

P.S.: Код по ссылкам написан для наглядности, интересует Ваше мнение именно по этому фрагменту кода.

Полный пример находится тут https://codepen.io/cosmoweber/pen/xxwPaPN

Просмотр https://codepen.io/cosmoweber/full/xxwPaPN

Последний раз редактировалось Космос, 04.05.2020 в 07:41.
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2020, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

календарь, вывод месяца, смена языка.
Космос,
на всякий случай, вариант без eval.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calendar</title>
  </head>
  <body>
    <style>

      .day {
        border: 1px solid #ccc;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 1px;
        background-color: #B0C4DE;
      }
      .month :nth-child(1) {
        width: 100%;
        flex:  0 0 auto;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

      }
      .month :nth-child(1):first-letter {
        text-transform: capitalize;
      }

      .month {
          display: flex;
          flex-wrap:wrap;
          width: 238px;
          height: 238px;
          justify-content: space-around;
          margin: 30px auto;
      }
      .month.vert{
          flex-direction: column;
      }
      .day.holidays{
         background-color:  #FF85C6;
      }
      .day.op{
          opacity: .6;
          background-color:  #D3D3D3;
      }

      .day:nth-child(-n + 8) {
          color: #FFFFFF;
          font-weight: bold;
      }
     </style>
    <div class="ru month"></div>
    <button type="button" onclick="calendarRu.up(1)">следующий месяц</button>
    <div class="en month"></div>
    <button type="button" onclick="calendarEn.up(1)">next month</button>
    <script>
class Calendar {
    constructor(year, month, lang = 'ru', element) {
        this.year = year;
        this.month = month - 1;
        this.lang = lang;
        this.startDay = {
            ru: 1,
            en: 7
        };
        this.element = element;
        this.days = {
            "en": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
            "ru": ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]
        };
        this.holidays = {
            en: [6, 0],
            ru: [6, 0]
        }
        this.up = this.render.bind(this);
        this.up();
    }
    update(up = 0) {
        this.month += up;
        let stepDay = new Date(this.year, this.month, 1);
        this.nameMonth = new Intl.DateTimeFormat(this.lang, {
        month: "long", year : 'numeric'}).format(stepDay);
        let deltaDay = (7 + (stepDay.getDay() || 7) - this.startDay[this.lang]) % 7;
        stepDay.setDate(stepDay.getDate() - deltaDay);
        let data = this.days[this.lang].map((date, i) => ({
            day: (i + this.startDay[this.lang]) % 7,
            date
        }));
        let lastDay = new Date(stepDay);
        lastDay.setDate(lastDay.getDate() + 41);
        while (stepDay <= lastDay) {
            data.push({
                day: stepDay.getDay(),
                date: stepDay.getDate()
            });
            stepDay.setHours(24);
        }
        return data;
    }
    render(up) {
        let data = this.update(up);
        let op = false;
        let html = `<h3>${this.nameMonth}</h3>`;
        for (let i = 0; i < data.length; i++) {
            let {day, date} = data[i];
            if (i == 7) op = true
            if (date == 1)  op = !op;
            let cls = this.holidays[this.lang].includes(day) ? 'day holidays' : 'day';
            if (op) cls += ' op';
            html += `<div class="${cls}">${date}</div>`;
        }
        this.element.innerHTML = html;
    }
}
let elemRu = document.querySelector('.ru');
let calendarRu = new Calendar(2020, 5, 'ru', elemRu);
let elemEn = document.querySelector('.en');
let calendarEn = new Calendar(2020, 5, 'en', elemEn);

    </script>
  </body>
</html>

Последний раз редактировалось рони, 04.05.2020 в 15:54.
Ответить с цитированием
  #3 (permalink)  
Старый 04.05.2020, 14:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сообщение от Космос
for(var a in b = {"start - 1": "x + (count[(month ? (month - 1) : 11)] - (start - 2))", "count[month]": "i", "49 - (c + 1)": "i"}){
Сообщение от Космос
можно ли так делать?
Нельзя.

Вынесите инициализацию переменной «b» из for;
Давайте осмысленные названия переменным;
Избавьтесь от eval (вам они не нужны, вашу задумку можно и без eval реализовать).
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2020, 05:32
Новичок на форуме
Отправить личное сообщение для Космос Посмотреть профиль Найти все сообщения от Космос
 
Регистрация: 04.05.2020
Сообщений: 6

Сообщение от Nexus Посмотреть сообщение
Избавьтесь от eval (вам они не нужны, вашу задумку можно и без eval реализовать).
То что можно без eval это да, eval я применил, чтобы код меньше получился, а чем eval плох в данном случае?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно передать значения из Javabeans в JS stavatar@yandex.ru Общие вопросы Javascript 0 10.12.2019 21:46
К ключ массива date передать массив значений Id Julia1991 AJAX и COMET 60 21.10.2019 13:47
Как можно сделать такую карту Giorgi jQuery 1 18.08.2017 11:13
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Dreamweaver CS5.5 и ООП. Не выводит подсказки методов. Как можно исправить? jsuse Общие вопросы Javascript 3 23.03.2012 19:57