Contenuto
- 01. Cos'è l'ereditarietà prototipica e quanto è utile?
- 02. Come può essere utilizzato JavaScript per migliorare l'accessibilità sul web?
- 03. Che cos'è il bubbling di eventi e in che modo è diverso dall'acquisizione di eventi?
- 04. In che modo la delega degli eventi migliora il codice sui siti con molti elementi interattivi?
- 05. Cosa sono le chiusure e come possono essere utili nell'organizzazione del codice?
- 06. Cosa significa "use strict" all'inizio di un blocco di codice?
- 07. Che cosa significa il termine "sollevamento" in riferimento a JavaScript?
- 08. Qual è la differenza tra una funzione freccia e una funzione regolare?
- 09. Dove devo utilizzare le parole chiave "let" e "const" invece di "var"?
- 10. Cos'è la programmazione funzionale e in cosa differisce?
JavaScript è uno degli strumenti di web design più flessibili in circolazione, come mostrano i nostri migliori esempi di articoli su JavaScript. Ma anche con gli strumenti più grandi, c'è sempre di più da imparare e scoprire.
Ecco 12 domande (e risposte) su JavaScript che hanno lasciato perplessi molti sviluppatori, persino programmatori JavaScript esperti. Oppure, se preferisci mantenere la creazione del tuo sito semplice, prova un costruttore di siti web.
In questa pagina passiamo attraverso domande e risposte comuni, comprese quelle spesso tratteggiate nei colloqui di lavoro. Nella pagina successiva, daremo uno sguardo più approfondito a due aree più complesse: come utilizzare JavaScript per migliorare le prestazioni del sito (un ottimo web hosting manterrà il tuo sito funzionante perfettamente) e come rendere il codice JavaScript a prova di futuro.
- 19 fantastici plugin JQuery
01. Cos'è l'ereditarietà prototipica e quanto è utile?
In JavaScript, quasi tutto è un oggetto. Ogni oggetto ha un prototipo, dal quale eredita valori e comportamenti. Se un oggetto non include una proprietà richiesta, JS la cercherà invece all'interno del suo prototipo. Continua la catena dei prototipi finché non trova una corrispondenza o restituisce un errore.
Ciò è utile quando si creano oggetti che condividono gli stessi valori e operazioni. Facendoli vivere su un prototipo, deve esistere solo una copia di essi, rendendo efficiente la memoria dei progetti.
var genitore = {inherit: true} var childA = Object.create (genitore); var childB = {}; Object.setPrototypeOf (childB, parent); la classe childC estende il genitore {}
I prototipi possono essere aggiunti agli oggetti durante la creazione utilizzando Object.create ()o dopo con Object.setPrototypeOf (). ES2015 ha una parola chiave "class" che, se utilizzata con "extends", utilizzerà quel valore come prototipo.
02. Come può essere utilizzato JavaScript per migliorare l'accessibilità sul web?
È comune che i moderni strumenti di accessibilità web siano in grado di gestire JavaScript e contenuto dinamico. Può essere utilizzato per aiutare queste tecnologie fintanto che viene utilizzato come miglioramento piuttosto che necessario per funzionare.
Un modo comune per assistere gli utenti è fornire un'utile gestione della messa a fuoco. Un calendario, ad esempio, dovrebbe essere in grado di scorrere i giorni utilizzando i tasti freccia, con i tasti su e giù che saltano una settimana alla volta. È solo un caso di ascoltare gli eventi della tastiera mentre il focus è all'interno di quel componente.
Anche i dati importanti che cambiano a seguito di JavaScript, ad esempio il feedback del modulo, dovrebbero essere annunciati per gli screen reader. Spesso questo si ottiene contrassegnando un container come una regione attiva.
03. Che cos'è il bubbling di eventi e in che modo è diverso dall'acquisizione di eventi?
Sia l'acquisizione degli eventi che il bubbling fanno entrambi parte di un processo chiamato "propagazione degli eventi", in cui i browser rispondono agli eventi che si verificano sulla pagina. I browser meno recenti eseguivano l'uno o l'altro, ma oggigiorno tutti fanno entrambe le cose.
La prima fase - la fase di cattura - si verifica non appena si verifica un evento. Inizia dal livello più alto, che è "documento" o "finestra" a seconda dell'evento. Da lì si passa html> e tutto ciò che vive al suo interno fino a raggiungere l'elemento in cui si è verificato l'evento.
La seconda fase - la fase di ribollimento - avviene quindi. Ripete il processo ma al contrario, iniziando con l'elemento da cui l'evento è stato attivato e "ribollendo" verso l'alto html> elemento. Quando si aggiungono listener di eventi, questa è l'impostazione predefinita.
04. In che modo la delega degli eventi migliora il codice sui siti con molti elementi interattivi?
I siti web hanno spesso molti contenuti dinamici che cambiano regolarmente sulla pagina. Se questi elementi devono essere interattivi, questi avrebbero bisogno di un qualche tipo di ascoltatore di eventi che raccolga quelle interazioni. Se ogni elemento richiedesse il proprio ascoltatore, questo ingombrerebbe il codice e aumenterebbe ciò di cui il browser deve tenere traccia.
La delega degli eventi è una tecnica che utilizza il bubbling degli eventi a proprio vantaggio. Aggiungendo un listener a un elemento genitore, gli sviluppatori vengono avvisati degli eventi per tutti i suoi figli.
parentEl.addEventListener (’click’, function (e) {if (e.target && e.target.nodeName == ’BUTTON’) {// Button cliccked}});
All'interno della richiamata dell'evento, il target originale di quell'evento sarà sempre il "target", che può essere utilizzato per decidere cosa fare dopo. Ad esempio, un attributo di dati potrebbe contenere un ID per fare riferimento a una proprietà di un oggetto.
05. Cosa sono le chiusure e come possono essere utili nell'organizzazione del codice?
Le funzioni in JavaScript utilizzano quello che viene chiamato "ambiente lessicale", il che significa che ha accesso a variabili definite all'esterno, ma a quelle definite all'interno è possibile accedere solo all'interno.
funzione esterno () {let x = 'Web Designer'; funzione shout () {alert (`I love $ {x}!`); } grido(); }
Chiamando esterno() mostrerà "I love Web Designer!", ma se si fa riferimento a "shout" o "x" al di fuori di esterno(), entrambi saranno indefiniti. Una chiusura è una combinazione di una funzione accanto al suo ambiente lessicale. In questo caso, la chiusura è la funzione "esterna".
Questi sono utili quando si creano più componenti, poiché qualsiasi cosa dichiarata all'interno non influenzerà gli altri. Possono essere utilizzati per creare funzioni e variabili private in modo simile ad altri linguaggi orientati agli oggetti come Python. Il modello del modulo utilizza ampiamente le chiusure per fornire modi strutturati per l'interazione dei moduli.
06. Cosa significa "use strict" all'inizio di un blocco di codice?
ES5 ha introdotto una variante opzionale di JavaScript chiamata "modalità rigorosa". In modalità rigorosa, le stranezze delle versioni precedenti generavano errori anziché comportare comportamenti imprevisti.
function strictFunction () {’use strict’; myVar = 4; // ReferenceError}
Sopra stiamo accedendo a una variabile che non esiste. Al di fuori della modalità rigorosa, questo aggiungerebbe invece myVar all'ambito globale, che se non stiamo attenti potrebbe sovrascrivere completamente la funzionalità definita in precedenza nello script. In modalità rigorosa, questo genera un errore e interrompe qualsiasi distruzione. I moduli ES2015 sono in modalità rigorosa per impostazione predefinita, ma nelle chiusure create con funzioni, "use strict" può essere applicato a livello di funzione oltre che a un intero file.
07. Che cosa significa il termine "sollevamento" in riferimento a JavaScript?
JavaScript è unico in quanto non necessita di essere compilato prima di essere distribuito. Un browser compilerà gli script non appena li trova e prenderà nota di tutte le funzioni e variabili dichiarate all'interno.
Il browser quindi esegue un secondo passaggio per eseguire il codice, sapendo dove si applicano queste funzioni e variabili. Quando un blocco viene eseguito, la sua funzione e le dichiarazioni di variabili vengono "sollevate" all'inizio del blocco.
benvenuto ("Matt"); // "Benvenuto, Matt." funzione benvenuto (nome) {return `Benvenuto, $ {nome} .`; }
In questo esempio, siamo in grado di utilizzare la funzione "benvenuto" poiché viene sollevata all'inizio dello script.
08. Qual è la differenza tra una funzione freccia e una funzione regolare?
ES2015 ha fornito molte modifiche e una per avere un impatto rapido sono state le funzioni delle frecce.
funzione CountUp () {this.x = 0; setInterval (() => console.log (++ this.x), 1000); } var a = new CountUp ();
La differenza fondamentale, nonostante siano più brevi da scrivere, è che le funzioni freccia non creano il proprio valore per "questo". Utilizzeranno invece il valore del blocco che lo racchiude. Nell'esempio sopra, questo disconnetterebbe 1, 2, 3, ecc. Una volta al secondo. Con una funzione regolare, this.x sarebbe indefinito, quindi registrerebbe NaN. Si presume che il corpo di una funzione freccia sia il valore restituito da essa. Questo li rende utili per le promesse, dove i valori vengono trasmessi. Le funzioni regolari devono restituire esplicitamente un valore o restituiranno undefined.
09. Dove devo utilizzare le parole chiave "let" e "const" invece di "var"?
Un altro cambiamento fondamentale con ES2015 è stata l'introduzione di "let" e "const" come modi alternativi per definire le variabili. Le variabili dichiarate in questo modo sono limitate al blocco in cui sono state definite. Ciò fornisce maggiore certezza che i valori creati all'interno di blocchi diversi non interferiranno con il codice esterno.
for (let x = 1; x = 3; x ++) {console.log (x); // 1, 2, 3} console.log (x); // "x non è definito"
Se il valore della variabile non cambia, utilizza "const" invece di "let". Vengono generati errori quando si tenta di ridefinire una costante. Gli oggetti e le variabili di matrice possono ancora cambiare internamente, ma non vengono completamente sostituiti.
Sia 'let' che 'const' non vengono sollevati come 'var', quindi non è possibile fare riferimento prima di essere inizializzati. Tra l'inizio del blocco e l'inizializzazione è nota come "zona morta temporale" e spesso può essere fonte di confusione.
10. Cos'è la programmazione funzionale e in cosa differisce?
È un modo alternativo per creare programmi passando lo stato dell'applicazione esclusivamente attraverso le funzioni. Evitando gli effetti collaterali, è possibile sviluppare codice facile da capire.
Tradizionalmente, i progetti JavaScript sono costruiti con una struttura orientata agli oggetti. Le informazioni sullo stato corrente del programma sono contenute all'interno di oggetti, che vengono aggiornati man mano che la pagina cambia.
La programmazione funzionale fornisce un modo diverso di pensare. Sebbene linguaggi come F # lo utilizzino da un po 'di tempo, ES2015 ha portato metodi importanti a JavaScript che lo aprono al Web.
Tutto il lavoro deve essere svolto all'interno delle funzioni "pure". Si tratta di funzioni che non sono influenzate da alcun dato al di fuori dell'ambito di tale funzione. In altre parole, se vengono forniti gli stessi valori alla funzione, verrà sempre restituito lo stesso risultato.
Ciò significa anche che non può esserci stato condiviso tra le funzioni. Qualsiasi stato all'interno di un'applicazione che deve essere utilizzato dovrebbe essere passato come parametro a una funzione, invece di accedervi direttamente da essa.
Infine, il codice dovrebbe evitare di modificare i valori dopo che sono stati creati. Ad esempio, ogni modifica di un oggetto dovrebbe restituire una copia di quell'oggetto con il valore modificato. Questo per evitare effetti collaterali, che possono causare bug e rendere il codice più difficile da testare.
Creare un sito insieme a un team? Condividi i tuoi file con l'archiviazione cloud superiore.
Pagina successiva: come posso utilizzare JS per migliorare le prestazioni del mio sito? e come posso rendere a prova di futuro il mio codice JavaScript?
