1. JavaScript / Говнокод #25338

    +2

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    let tableCellHamburgers = Array.prototype.slice.call(document.getElementsByClassName('js-listen__letters-table__hamburger'));
      tableCellHamburgers.forEach((tableCellHamburger) => {
    	let code = Array.prototype.slice.call(tableCellHamburger.classList).filter(elem => elem.indexOf('js-table__cell__hamburger__') === 0)[0].replace('js-table__cell__hamburger__', '');
    	let searchInput = document.querySelector(`.js-table__cell__search-input__${code}`);
    	if (!(searchInput && searchInput.value)) {
    	  tableCellHamburger.style.filter = 'none';
    	}
    	let dropdownContent = document.querySelector(`.js-table__cell__dropdown-content__${code}`);
    	if (dropdownContent) {
    	  dropdownContent.style.display = 'none';
    	}
      });

    Автор этого кода (full-stack программист) собирался выпилить jQuery из проекта, т.к. всю работу с DOM давно можно красиво писать на чистом ES6. К счастью, он уволился, не осуществив свой замысел.

    Запостил: webviewer, 30 Января 2019

    Комментарии (24) RSS

    • И в чем он не прав? гитхаб пидорнул жуквери.
      Ответить
      • На Жуквери можно было бы написать чуть менее многословно:
        $('.js-listen__letters-table__hamburger')each(function(){
            var code = $(this).find('.js-table__cell__hamburger__:first').removeClass('js-table__cell__hamburger__');
            var searchInput = $(.js-table__cell__search-input__'+code);
            if (!(searchInput && searchInput.value)) {
        	  $(this).css('filter', 'none');
            }
            $('.js-table__cell__dropdown-content__'+code).hide();
        ));


        Представь, сколько буков можно сократить!
        Ответить
        • Всё это можно не намного длиннее написать на жс.
          Ответить
          • Покажите класс!
            Ответить
            • Подержите мое п̶и̶в̶о̶ смузи!
              let tableCellHamburgers = Array.from(document.getElementsByClassName('js-listen__letters-table__hamburger'))
              	.map(tableCellHamburger => ((code => (
              		((selector, style) => {style.filter = selector && selector.value ? style.filter : 'none'})
              		(document.querySelector(`.js-table__cell__search-input__${code}`), tableCellHamburger.style),
              		(dropdownContent => {if(dropdownContent) dropdownContent.style.display = 'none'})
              		(document.querySelector(`.js-table__cell__dropdown-content__${code}`))
              	))(Array.from(tableCellHamburger.classList).find(elem => !elem.indexOf('js-table__cell__hamburger__')).replace('js-table__cell__hamburger__', '')),tableCellHamburger));
              Ответить
    • Да тут и ES6 не нужен:
      var tableCellHamburgers = document.getElementsByClassName('js-listen__letters-table__hamburger');
      for(var i = 0; i < tableCellHamburgers.length; ++i) {
      	var code = tableCellHamburgers[i].classList.filter(function(elem){return elem.indexOf('js-table__cell__hamburger__') === 0;})[0].replace('js-table__cell__hamburger__', '');
      	var searchInput = document.querySelector('.js-table__cell__search-input__'+code);
      	if (!(searchInput && searchInput.value)) {
      	  tableCellHamburgers[i].style.filter = 'none';
      	}
      	var dropdownContent = document.querySelector('.js-table__cell__dropdown-content__'+code);
      	if (dropdownContent) {
      	  dropdownContent.style.display = 'none';
      	}
        }


      Кстати, какая польза от Эррей.прототайп.слайс.кал с одним аргументом, которым так пестрит код?
      Ответить
      • Мне кажется, что вызывая slice без аргументов, автор хотел копировать массив. Зачем ему при этом Araray, prototype и call, я не знаю.
        Ответить
      • for.. of, долбоеба кусок! Сука бесит, дали им форич - нет, хочу говно жрать. И это программисты?
        Ответить
        • От долбоёба слышу! for...of –— это ES6. Моей же задачей было показать, что и без ES6 можно написа́ть код, не требующий Жуквери.
          Ответить
          • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Specifications
            А где поддерживаются браузеры, не умеющие в ES 2015?
            Ответить
      • Возможно, результат
        document.getElementsByClassName('js-listen__letters-table__hamburger')
        может быть не массивом, но при этом иметь свойство length и поддерживать доступ по индексу.
        Ответить
    • А нет ли здесь говна в пятой строчке? searchInput –— это же массив, поэтому searchInput.value будет означать какую-то фигню.
      Ответить
      • > searchInput –— это же массив, поэтому searchInput.value будет
        статическая тупизация не нужна, правда?
        Ответить
        • Кокококонечно! Если бы тупизация была статической, кокококомпилятор сразу бы зарубил кококод и программист не смог бы сдать работу. А при динамической ошибка может обнаружиться только через несколько месяцев эксплуатации, кокококогда программист уже получил свою порцию «Роллтона».
          Ответить
    • > Array.prototype.slice.call
      Я хуею с этого дизайна.
      Ответить
      • Это же JavaScript, он должен быть плохим и неудобным.
        Ответить
        • То ли дело «Lua»: setmetatable –— и всё сразу понятно.
          Ответить
          • т.е. ты утверждаешь что .prototype хуже чем .__index? с каких хренов то :)?
            Ответить
            • что за чушь я только что прочитал? какое отношение prototype имеет к index?

              prototype это анальный костыль от прототипного наслдедования которое обосралось до такой степени, что в джаваскрипт наконец завезли классы

              А __index это просто волшебный метод который надо определеить в метатаблице
              Ответить
              • жуткий бред ты пишешь.

                то что жабаскрипт делает с prototype. туже лажу делает lua только в два притопа типа
                a = {},
                a.__index = {}
                setmetatable(a, a);

                точнее сказать жаба просто не показывает что она делает, в луа тебе это надо делать самому - вот и вся разница
                Ответить
    • Array.prototype.slice.call(tableCellHamburger.classList).filter(elem => elem.indexOf('js-table__cell__hamburger__') === 0)[0]

      Человек Array.prototype.find не знает, а уже переводить на ES6 хотел?
      Ответить
    • Этот код на jQuery (с небольшим рефакторингом верстки)
      $('.js-hamburger').each((index, el) => {
              const $hamburger = $(el);
              const $cell = $hamburger.closest('.js-table-cell');
              const $clearFilterButton = $cell.find(`.js-clear-filter-button`);
              const isFilterValueExist = !!$cell.find('.js-filter-search').val();
              if (!isFilterValueExist) {
                $hamburger.removeClass('filter-hamburger-active');
                $clearFilterButton.hide();
              } else {
                $clearFilterButton.show();
              }
              $cell.find('.js-drop-down-content').hide();
            });
      Ответить

    Добавить комментарий