Основен JavaScript: петте най-добри MVC рамки

Масивният растеж на богатите, JavaScript -тежките уеб приложения доведоха до огромен набор от рамки, предназначени да ви помогнат да създавате приложения. Има толкова много, че често може да бъде трудно да изберете кой най-добре отговаря на вашите нужди, така че в тази статия ще обсъдя пет от най-популярните и ще разгледам къде се крие всяка от силните им страни.

Не бива да основавате решението си изцяло на тази статия - насърчавам ви да играете по-нататък с рамка, преди да се ангажирате - но се надявам, че това ви насочва в правилната посока.

Повечето рамки следват приблизително това, което е известно като MVC модел: модел, изгледи и контролери. Моделите се занимават с данни, извличат ги от бази данни и ги връщат. След това изгледите показват данните, а контролерите свързват моделите и изгледите заедно. Разбира се, това е много опростено обяснение, но по същество идеята е презентацията и данните да бъдат напълно отделени, което носи огромни ползи, тъй като кодът ви започва да се усложнява. Ако някога сте работили с рамка като CodeIgniter или Rails, подходът MVC ще ви е познат.



01. Backbone.js

Започваме с една от най-известните рамки, Backbone.js . С Backbone вашите данни се представят в модели. След това моделите могат да се съдържат в колекции, които са колекция от екземпляри на модели. Изгледите предлагат и нещо повече от шаблони за показване на данни, те също се справят със свързващи събития. Едно от любимите ми неща за Backbone е изключително обширна документация , което го прави много по-лесно наистина да се справите с рамката.

Важна забележка е, че в Backbone няма такова нещо като типичен контролер. Работата на контролера обикновено се извършва частично от Views - те съдържат логика на потребителския интерфейс, заедно с репресиращи данни, както ще видим скоро, и Backbone Router, който съпоставя URL адресите към функциите. Колекциите са описани на Backbone сайта като „Група модели от страна на клиента, с логика за сортиране / филтриране / агрегиране“.

Обикновено определяте методи за филтриране на вашите данни в колекции. Например примерното приложение Backbone todo дефинира методи за филтриране само на задачите, отбелязани като „готово“:

var TodoList = Backbone.Collection.extend ({
...
готово: function () {
върнете this.filter (функция (todo) {return todo.get ('готово');});
}
...
});

Горното приложение todo си заслужава да бъде разгледано, ако сте нов в Backbone - то е напълно коментирано и е много полезно, когато става въпрос за решение как най-добре да изложите приложението си. Един от проблемите (ако можете да го наречете така) с Backbone е, че има много различни начини за постигане на една и съща крайна цел. Не се бъркайте, ако онлайн уроците правят нещата малко по-различно.

MVC рамка: Backbone.js

Според мен Backbone е чудесен за малки приложения с една страница и по този начин съм склонен да го използвам. Въпреки това има много хора, които са създали впечатляващи, огромни приложения с него, включително USA Today и Нов Rdio . Още много са цитирани на Основен сайт . Насърчавам ви да опитате и да видите как го намирате.

02. Ember.js

Второто е Ember.js . Докато Backbone е доста ниско ниво, с много код, който трябва да напишете сами, като код за актуализиране на изгледа, когато данните на модела се променят, Ember прави много от това за вас. Той е по-мнителен, защото се опитва да направи много повече за вас, но това също така води до това, че трябва да пишете по-малко код.

Основните характеристики на Ember са свързването на данните; обектите в Ember могат да обвързват свойства помежду си, така че когато свойството се промени в единия обект, другият се синхронизира. Другата е възможността за дефиниране на функции на обект, които след това можете да третирате като свойства. Следователно, ако моделът има собствено и фамилно име, можете да създадете функция за дефиниране на пълното име на човек и да го третирате така, сякаш моделът има свойство на пълно име. Например, ето как можете да дефинирате такова свойство:

fullName: function () {
var firstName = this.get ('firstName');
var lastName = this.get ('lastName');
връщане firstName + '' + lastName;
} .property ('firstName', 'lastName')

След това можете да се позовавате на fullName, сякаш е собственост в целия ви код и във вашите изгледи. Например с дефинираното по-горе свойство изгледът ви може да изглежда по следния начин:

Здравейте, {{пълно име}} !

И това ще се актуализира автоматично, когато стойността се промени. Комбинацията от свързване на данни и изчислени свойства е много мощна.

Идвайки от гледна точка на гръбначния стълб, функцията, която най-вероятно ще ви привлече, е, че Ember автоматично актуализира своите изгледи при промяна на данните - спестявайки ви много работа. Тази публикация за сравнение между двете обобщава доста добре: „Гръбнакът е по-явен и по-малко вълшебен“. В зависимост от вашата гледна точка това може да бъде добро или лошо нещо. Някои предпочитат Backbone, защото той улеснява нещата и ви позволява да правите всичко, както искате, докато Ember прави много повече за вас. Рамка, която прави повече за вас, означава, че се отказвате от част от контрола, но печелите време, без да се налага да пишете код, за да се справяте с голяма част от светската функционалност.

MVC рамка: Ember

Ember има и по-традиционни контролери. Изгледите (обикновено написани на ръкохватки) предоставят начини за прикачване на определени бутони или връзки към действията на контролера на Ember. Разбира се, контролерите не трябва да се занимават с актуализиране на съдържанието, но могат да съхраняват методи за справяне с почти всичко останало. Тук ще отидат повечето от вашите методи, които се занимават с данните. Например в приложение за задачи можете да напишете методи, които връщат само попълнените задачи или методите, които запазват друг елемент на задача.

03. Angular.js

Следва предложението на Google, сравнително ново Ъглов JS . Angular възприема малко по-различен подход, като свързва данни директно във вашия HTML. Той също така използва просто обикновен JavaScript за своите контролери, което означава, че няма нужда да разширявате други обекти, както трябва да правите в други рамки. Обвързването на данни означава, че данните в изгледите се актуализират автоматично, когато данните се променят, но също така Angular улеснява свързването на формуляри с модели, което означава, че голяма част от кода, който обикновено пишете, за да свържете формуляр за създаване на нов екземпляр на модел, не е необходими. Неговото свързване на данни е двупосочно. Например, ето HTML за формуляр за приложение todo (взето от документацията на Angular):


placeholder = 'добави ново задание тук'>

Забележете използването на ng- * атрибути в HTML, където се крие по-голямата част от магията. Атрибутът ng-submit ще заснеме събитието за изпращане на формуляр и ще го предаде на метода addTodo, който е метод на todo контролера. Като декларирате атрибута ng-model в текстовото поле, можете лесно да получите стойността, без да се налага да се позовавате на DOM елемента на полето и да грабвате стойността.

MVC рамка: Angular.js

Премествайки голяма част от обвързването директно в HTML, Angular ви оставя много по-леки контролери и по-малко JavaScript за писане. Може да отнеме известно време, за да си обърнете главата, но този подход е наистина мощен. Началната страница на Angular съдържа множество примерни приложения и видеоклипове на тези приложения, които се изграждат, така че ако това ви интересува, силно препоръчвам да ги разгледате.

04. Нокаут.js

Knockout.js е рамка на MVVM (Model-View-View Model), написана на чист JavaScript. Рамките на MVVM са разделени на три части. Първо, има модели, които са точно това, което бихте очаквали. Обикновено тези данни се синхронизират със сървър.

След това имате модели на преглед, които са чист JavaScript и представляват кодово представяне на вашите данни, заедно с излагащи методи за манипулиране на данните - те са толкова близки до контролерите, колкото идва MVVM рамката. Основната част от вашата логика отива в тях. Накрая има изгледи, които показват информацията. Те са написани в чист HTML с обвързвания, вмъкнати като атрибути (подобно на това, как го прави Angular JS), който Knockout след това използва за актуализиране на изгледите с данните. Нокаутът прави това вместо вас.

Като пример, за да покажа свойството firstName на екземпляр на модел, моят изглед ще съдържа:

Първо име:

След това активирате Knockout, като прилагате обвързванията. Предавате тази функция на екземпляр на вашия модел на изглед, който определя стойността на свойствата. Например нещо като:

функция AppViewModel () {
this.firstName = 'Bert';
};

След това можете да активирате обвързванията по следния начин:

ko.applyBindings (нов ViewModel ());

MVC рамка: Knockout.js

И ще видите силното таг шоу „Bert“. Този код е взет от интерактивния KO урок , което е най-доброто място да започнете, ако се интересувате да научите повече.

05. Batman.js

И накрая, исках да избера нещо различно от всичко по-горе и продължих Batman.js , и не само заради името. Батман е написан на CoffeeScript. Той може да се използва с JavaScript или CoffeeScript, но вашият код ще изглежда много по-изчистен в CoffeeScript, тъй като Батман използва класовете на CoffeeScript силно.

Бих препоръчал Батман само ако с удоволствие пишете CoffeeScript. С Batman създавате екземпляр на Batman.App, който действа като обвивка около вашето приложение. След това създавате контролери и модели в рамките на този клас на приложение. Класовете на приложения са много прави:

клас Всичко се разширява Batman.App
@global да
@root 'всички # индекс'

Първият ред го задава на глобален, така че се добавя като свойство на глобалния обект. Вторият ред ще изглежда познат на хората с опит в Rails. Това задава основния път на приложението да бъде действието на индекса на контролера. Контролерите и методите се добавят като свойства на този клас. Батман също използва обвързване на данни в HTML. За пример, за да изведете елемент от списък за всеки елемент в модела на продукта, е толкова лесно, колкото:


  • името ще отиде тук
  • Батман е чудесен избор, ако сте фен на CoffeeScript. Бързо е да се съберат прости приложения и вероятно е и рамката, за да останете най-близо до това, което бих приел за типичен модел на MVC.

    MVC рамка: Batman.js

    Ник Смол, създателят на Batman.js, има страхотна презентация за това как и защо трябва да използвате Batman.js. За съжаление изглежда не е толкова популярен, колкото другите рамки там, което според мен е жалко, тъй като сумата, която можете да направите в такъв малък код, е фантастична.

    06. Заключение

    В тази статия беше много трудно да се изберат пет рамки и да се опита да им се даде справедлив преглед с ограничен брой думи. Последните четири са доста сходни, като Backbone вероятно е странният. Това ви оставя да свършите повече работа и не предоставя обвързвания, ключова характеристика на останалите, но ако искате пълен контрол над всичко, е добре да разгледате.

    Основният съвет, който бих дал, е да разгледате приложения, написани в тези библиотеки, и да се опитате да напишете свои собствени малки приложения, преди да се ангажирате с едно. Всеки има фини разлики, които или ще ви подхождат, или не и е добре да ги откриете по-скоро, отколкото по-късно.

    Разбира се, има много повече от тези пет и Всички MVC проектът е чудесно място да започнете, ако искате да проучите други опции. Този сайт има огромна колекция от приложения, написани в голямо разнообразие от рамки, включително всички, споменати в тази статия. Можете да намерите хранилището на тези приложения на Github .

    Благодарение на Ади Османи за неговия партньорски преглед на тази статия

    Джак Франклин е 20-годишен разработчик, живеещ в Лондон, Великобритания. Той води блог за JavaScript на javascriptplayground.com и също пише PHP, Ruby и други езици. Той туитва като @Jack_Franklin.

    Хареса ли ви това? Прочетете тези!