jQuery Meetups
Hur undviker jag att ladda onödigt data i document.ready?
Jag jobbar på en sida till ett bemanningsföretag. Den bygger på PHP tillsammans med jQuery för validering av formulär, mindre animationer och AJAX. Sidan är relativt enkel och innehåller inga större mängder data, så min fråga är än så länge inte ett problem utan mer en fundering inför framtida, större projekt.
Jag älskar att hålla isär saker och tänka så objektorienterat det är möjligt. I det här projektet har delat upp alla jQuery-funktioner i två filer, en som innehåller funktioner som används av sidorna tillgängliga för vanliga besökare, och en annan som innehåller de funktioner som administratören använder. Anledningen till detta är för att undvika att onödig data laddas. Dock så anropas alla funktioner från $(document).ready när sidan laddas vilket gör att alla funktioner i filen anropas och alla data från databasen hämtas, oavsett om den används eller inte.
Frågan är alltså hur jag enklast gör för att endast ladda relevant data för den specifika sidan som visas?
Det går säkert att lösa med if-satser som kontrollerar filnamn eller värdet på någon variabel på sidan, men det känns som en dålig lösning. Att dela upp koden så att en funktioner är i en fil och sedan ladda nödvändiga funktioner i headern funkar också, men eftersom jag har en header-fil som jag inkluderar i varje sidan funkar inte det heller.
Jag googlade problemet lite snabbt utan något lyckat resultat. Däremot någon som sa att det bästa är att stoppa all jQuery-kod i samma fil och
minify:a den, tvärtemot vad jag vill göra alltså.
Mvh David
Jag älskar att hålla isär saker och tänka så objektorienterat det är möjligt. I det här projektet har delat upp alla jQuery-funktioner i två filer, en som innehåller funktioner som används av sidorna tillgängliga för vanliga besökare, och en annan som innehåller de funktioner som administratören använder. Anledningen till detta är för att undvika att onödig data laddas. Dock så anropas alla funktioner från $(document).ready när sidan laddas vilket gör att alla funktioner i filen anropas och alla data från databasen hämtas, oavsett om den används eller inte.
Frågan är alltså hur jag enklast gör för att endast ladda relevant data för den specifika sidan som visas?
Det går säkert att lösa med if-satser som kontrollerar filnamn eller värdet på någon variabel på sidan, men det känns som en dålig lösning. Att dela upp koden så att en funktioner är i en fil och sedan ladda nödvändiga funktioner i headern funkar också, men eftersom jag har en header-fil som jag inkluderar i varje sidan funkar inte det heller.
Jag googlade problemet lite snabbt utan något lyckat resultat. Däremot någon som sa att det bästa är att stoppa all jQuery-kod i samma fil och
minify:a den, tvärtemot vad jag vill göra alltså.
Mvh David
Views: 12
Replies to This Discussion
-
Permalink Reply by Camilo Tapia on -
Hmm du menar alltså att du har en och samma HTML fil som ibland ska läsa vissa js filer och ibland andra?
Om det är det du menar så har vi löst det ungefär så här:
Låt säga att du har två set av funktioner som ska laddas och användas beroend epå någon typ av variabel eller något annat. Om man delar upp allt i MVC (vilket inte behövs, men jag har gjort det rätt mycket senaste året) så har vi på sistone gjort så att det finns en "ApplicationControl" klass vars syfte är att sätta igång huvudmekaniken för sidan man ska köra igång. I den kan man tex ha en funktion som heter något med functionsA och en functionsB, vars syfte då är att ladda det ena funktionsdelen eller det andra. I var och en av dessa två funktioner laddar du specifika js filer och när dessa är klara så kör du igång din app.
I sin enkelhet så är det en fråga om att ha något typ av val som triggar att ladda den ena samlingen av js filer efter laddning av sidan, eller den andra. Jag gjorde någon egen klass för att ladda externa scriptfiler i efterhand (för att minska väntetiden) men jag såg att det fanns ett bibliotek för det som verkar ritkigt bra som heter RequireJS.
Hjälper detta eller missupfattade jag det hela? -
-
Permalink Reply by David Ajnered on -
Du förstod precis vad jag menade. Jag ska kolla upp RequireJS imorgon när jag är lite piggare i huvudet.
Jag har inte implementerat MVC-mönstret i den applikation jag jobbar med nu med tanke på att den är relativt liten. Det hade löst problemet, men jag hade dock varit tvungen att dela upp alla funktioner i separata js-filer för att få bort all onödig hämtning av data. Jag hade hoppas på att det fanns någon smart inbyggd funktion i jQuery som fixade allt åt mig helt automatiskt ;)
Jag har försökt hitta ett trevligt MVC-ramverk för PHP. Är det något du använder? Något tips i så fall? -
-
Permalink Reply by Camilo Tapia on
-
Jag har faktiskt inte testat något MVC PHP ramverk och till JS har jag skrivit en minimal själv där den egentligen inte gör mer än ett lätt sätt att ärva klasser som i sig innehåller et enkelt sätt att lyssna och skicka events. Är du intresserad kan jag skriva lite mer om hur den fungerar. Men som sagt den är minimal och kan nog vidareutvecklas rätt så mycket. Den fungerar dock ok och används till några stora JS projekt.
-
-
Permalink Reply by MaxKnutsson on -
det finns ju getScript sen som Camilo sa, fixa en "ApplicationControl" med Event fångare som laddar in skripts bara när dom behövs ?
Sen CakePHP, Zen och CodeIgniter är nog mest kända PHP frameworks (mer). CodeIgniter är helt ok. Relativt liten och lätt att komma igång och finns mycket hjälp och tutorials ute som t.ex på Nettuts Inget kanske man använder för att hacka ihop en-dag projekt med =) -
-
Permalink Reply by Alexander Dahlberg on
-
@David
Jag röstar för att du kikar på CodeIgniter. Går fort att komma igång med och funkar även för små projekt. Väldigt smidigt att bygga applikationer med mycket ajax i. -
-
Permalink Reply by David Ajnered on
-
Jag har kikat lite på CodeIgniter och det verkar enkelt och smidigt. Jag håller just nu på med ett projekt där jag är tvingad till att använda Zend, och än så länge är jag imponerad. Jag gissar på att det kommer bli Zend i fortsättningen också.
-
© 2012 Created by jqueryadmin.
