Наразі ми зробили досить гарну роботу з організації. Розбиття нашого HTML у шаблоні було великим кроком. Ми, так би мовити, довше мутимо води. Наші різні функціональні функції в JavaScript розбиті на непомітні розділи, що полегшує розуміння та обслуговування. Я знаю, що ми працювали з досить невеликою демонстрацією, але, сподіваюся, ви можете собі уявити, як у міру ускладнення програми та збільшення кількості рядків коду ця організація неймовірно цінна.
JavaScript не має жодної “думки”, як щодо організації. Ймовірно, тому деякі люди це люблять, а деякі люди почуваються загубленими в ньому. Як ви вирішите організувати це, повністю залежить від вас. Це також ймовірно, чому деякі люди дійсно фіксуються на рамках, які, сумнівні чи ні, забезпечують організаційну структуру. Наприклад, Backbone. Але це вже інша серія!
Для нашої демонстрації ми просто організуємо об’єкт, який ми просто створюємо.
var Movies = ( )Кожна річ, яку ми робимо тут, пов’язана з розміщенням на сторінці кількох фільмів, тому ми будемо містити їх у межах однієї “речі”, яка називається “Фільми”. Пам’ятайте, що ми просто робимо все, що для нас має сенс організаційно. Це має вигоду лише внесення однієї змінної у “глобальний обсяг”. Якби ми робили все в глобальному масштабі, це було б безлад випадково перевизначення змінних (і функцій, і чого завгодно), оголошених деінде.
Такий об'єкт насправді нічого не "робить". Нам потрібно буде «розпочати».
var Movies = ( init: function() ( ) ) Movies.init();Наявність функції з іменем init - це трохи стандарт, який дозволяє кожному, хто читає цей код, знати, що код там є тим, що запускається, коли ця група коду виконується. Це має нагадувати зміст того, що відбувається з цією групою коду. Потім ми робимо інші функції (більше властивостей об’єкта Movies), які виконують те, що нам потрібно робити, окремими шматками. Пам’ятайте, що ми можемо називати речі як завгодно, що б для нас мало сенс.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Досить ясно, так? Ви можете помітити, що appendMovesToPageйого не викликають у init. Це тому, що ми не можемо зателефонувати до цього, поки не отримаємо дані для їх надсилання. Ці дані надходитимуть із дзвінка Ajax, тобто нам потрібен зворотний дзвінок. Тож у getDataкінцевому підсумку покличемо цього.
Все інше, що тут буде заповнено, - це просто переміщення бітів коду, який ми вже записали, у потрібне місце.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
І готово.
Давайте розглянемо чотири проблеми, які ми виклали раніше, і подивимося, що ми з ними зробили.
- Отримання даних. Ми перемістили JSON у файл, з яким можемо потрапити
$.getJSON, оскільки, швидше за все, нам доведеться це робити в реальній ситуації. Окрім простої практики, це дозволить нам писати тести навколо цього. - Логіка відображення. Тепер у нас є дуже специфічна функція appendMoviesToPage, яка викликається, коли ми готові додати наші фільми на сторінку. Одноцільові функції чудово підходять для (знову ж таки) організації, зрозумілості та ремонтопридатності.
- Обробка подій. Використовуючи делегування подій, ми більше не змішуємо цю “ділову логіку” з логікою відображення або шаблоном. Нам навіть не потрібно турбуватися про виконання замовлення джерела, оскільки ми врешті-решт приєднуємо події до
document. Наша функціональність буде працювати незалежно від того, коли / як шаблон додається до сторінки. - Шаблонування. Повністю перейшов на використання бібліотек, призначених спеціально для створення шаблонів.
Я б назвав цю перемогу. Ось де ми опинились:
Дивіться Pen BwbhI від Chris Coyier (@chriscoyier) на CodePen