Досега свършихме доста добра работа, за да се организираме. Получаването на нашия 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