jQuery omzetten naar puur Javascript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Guido  -

Guido -

18/12/2018 11:26:31
Quote Anchor link
Hallo,

Ik wil mijn jQuery aangedreven website-menu omzetten naar puur Javascript. Maar omdat mijn kennis van Javascript zeer gering is, kom ik er helaas niet uit.

jQuery:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
jQuery(document).ready(function($) {
    // Hide mobile menu by default    
    $('#mobile-nav').hide();

    // Display mobile menu when clicked    
    $( "#mobile-nav-toggle" ).click(function() {
        $( "#mobile-nav" ).toggle();
    });

    // Hide mobile submenu by default    
    $(''#sub-menu').hide();

    // Add toggle that displays mobile submenu
    var subnavToggle = $( '<button />', { 'id': 'subnav-toggle' })
        .append( "+" );
    $( "#mobile-nav" ).find( '#menu-item-has-children > a, #page_item_has_children > a' ).after( subnavToggle );

    // Display mobile submenu when clicked    
    $( "#subnav-toggle" ).click(function() {
        $(this).next('#sub-menu').toggle();
    });
});



Puur Javascript:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function nav {
    // Hide mobile menu by default
    document.getElementById('mobile-nav').style.display = 'none';

    // Display mobile menu when clicked
    document.getElementById('mobile-nav-toggle').addEventListener("click", function() {
          document.getElementById('mobile-nav').style.display = 'block';
    });

    // Hide mobile submenu by default
    document.getElementById('submenu').style.display = 'none';

    // Add toggle that displays mobile submenu

    // Display mobile submenu when clicked    
};


Verder als dit kom ik helaas niet. Wie kan me verder helpen hiermee?

Guido
Gewijzigd op 18/12/2018 11:28:03 door Guido -
 
PHP hulp

PHP hulp

29/03/2024 12:55:19
 
Ozzie PHP

Ozzie PHP

18/12/2018 12:35:45
Quote Anchor link
Guido - op 18/12/2018 11:26:31:
Ik wil ... omzetten naar puur Javascript. ... kennis van Javascript zeer gering ...

Mijn eerste vraag is dan ... waarom wil je het omzetten?
 
Guido  -

Guido -

18/12/2018 12:50:48
Quote Anchor link
Hoi Ozzie,

Ik vind het overbodig om de gehele jQuery library in te laden voor een simpele functie zoals dit. Pageload enzo.

Guido
 
- Ariën  -
Beheerder

- Ariën -

18/12/2018 12:52:43
Quote Anchor link
Als je de CDN gebruikt kost het echt niet gek veel traagheid.
Maar ik kan me indenken dat je niet afhankelijk zou willen zijn van externe sites.
 
Ozzie PHP

Ozzie PHP

18/12/2018 13:04:34
Quote Anchor link
Ergens snap ik je wel, maar tegenwoordig (zeker in Nederland) zijn de verbindingen snel.

Als je jQuery gebruikt heb je wel de (redelijke) zekerheid dat het in iedere browser werkt (cross-compatibility) en dat heb je met plain javascript niet. Misschien iets om in overweging te nemen?
 
Guido  -

Guido -

18/12/2018 13:43:46
Quote Anchor link
Alle hedendaagse browsers ondersteunen Javascript toch volledig? Dat ik heel oude versies van bijvoorbeeld IE niet ondersteun, boeit me niet. Ik wil graag een lichte website, en vind jQuery hiervoor gebruiken niet in verhouding staan met wat je hiervoor moet inladen.
 
- Ariën  -
Beheerder

- Ariën -

18/12/2018 13:54:07
Quote Anchor link
Er zijn browsers, zoals Safari die wel eens nukkig kunnen zijn.
Het gebruik van jQuery ligt er ook een beetje aan of je het nodig hebt. Als je bijvoorbeeld al de Bootstrap gebruikt, is het handig om jQuery ook voor je eigen frutsels te gebruiken.
Gewijzigd op 18/12/2018 13:56:27 door - Ariën -
 
Ozzie PHP

Ozzie PHP

18/12/2018 13:57:35
Quote Anchor link
@Guido

Het nut/doel van jQuery is enerzijds makkelijker programmeren en anderzijds cross-browser compatibility. Ja, alle browsers ondersteunen javascript, maar (zover ik weet) zijn er wel verschillen dat in de ene browser iets niet werkt en in de andere wel. In hoeverre dat vandaag de dag nog aan de orde is weet ik niet. Maar met jQuery heb je daar als het goed is geen last van.
 
Guido  -

Guido -

18/12/2018 15:59:15
Quote Anchor link
Ik begrijp uit jullie reacties dat jullie in dit geval tóch voor jQuery zouden kiezen? Ik wil gewoon jQuery voorkomen als het ook anders kan.. en dat is hier het geval. Het zou anders zijn als andere delen van mijn website van jQuery afhankelijk zouden zijn.
 
Ozzie PHP

Ozzie PHP

18/12/2018 18:04:42
Quote Anchor link
De reden die jij noemt is valide. Er is in dit geval geen goed of fout. Jij moet alleen voor jezelf nagaan of jouw 'puur' javascript-oplossing solide genoeg is om in alle browsers te kunnen werken. Als jij daarvan overtuigd bent, dan zou ik zeggen ga ervoor. Maar zo niet, zou ik het bij jQuery houden. De library laadt hij overigens maar 1 keer per sessie in, en daarna haalt ie 'm uit de cache van de browser. Ik verwacht dus niet dat je echt super veel snelheidswinst zult gaan boeken.
 
Thomas van den Heuvel

Thomas van den Heuvel

18/12/2018 22:29:41
Quote Anchor link
Guido - op 18/12/2018 15:59:15:
Het zou anders zijn als andere delen van mijn website van jQuery afhankelijk zouden zijn.

Wat niet is kan nog komen?

Het "waarom" zou je voorop moeten stellen aan het "wat". Waarom de wens om terug te gaan naar native JavaScript met dus mogelijk het cross-browser vangnet wat dan wegvalt?

Je site wordt er niet trager door. Na 1x inladen worden JavaScript- en CSS-bestanden gecached.
Bandbreedte is niet echt een issue meer tegenwoordig.
De minified variant is ook niet groot.
Het is ook geen obscuur stuk code maar een breed ondersteunde library.

Als het enige argument "voor de vorm" is, waarom moeilijk doen als het makkelijk kan.

Als het argument is "omdat iemand dit niet wil", mag 'ie ook uitleggen waarom.
Gewijzigd op 18/12/2018 22:30:51 door Thomas van den Heuvel
 
Guido  -

Guido -

24/12/2018 14:44:37
Quote Anchor link
Duidelijk. Ik had een opmerking van iemand hierover gekregen.. waarom jQuery gebruiken als het ook met puur Javascript kan. Scheelt inladen van jQuery library. Dat vond ik een logische gedachte.

Maar moet overigens wel concluderen dat de opbouw van het menu middels jQuery een flink stuk eenvoudiger is dan met puur Javascript.


Bedankt iedereen en fijne dagen.
 
Thomas van den Heuvel

Thomas van den Heuvel

24/12/2018 16:27:40
Quote Anchor link
Guido - op 24/12/2018 14:44:37:
Scheelt inladen van jQuery library.

Argumenten moet je niet tellen maar wegen :). Zoals waarschijnlijk al eerder aangehaald gebeurt dat slechts eenmalig.

Ben ik ook benieuwd naar de argumenten "waarom niet", ik bedoel, iedereen kan wel overal "waarom" bij plaatsen en dan moet je ook redenen hebben waarom iets op een bepaalde manier is aangepakt, maar dit "waarom" leek niet echt onderbouwd door de persoon die het vroeg, dus daar mag je dan ook meteen doorheen prikken.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.