Gode ​​rutiner for håndtering og distribusjon av store Javascript apps

stemmer
27

Hva er noen standard praksis for håndtering av en middels stor Java søknaden? Mine bekymringer er både fart for leseren nedlasting og letthet og vedlikehold av utvikling.

Javascript-koden er grovt namespaced som:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

For øyeblikket har vi en (utpakket,-revet, svært lesbar) Javascript-fil for å håndtere all forretningslogikk på web-applikasjon. I tillegg er det jQuery og flere jQuery utvidelser. Problemet vi står overfor er at det tar alltid å finne noe i Javascript-kode og nettleseren har fortsatt et dusin filer til nedlasting.

Er det vanlig å ha en håndfull Source Javascript-filer som blir samlet i en siste, komprimert Javascript-fil? Enhver annen nyttige tips eller beste praksis?

Publisert på 18/08/2008 klokken 23:45
kilden bruker
På andre språk...                            


8 svar

stemmer
11

Tilnærmingen som jeg har funnet fungerer for meg er å ha separate JS-filer for hver klasse (akkurat som du ville gjort i Java, C # og andre). Alternativt kan du gruppere JS inn søknaden funksjonelle områder hvis det er enklere for deg å navigere.

Hvis du putter alle JS-filer til en katalog, kan du ha din server-side miljø (PHP for eksempel) sløyfe gjennom hver fil i denne katalogen og utgang en <script src='/path/to/js/$file.js' type='text/javascript'>i noen header-fil som følger med alle dine UI sider. Du finner dette automatisk lasting spesielt nyttig hvis du jevnlig oppretter og fjerne JS-filer.

Ved distribusjon til produksjon, bør du ha et script som kombinerer dem alle i en JS-fil og "minifies" det å holde størrelsen nede.

Svarte 19/08/2008 kl. 00:02
kilden bruker

stemmer
8

Også, foreslår jeg at du bruker Googles AJAX Biblioteker API for å laste eksterne biblioteker.

Det er en Google utvikler verktøy som bundle majors Javascript-biblioteker og gjøre det enklere å distribuere, oppgradere og gjøre dem lettere ved å alltid bruke komprimerte versjoner.

Også det gjøre prosjektet enklere og lettere, fordi du ikke trenger å laste ned, kopiere og vedlikeholde teser biblioteker filer i prosjektet.

Bruk det på denne måten:

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
Svarte 02/09/2008 kl. 08:18
kilden bruker

stemmer
5

Det er en utmerket artikkel om vitamin ved Cal Henderson fra Flickr berømmelse på hvordan de skal optimalisere levering av deres CSS og Javascript: http://www.iamcal.com/serving-javascript-fast/

Svarte 19/08/2008 kl. 20:53
kilden bruker

stemmer
3

I våre store Javascript-applikasjoner, skriver vi all vår kode i små separate filer - én fil per 'class' eller funksjonell gruppe, ved hjelp av en slags-of-like-Java navne / katalogstruktur. Vi har:

  • En compile-time skritt som tar all vår kode og minifies det (ved hjelp av en variant av JSMin) for å redusere nedlastingsstørrelsen
  • En compile-time skritt som tar klassene som alltid eller nesten alltid nødvendig og Setter sammen dem inn i en stor bunt for å redusere rundturer til serveren
  • En 'ClassLoader' som laster de øvrige klassene under kjøring på forespørsel.
Svarte 19/08/2008 kl. 21:13
kilden bruker

stemmer
3

Bare en sidenode - Steve allerede påpekt, bør du virkelig "minify" dine JS-filer. I JS, mellomrom faktisk betyr noe. Hvis du har tusen linjer av JS og du fjerner kun de unødige linjeskift har du allerede lagret om 1K. Jeg tror du tar poenget.

Det finnes verktøy for denne jobben. Og du må aldri endre "minified" / strippet / maskeres JS for hånd! Aldri!

Svarte 19/08/2008 kl. 00:42
kilden bruker

stemmer
2

For serveren effektivitet skyld, er det best å kombinere alle dine javascript i en minimaliserte filen.

Bestem rekkefølgen kode er nødvendig, og deretter plassere minified koden i den rekkefølgen det er nødvendig i en enkelt fil.

Nøkkelen er å redusere antall forespørsler som kreves for å laste siden din, noe som er grunnen til at du bør ha alt javascript i en enkelt fil for produksjon.

Jeg vil anbefale å holde filer delt opp for utvikling og deretter opprette en bygge skript for å kombinere / kompilere alt.

Også, som en god tommelfingerregel, husk å ta med Javascript mot slutten av siden din. Hvis Javascript er inkludert i overskriften (eller hvor som helst tidlig på siden), vil den stoppe alle andre forespørsler fra å bli gjort til det er lastet, selv om pipelining er slått på. Hvis det er på slutten av siden, vil du ikke ha dette problemet.

Svarte 19/08/2008 kl. 00:09
kilden bruker

stemmer
1

Min strategi består av 2 store teknikker: AMD moduler (for å unngå dusinvis av skriptkodene) og Modul mønster (for å unngå tett kopling av deler av programmet)

AMD Moduler: veldig rett frem, se her: http://requirejs.org/docs/api.html også det er i stand til å pakke alle deler av programmet i en minified JS-fil: http://requirejs.org/docs/ optimization.html

Modul Mønster: Jeg brukte denne Library: https://github.com/flosse/scaleApp du spør nå hva er dette? flere info her: http://www.youtube.com/watch?v=7BGvy-S-Iag

Svarte 27/07/2013 kl. 14:59
kilden bruker

stemmer
1

Les koden for andre (gode) Javascript apps og se hvordan de håndterer ting. Men jeg starter med en fil per klasse. Men når den er klar for produksjon, ville jeg kombinere filer til én stor fil og minify.

Den eneste grunnen til at jeg ville ikke kombinere filene, er hvis jeg ikke trenger alle filene på alle sidene.

Svarte 24/08/2008 kl. 20:32
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more