Фільтруй правильно, або шкідливі поради щодо фільтрації Angular.Js



Всім привіт. Ця стаття писалася досить довго, кілька разів переписувалася заново, і, в результаті, мене не влаштувала. Аж надто менторський виходив тон. А тут, раптом, гряде п'ятниця, кінець спринту, і це означає, що можна розслабитися. І так, не сприймайте занадто серйозно, всього лише кілька порад про те, як готувати фільтри в Angular.JS

Кому цікаво або хочеться трохи розслабитися — вперед під кат і всім гарної п'ятниці!

1. Використовуйте фільтри завжди і скрізь. Для заголовків сторінок, назв колонок, списку товарів. Фільтри виконуються кожен дайджест, а значить, користувач точно нічого не втратить. Чим більше фільтрів на сторінці – тим краще. До того ж, потім, в кожен фільтр ви зможете додати логіки.

2. Робіть фільтри універсальними. Фільтр повинен вміти фільтрувати все. Від товарів до embedded base-64. Всього один фільтр, якихось двадцять параметрів і ваша команда щаслива. Адже все працює «з коробки», і писати нічого не треба. А якщо цей фільтр вміє ще й перекладати текст в нижній регістр, то визнання вас знайде. Неминуче.

3. Завжди додайте в ваш фільтр логгирование. Так налагоджувати набагато простіше. І, повірте на слово, той, хто буде розбирати ваші логи, точно не залишиться без роботи.

4. Давайте фільтрів тільки загальні назви. А раптом його хтось потім зробить універсальним! Не перейменовувати ж потім! До того ж так вашим колегам буде набагато цікавіше читати розмітку. Можна сказати, квест подаруйте їм. Безкоштовний.

5. Infinitie Scroll повинен бути реалізований тільки на фільтрах і ніякої підвантаження даних. Сходили на сервер, вивантажили всю таблицю, а далі нехай наші фільтри працюють. Не даремно ж ви їх писали. Навантаження на сервер менше, хостинг можна взяти дешевше, а вам «благодарочка».

6. Бізнес логіка повинна бути тільки в фільтрах. Тому що – «І» — Інкапсуляція.

7. Взагалі ховайте у фільтри всю логіку. Так надійніше. А якщо не виходить, то хоча б саму «важку». І чим важче, тим краще. Можна там всякі складні розрахунки проводити або DOM міняти. А ще краще сервер смикати. Прямо з фільтра. Користувач не поїзд, почекає! Зате у вас будуть найтонші сервіси і контролери. Як раз похвастаетесь на наступному співбесіді.

8. до Речі про DOM. Хто сказав, що для маніпуляцій з ним потрібно використовувати директиви? Фільтри, це найкраще місце для $('#user_icon').trigger('click');

9. Коммуницируйте фільтри. Нехай один фільтр, щось змінює у другому фільтрі. Краще всього через $broadcast. І краще всього вхідні дані. Так дебаг перетворитися на веселу і цікаву гру, що розвиває увагу, концентрацію і знання основ ядра Angular. І взагалі, завжди використовуйте $broadcast. Це стильно.

10. Збирайте фільтри в ланцюжки! Якщо в ланцюжку менше трьох фільтрів це не кошерно! Можна навіть пропозиції фільтрами писати. Для колег або просто цікавих користувачів.

11. Комбінуйте фільтри з ng-mouse-over. Це весело! Можна навіть в хендлере mouse-over нічого не писати. Головне повісьте його на body і зачекиньте в п'ятницю ввечері. Особливе задоволення отримаєте, якщо у вас Continues Integration.

12. Не оптимізуйте. По-перше, рання оптимізація вбиває. По-друге, це робота фреймворка. Ви ж не будете робити чужу роботу, правильно?

І головне, знайте. Не фільтри гальмують ваш додаток. А нерозуміння і недооцінка Вас, як розробника!

Для цікавих.Фільтри в Angular це така функція, яка викликається кожен дайджест. Тобто часто, дуже часто, і кілька разів поспіль. Контролю над початком фільтрації немає, контролю над закінченням немає. Піднімати події марно і небезпечно. При необережному поводженні легко перетворює додаток в гарбуз. А, так, «з коробки» інструментів для оптимізації фільтрів теж немає.

Для більш цікавих.Перемогти це не просто і кожен знаходить своє рішення для конкретного випадку. Наприклад фільтрацією на стороні, використання ng-change, isDirty, INotifyOnPropertyChange, кешування, $scope.$watch(function getData(){}, true) і так далі. Хоча останнє я вам не раджу бо це може бути навіть гірше. Ще кажуть CodeReview допомагає, але це взагалі шаманство.

Для самих цікавих.
.directive('onRepeatFinish', [function () {
return {
restrict: 'A',
link: function (scope, elem, attr) {
if (scope.$last === true) {
console.log('ngRepeatFinished');
};
}
}
}]);

Якщо що, ось «це» для параметризованих фільтрів не працює.


Всім гарної п'ятниці.

А як ви використовуєте фільтри в Angular.JS?

/>
/>


<input type=«radio» id=«vv72729»
class=«radio js-field-data»
name=«variant[]»
value=«72729» />
Використовую як описано в радах.
<input type=«radio» id=«vv72731»
class=«radio js-field-data»
name=«variant[]»
value=«72731» />
Використовую з обережністю.
<input type=«radio» id=«vv72733»
class=«radio js-field-data»
name=«variant[]»
value=«72733» />
Намагаюся уникати.
<input type=«radio» id=«vv72735»
class=«radio js-field-data»
name=«variant[]»
value=«72735» />
Як не замислювався.

Проголосував 41 людина. Утрималося 22 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.