До сада смо прилично добро одрадили посао организовања. Израда нашег ХТМЛ-а у шаблону био је велики корак. Такорећи више мутимо воде. Наши различити делови функционалног ЈаваСцрипт-а подељени су у дискретне одељке, што олакшава разумевање и одржавање ствари. Знам да смо радили са прилично малим демонстрационим програмом, али надам се да можете да замислите како је, како апликација постаје компликованија и што више линија кода, ова организација невероватно вредна.
ЈаваСцрипт нема никакво „мишљење“ као о организацији. То је вероватно разлог зашто га неки људи воле, а неки се осећају изгубљеним у њему. Начин на који ћете то организовати зависи од вас. То је такође вероватно због чега се неки људи заиста уклапају у оквире који, убеђени или не, пружају организациону структуру. На пример, Бацкбоне. Али то је друга серија!
За нашу демонстрацију једноставно ћемо се организовати око објекта који једноставно креирамо.
var Movies = ( )Свака ствар коју овде радимо повезана је са приказивањем неких филмова на страници, тако да ћемо их садржати у оквиру једне „ствари“ која се зове Филмови. Запамтите да само радимо све што за нас има организационог смисла. То има предност што само једну променљиву стављамо и у „глобални опсег“. Ако бисмо све радили у глобалном опсегу, то би била збрка случајно надјачавањем променљивих (и функција и било чега другог) декларисаних негде другде.
Такав објекат заправо заправо „не ради“ ништа. Мораћемо да га „започнемо“.
var Movies = ( init: function() ( ) ) Movies.init();Имати функцију названу инит је помало стандард који омогућава свима који читају овај код да зна да код у њему постоји оно што се покреће када се изврши ова група кода. То би требало да чита помало као садржај онога што се дешава са овом групом кода. Затим правимо друге функције (више својстава објекта Мовиес) које раде ствари које треба да радимо, у дискретним деловима. Запамтите да ствари можемо називати како год желимо, шта год за нас има смисла.
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. То је зато што то не можемо назвати док немамо податке за слање. Ти подаци ће доћи из Ајак позива, што значи да нам је потребан повратни позив. Па 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();
И готово.
Погледајмо четири забринутости које смо раније истакли и видећемо шта смо учинили с њима.
- Добијање података. Пребацили смо ЈСОН у датотеку коју бисмо могли погодити
$.getJSON, јер је вероватно да ћемо то морати да урадимо у стварној ситуацији. Осим што ћемо само вежбати, ово ће нам омогућити да око тога напишемо тестове. - Логика приказа. Сада имамо врло специфичну функцију аппендМовиесТоПаге која се позива када смо спремни да додамо своје филмове на страницу. Једнонаменске функције су одличне за (опет) организацију, разумљивост и одрживост.
- Руковање догађајима. Коришћењем делегирања догађаја више не мешамо ову „пословну логику“ са логиком приказа или предлошком. Не морамо ни да бринемо о извршењу изворног налога, јер на крају догађаје повезујемо са
document. Наша функционалност радиће без обзира када / како је предложак додат на страницу. - Темплатинг. Потпуно премештен да користи библиотеке намењене посебно за шаблонирање.
Ја бих то назвао победом. Ево где смо завршили:
Погледајте оловку БвбхИ Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у