Addio JQuery?


A Little History

  • Fino a pochi anni fa c’erano grandi differenze tra i browser:

    • Accesso al DOM
    • Gestione degli eventi
  • Le librerie sembravano affrontare questo tipo di cosa:

    • jQuery (2005)
    • mootols (2007)
    • ….
  • Cosa è successo da quando, messo il 2010?
    • Microsoft si è avvicinata agli standard da IE9 (2011)
    • L’uso di browser non compatibili è diminuito.
    • Ci sono più possibilità da JavaScript per l’accesso alla domenica.
    • frameworks come angolo (dal 2010) Utilizzare JQLITE, una versione molto ridotta di JQuery
  • React Type Frameworks (2013) Inizia a lavorare con Dom virtuale:
    • Lavorare con la Sunda è costosa, lavorando meglio con una versione “più leggera”
    • Se le modifiche si verificano nel Dom virtuale, si spostano verso il do M Real
    • Jquey funziona direttamente con il DOM, quindi rimane efficienza

usiamo jQuery?

  • Risposta rapida: No, ad eccezione degli argomenti di compatibilità
  • Risposta meditata:
    • se si esegue un Web (non un webapp) se
      • smaltisce molti plugin e sviluppi già resi
    • Se si esegue un sito Web, non utilizzare un framework JS, ma analizzare:
      • SEO? Tempo di caricamento? Rendendo sul server?
      • componenti necessari?

javascript selectors

  • Ci siamo abituati ad usare tanto jQuery che ora sta per imparare di nuovo:
    • per fare le cose con javascript prima
    • per utilizzare le nuove funzionalità JavaScript ora
  • Se è il nostro caso, proviamo da uno sfondo jquery, vale la pena di occhio su una guida.

Selettore di classe

// jQuery$('.myClass');// JavaScriptdocument.getElementsByClassName('myClass');

Selettore ID

// jQuery$('#myID');// JavaScriptdocument.getElementById('myID');

Selettore etichetta

// jQuery$('div');// JavaScriptdocument.getElementsByTagName('div');

querySelector

// Grab the first .myClass class namedocument.querySelector('.myClass');// Return a NodeList of all instances of .myClassdocument.querySelectorAll('.myClass');// Grab the myID iddocument.querySelector('#myID');// Return a NodeList of all 'div' instancesdocument.querySelectorAll('div');// Grab the last list Node of .someList unordered listdocument.querySelector('ul.someList li:last-child');// Grab some data-* attributedocument.querySelectorAll('');

Eventi JavaScript

Eventi

/* * Click */// jQuery$(elem).on('click', function () {...});// JavaScriptdocument.querySelector(elem).onclick = function () {...}

Incorare eventi

document.addEventListener('click', function() { // ...}, false);

Dom ready event

  • supporta la maggior parte dei browser
    document.addEventListener('DOMContentLoaded', function() { // DOM ready, run it!}, false);

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *