Pull to refresh

Как распутывать лапшу, не впадая в депрессию

Reading time4 min
Views18K
Эта статья не про ваши сладкие интерфейсы на реакте, ангуляре или что вы там используете? Это статья про те ситуации, когда у вас есть кучка jQuery лапши. Нет, пусть это будут горы jQuery лапши, завернутой во вьюшки бэкбона.

В статье используется библиотека Backbone.View.Elements

Проблема первая: маловыразительные селекторы


Все мы видели лапшу, все мы знаем: лапша в JSе — наверно и в верстке не все хорошо. А раз все так, то код, скорее всего, кишит непонятными манипуляциями с домом. Читать такой код сложно, ведь надо, не упуская мысли автора о том, что здесь вообще происходит, держать в уме кучку невнятных названий для элементов. Итак, давайте придадим коду немножко выразительности:
_selectors: function () {
    return {
        elemName: '.block__elem-name'
    };
}
Сложим все селекторы в одном месте и дадим понятное название элементам, для выбора которых они нужны. Выбирать мы их, кстати, будем вот так:
this._elem('elemName');
вместо
this.$('.block__elem-name');


В нашем случае вы можете сказать, что это мало добавило выразительности, но не забывайте, что у вас, скорее всего, не проект, использующий БЭМ для именования классов, а сладко пахнущие сверх семантичные селекторы вида
‘div > tr.row[data-active=”true”] a.red-Button’
для кнопок “купить”.

Помимо возможности выбрать элемент внутри нашей вьюшки, мы также получили возможность получить сам селектор по имени:
this._selector('elemName');
Это тоже бывает нужно.

Еще одно преимущество — если изменится верстка, то нам надо будет изменить селектор только в одном месте, потому что мы уменьшили дублирование кода.

Проблема вторая: хранение элементов


Знаете, бывает вот так:
$(‘div > tr.row[data-active=”true”] a.red-Button’).blahBlah();
а через 10 строк вот так:
$(‘div > tr.row[data-active=”true”] a.red-Button’).anotherBlahBlah();

Отодрав ладонь от лица, вы вынесете это в переменную
var $buyButton = $(‘div > tr.row[data-active=”true”] a.red-Button’);
ой нет, у вас же Backbone — вынесете в свойство
this._$buyButton = this.$(‘div > tr.row[data-active=”true”] a.red-Button’);
или вы уже подключили Backbone.View.Elements?
this._$buyButton = this._elem(‘buyButton’);

На самом деле не стоит — _elem и так все кеширует, так что просто
this._elem(‘buyButton’);

Кеширует, говорите? А что, если все изменится?


Да, мы тоже слышали, что в программировании две проблемы. Поэтому
this._findElem('elemName');
ищет без использования кеша
this._dropElemCache(‘elemName’);
почистит кеш для конкретного элемента, а
this._dropElemCache();
отчистит весь ваш кеш до блеска, когда вы поймете, что время пришло. Например, после рендеринга.

Глобальные элементы


А еще мы завернули в jQuery наиболее часто используемые элементы, чтобы не делать это больше одного раза в приложении. Встречайте:
this._$window;
this._$body;
this._$document;


Проблема третья: императивные стили


Вроде бы целый язык есть, чтобы стили описывать, но нет — то и дело в лапше можно найти красители:
$(‘div > tr.row[data-active=”true”] a.red-Button’).css({color: ‘magenta’});
Скорее поперчите все декларативностью и хорошенько перемешайте CSS:
.button_active {
  color: magenta;
}
А уж об манипуляции классами мы позаботились. Сначала обозначим все классы в одном месте:
_classes: function () {
    return {
        activeButton: 'button_active'
    };
}
А потом, хотите — добавляйте класс
this._addClass(‘activeButton’, ‘buyButton’);
хотите — удаляйте:
this._removeClass(‘activeButton’, ‘buyButton’);
хотите — переключайте:
var condition = !!Math.round(Math.random());
this._toggleClass(‘activeButton’, ‘buyButton’, condition);

Можно получить селектор, если класс уже описан:
this._selector(‘activeButton’); // returns ‘.button_active’
а можно и элементы поискать:
this._elem(‘activeButton’);
Только не забывайте про кеш, ведь активная кнопка наверняка меняется
this._findElem(‘activeButton’);

Проблема четвертая: когда всё сложно


Бывает, селекторы и классы формируются динамически:
var id = 5,
    state = ‘highlighted’;
$(‘.item[data-id=”’ + id + ’”]’).addClass(‘item_state_’ + state);
Тут в дело вступают сложные селекторы:
_classes: function () {
    return {
        itemInState: 'item_state_%s'
    };
},

_selectors: function () {
    return {
        itemById: '.item[data-id=%s]'
    };
}
Тогда справедливо будет следующее:
this._class(‘itemInState’, ‘highlighted’); // вернет ‘item_state_highlighted’
this._selector(‘itemInState’, ‘highlighted’); // вернет ‘.item_state_highlighted’
this._selector(‘itemById’, 5); // вернет ‘.item[data-id=5]’

А манипуляция описанная выше будет выполняться следующим образом:
var id = 5,
    state = ‘highlighted’;
this._addClass([‘itemInState’, state], [‘itemById’, id]);
Класс item_state_highlighted добавится элементу, найденному по селектору .item[data-id=5]

Терминальная сложность селекторов


_classes: function () {
    return {
        item: 'item_%(mod)s_%(value)s'
    };
}
Каждому месту свое имя
this._elem(‘item’, {
  mod: ‘state’,
  value: ‘focused’
});
Найдет jQuery коллекцию по селектору ‘.item_state_focused’

Проблема пятая: получение данных


Немножко сахара для дата атрибутов.
this._data;
Хранит данные корневого элемента вью. Так что, если у вас есть div
<div data-some-ids=”[5,6,7]”></div>
на котором инициализирована вью
this._data[‘someIds’]; // вернет массив [5,6,7]
А если данные хранятся в конкретном элементе, то вам поможет
this._getElemData(‘elemName’, ‘someIds’);
Для того, чтобы получить все данные:
this._getElemData(‘elemName’); // вернет {someIds: [5,6,7]}


Про установку и использование


GitHub: github.com/backbonex/backbone.view.elements
todomvc с использованием Backbone.View.Elements и без него
Tags:
Hubs:
Total votes 22: ↑19 and ↓3+16
Comments30

Articles