Мы проделали довольно хорошую работу по организации. Разбить наш 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 Криса Койера (@chriscoyier) на CodePen