Multidesk.be » Forums » Webdevelopment & -scripting » Eén Javascript file voor alle webpagina's

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Ezio op maandag 18 mei 2015 om 15:05:29.
Ezio's avatar
Multiviteit: 973
Hey,

Omwille van de snelheid van de website, wil ik slechts één gecombineerd Javascript bestand gebruiken in plaats van vele losse Javascript bestanden. Hier stoot ik echter op een probleem.
Stel dat ik op pagina1.html een knop met id "btnKnop1" heb en in mijn Javascript verwijs naar deze knop. Als ik dan naar pagina2.html navigeer krijg ik terecht foutmeldingen, want daar heb ik geen knop "btnKnop1". Hoe kan ik dus duidelijk maken dat bepaalde code enkel mag worden uitgevoerd op de pagina 'pagina1.html'. M.a.w: mijn gecombineerd Javascript bestand moet code bevatten die specifiek is voor een bepaalde webpagina.

Hoe kan ik dit realiseren? :)
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #1 geschreven door thekid op maandag 18 mei 2015 om 23:52:21.
thekid's avatar
Multiviteit: 5273
Moderator

Randinformatie

Derde keer dat ik misklik en opnieuw moet beginnen, maar allé :)

Het is een gekend probleem wanneer je met javascript begint, hoe je nu juist alles moet structureren, en hoe je je applicatie zo goed mogelijk organiseert zodat:
- je applicatie / website zo snel mogelijk laadt ;
- dat je je applicatie goed kunt onderhouden, verder kan uitbreiden ;
- dat je de presentatie en de logica lagen van elkaar zoveel mogelijk gescheiden kan houden.

Daar heb je verschillende mogelijkheden voor, nl:
- Single Page applications (wiki: http://en.wikipedia.org/wiki/Single-page_application#JavaScript_frameworks)
- Javascript library schrijven, die bij iedere pagina geladen wordt, en dan een klein stukje in een scripttag steken, die op het window.onload - event, je code inlaadt (of via jquery's document.ready)

Persoonlijk ben ik meer te vinden voor de SPA's, het gebruikt meestal model-view-viewmodel concept, en na de eerste load, worden alle andere resources geladen via javascript and webservices. Mooie voorbeelden van deze frameworks zijn bvb: ReactJS (facebook), AngularJS (google), KendoJS (telerik (bouwt op JQuery)), Backbonejs (heel goed om mee te starten).

Op de wiki pagina vind je nog een paar andere zoals Emberjs (ken ik niet) en ExtJS (is betalend, en is op enterprise niveau veel vraag naar, maar ik vind er eigenlijk niks aan (is een JS Framework waarbij HTML & CSS volledig uit je controle gegenereert wordt, en als je dan wat wil veranderen dan kost dit toch wel een pack moeite))

Je hoeft natuurlijk deze frameworks niet te gebruiken (hoewel het in mijn ogen op een cv voor webontwikkelaar niet misstaat dat je een van bovenstaande goede frameworks reeds gebruikt hebt, is momenteel wel wat vraag naar).

Zoals gezegt, met JQuery kan je gemakkelijk hetvolgende doen:

CODE
  1. <html>
  2. <head>
  3. <title>Index1</title>
  4. <script type="text/javascript" src="framework.js"></script>
  5. <script type="text/javascript">
  6.    // detecteer IE <= 8
  7.    var evl = window.attachEvent || window.addEventListener,
  8.          ev = (window.attachEvent ? 'on' : '') + 'load';
  9.    
  10.     function onLoad() {
  11.        // hier kan je op een veilige manier aan je knoppen komen
  12.       var divWorld = document.getElementById('world');
  13.       divWorld.innerHTML = 'hello';
  14.     }
  15.    
  16.    if (evl) {
  17.        // IE < 8 doesn't have call
  18.        if (evl.call) {
  19.            evl.call(window, ev, onLoad);
  20.        } else {
  21.            evl(ev, onLoad);
  22.        }
  23.    }
  24. </script>
  25. </head>
  26. <body>
  27. <h1>Testpagina</h1>
  28. <div id="world"></div>
  29. </body>
  30. </html>


Zoals je hierboven al ziet, deze functie alleen al, moet dan wel kompatibel genoeg geschreven worden. Het moet werken op alle browsers die je minimaal wilt ondersteunen, en daar hoort jammer genoeg nog steeds IE8 bij (al hoop ik dat dit in de toekomst snel zal veranderen :))
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door thekid op dinsdag 19 mei 2015 om 20:53:06.
thekid's avatar
Multiviteit: 5273
Moderator
Ik bedenk me ook nog, dat je eventueel een "compile" script kunt maken voor je javascript bestanden die dan alles van verschillende bestanden aan elkaar hangt en dan alles ook minified. Dit kan je perfect regelen met nodejs en uglifyjs
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #3 geschreven door Ezio op donderdag 21 mei 2015 om 23:08:22.
Ezio's avatar
Multiviteit: 973
Enorm bedankt voor je reactie, wordt zeer gewaardeerd :)

Ik heb het probleem van "enkel dit bepaald stuk JS code uitvoeren als je op deze bepaalde pagina bent" voorlopig opgelost door de paginanaam om te halen met "window.location.pathname". Vervolgens gebruik ik steeds een if-structuur om de stukken Javascript te verdelen over de pagina's. Ik heb voor deze oplossing gekozen omdat het hier eigenlijk om een eindwerk gaat en ik alweer wat aan de late kant ben :p

Hoe dan ook, het gebruik van een framework heb ik nooit eerder overwogen, maar nu je me erop wijst zie ik dat dit wel degelijk vaak gebruikt wordt. Voorlopig snap ik echter niet meteen hoe zo'n framework handig kan zijn voor mij, maar waarschijnlijk zal ik zo'n framework pas echt kunnen appreciëren als ik wat verder gevorderd ben in Javascript. Na de examens ga ik sowieso even een videocursus AngularJS doorlopen:D

In je scriptje begrijp ik dat je moet controleren of de gebruiker IE8 gebruikt om zo te achterhalen welke feature je moet gebruiken, maar als je een Event Listener toevoegt met jQuery hoeft dit niet meer, toch?
Deze tekst werd het laatst bewerkt voor 0.41 % door Ezio op donderdag 21 mei 2015 om 23:09:04.
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #4 geschreven door thekid op vrijdag 22 mei 2015 om 09:32:48.
thekid's avatar
Multiviteit: 5273
Moderator
Nee, daar had ik inderdaad het verkeerde code voorbeeld gegeven, hoe het ook kan zonder JQuery (pas op, deze werkte op mijn pc tot IE5, dus compatibel was ie wel :))

voor jquery kan je inderdaad een extra script tag toevoegen, op volgende manier:
CODE
  1. <script type="text/javascript">
  2. $(function() {
  3.     // hier is alles van javascript geladen en is de dom klaar om veranderd te worden
  4. });</script>


bij JQuery hoef je zelfs geen event listener toe te voegen, daarvoor is de standaard functie $(document).ready(function() { }); of de shorthand versie $(function() { }) voor :-)

en btw, als je jquery gebruikt, gebruik je al een framework :)

Als ik een tip mag geven, verander je structuur, je maakt het jezelf een stuk moeilijker en afhankelijk van de complexiteit van je site zal dit je in de toekomst nog een hoop koppijn opleveren ;)

Zie het zo, je algemene javascript file, zou alles moeten kunnen en ondersteunen dat je op alle pagina's kunt/wilt gebruiken. De rest van de interactiviteit zou enkel op de HTML pagina zelf veranderd moeten worden. Je kan natuurlijk nog extra javascript bestandjes bijladen indien je nog een groter stuk code hebt dat je niet in je HTML wilt plaatsen.

deze extra script tags kan je dan laden via
CODE
  1. <script type="text/javascript" defer="defer" src="..."></script>


De defer tag zorgt er dan voor dat je javascript later geladen wordt dan de script tags die geen defer hebben (zodat JQuery bvb al zeker daar zal zijn)

in je extra bestanden kan je dan JQuery style plugins schrijven (bvb, voor je form validatie), zoals:
CODE
  1.  
  2. ;(function($) {
  3.     $.fn.FormValidate = function(options) {
  4.            // this.selector is in het onderstaande geval '#element'
  5.            // this.length is hoeveel elementen met je selector overeen komen
  6.     };
  7. }(JQuery));
  8.  
  9. $(function() {
  10.     // je kan nu aan je eigen plugin, en die ook gebruiken (eventueel ook in de hoofdpagina)
  11.     $('#element').FormValidate({ errorMessage: 'Gelieve alle velden in te vullen' });
  12. });


Op jouw manier kan je eigenlijk ook extra scripts aanvragen indien je dat werkelijk wilt, door bvb:

CODE
  1.  
  2. ;(function($) {
  3.    $.fn.ScriptLoader = function(options) {
  4.         var location = window.location.pathname;
  5.         location = location.split('.')[0]; // get the path without .html or any queries
  6.         $.getScript('./controller/' + location + '.js');
  7.    }
  8. }(JQuery));
  9.  
  10. $(function() {
  11.     $(document).ScriptLoader();
  12. });
  13.  


dit zou er dan voor zorgen dat je extra bestanden hebt die in een folder controller liggen, hetzelfde genaamd als je Page1.html (maar dan Page1.js). (wel voorzichtig zijn, je kan missen alle namen steeds met toLowerCase() naar page1.js zetten, daar bvb op linux servers het niet hetzelfde is hoe bestanden geschreven zijn en dit ook onverwachte problemen kan opleveren)

in je controller/page1.js kan je dan direct op de DOM werken, daar je het getscript uitvoert wanneer de DOM al klaar is. En het spaart je veel IFs en het geeft je een structuur om tegen te werken ;)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #5 geschreven door Ezio op vrijdag 22 mei 2015 om 13:50:29.
Ezio's avatar
Multiviteit: 973
Mijn kennis van jQuery is vooralsnog zo goed als onbestaande, dus het wordt wat moeilijk om alles te volgen (al snap ik wel grotendeels wat je doet in je code). Maar de methode die jij gebruikt - je code opdelen in deelproblemen in de vorm van plugins - is toch niet zo anders dan ik die Javascript functies maak of sla ik de plank nu volledig mis?

I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #6 geschreven door thekid op vrijdag 22 mei 2015 om 14:06:38.
thekid's avatar
Multiviteit: 5273
Moderator
niet zo, maar het gaat er vooral over, dat je code re-usable is en dat je voor jezelf een vaste structuur maakt.

In bovenstaande geval zal de ScriptLoader plugin ervoor zorgen dat je steeds een controller inlaadt, zonder dat je daarvoor extra IF structuren moet aanmaken, en het helpt je dus in de toekomst als je projectstructuur ingewikkelder wordt.

JQuery plugins zijn eigenlijk ongelooflijk leuk, omdat je zo'n plugins bijna altijd opnieuw kunt gebruiken, zonder dat het de structuur van je project onduidelijk maakt :)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #7 geschreven door Ezio op vrijdag 22 mei 2015 om 14:14:00.
Ezio's avatar
Multiviteit: 973
Ik las dat jQuery eigenlijk geen framework is, maar een bibliotheek. Als ik al jQuery gebruik, zou je mij dan aanraden om alsnog AngularJS te gebruiken? Welk voordeel heeft dat dan nog precies?
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #8 geschreven door thekid op vrijdag 22 mei 2015 om 15:00:42.
thekid's avatar
Multiviteit: 5273
Moderator
Als je al JQuery gebruikt, kan je direct voor KendoUI Core gaan, is gratis, bevat een heleboel goede controls, HTML5 ondersteuning en AngularJS erbij :)

+ als je .net gebruikt, kan je dan later ook KendoUI en Angular met MVC websites verbinden, waarmee je dan ook OData queries kunt maken en jezelf dus een hele hoop werk mee bespaart :)

dat het een library is heb je ook gelijk in, maar eenmaal je naar kendo gaat of naar angular dan zit je daar al met je frameworks. Er zijn enkele goeie vragen en antwoorden op stackoverflow te vinden :)

http://stackoverflow.com/questions/3057526/framework-vs-toolkit-vs-library

*edit*

Of ook, nog een uitleg waarom het zo kan zijn:
http://martinfowler.com/bliki/InversionOfControl.html
Deze tekst werd het laatst bewerkt voor 8.64 % door thekid op vrijdag 22 mei 2015 om 15:04:42.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen