Att skapa och kanske framförallt bibehålla en schyst, begriplig struktur när man kodar JavaScript kan vara en besvärlig uppgift. Stora, dynamiska webbprojekt innebär ofta en stor, JS-tung kodbas som – allteftersom funktionaliteten utökas – kan bli mer och mer svårhanterlig. Koden saknar många gånger organisation, sprids ut och kan i slutändan leda till onödigt invecklad kod som blir svår att underhålla och utöka.
JavaScriptMVC (JMVC) är ett open source-ramverk med motivationen att hjälpa dig som klientutvecklare att bygga strukturerade, skalbara JavaScript-applikationer av hög kvalitet. Byggt ovanpå jQuery erbjuder JMVC en samling best-practices och verktyg där man plockat ut det bästa från jQuery i avsikt att bringa ordning i röran: jQueryMX, StealJS, FuncUnit och DocumentJS.
jQueryMX
jQueryMX består av ett gäng jQuery-bibliotek vars syfte är att tillhandahålla den struktur och organisation man många gånger saknar i jQuery-tunga applikationer. jQueryMX kommer bland annat med specialevents som drag-and-drop, DOM extensions och language helpers som förenklar hantering av JavaScript-data.
Utöver detta inför jQueryMX även MVC-tänket i JavaScript med sina $.Model-, $.View- och $.Controller-plugins. Dessa olika delar kan användas tillsammans eller separat vilket innebär att du endast inkluderar de plugins du faktiskt kommer att ha användning för.
MVC-upplägget fungerar enligt förväntan:
- Modellen kapslar in service- och datalagret och kommunicerar via JSON-baserade REST-anrop.
- Vyn renderar modelldata som hämtats från servern.
- Controllern lyssnar på events och sköter kommunikation mellan modellen och vyn.
StealJS
StealJS är en samling verktyg som gör det enkelt att bygga, paketera och dela JavaScript-applikationer. Verktygen kommer med en mängd trevliga egenskaper:
- StealJS är bra på Dependency Management.
- StealJS hjälper dig bygga ihop dina JS- och CSS-filer till en enda komprimerad produktionsfil.
- StealJS kan användas för att generera projektstrukturer.
- StealJS kommer med stöd för SVN och GIT.
- StealJS möjliggör code cleaning och validering via JSLint.
- Och som en liten bonus kan StealJS göra din AJAX-app crawlable.
FuncUnit
FuncUnit är ett testramverk med ambitionen att göra enhetstestning och funktionell testning av webbapplikationer enklare och – som de själva säger – roligare! Med en jQuery-liknande syntax skriver, kör och debuggar du dina tester direkt i browsern (fungerar för IE 6+, FF 2+, Safari 4+, Opera 9+ och Chrome) och samma tester kan, via Selenium, också automatiseras. FuncUnit stödjer simulering av user actions såsom typing, clicking, *dragging *och scrolling.
Nedanstående kod, vilken testar att en AutoSuggest returnerar fem resultat, får fungera som exempel på ramverkets hyfsat okomplicerade syntax:
module("autosuggest",{
setup: function() {
S.open('autosuggest.html')
}
});
test("JavaScript results",function(){
S('input').click().type("JavaScript")
// wait until we have some results
S('.autocomplete_item').visible(function(){
equal( S('.autocomplete_item').size(), 5, "there are 5 results")
})
});
DocumentJS
DocumentJS tillhandahåller, precis som namnet avslöjar, verktyg för dokumentering av JavaScript-kod. DocumentJS hjälper dig generera, organisera, granska och underhålla din dokumentation och, precis som i alla andra delar av JavaScriptMVC, ligger fokus på användarvänlighet och enkelhet.