jQuery Academy · Lezione

Coesistenza con la sintassi ES6+

Comprendere come scrivere codice jQuery insieme alle moderne funzionalità JavaScript, come arrow function, const/let e template literal, senza conflitti.

Lezione 1 di 311 passaggi

Coesistenza con la sintassi ES6+ è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

jQuery e JavaScript moderno

Benvenuto in una lezione sull'integrazione di jQuery con il JavaScript moderno ES6+! Imparerà a combinare i loro punti di forza per scrivere codice pulito, efficiente e manutenibile.

Perché usare JavaScript moderno?

ES6+ (ECMAScript 2015 e versioni successive) introduce funzionalità potenti come const, let, le funzioni freccia e i template literal.

Migliorano la leggibilità e la concisione del codice.
Offrono nuovi modi per risolvere i problemi di programmazione più comuni.
Integrarle con jQuery migliora il flusso di lavoro di sviluppo.

`const` e `let` per le variabili

Al posto di var, usi const per le variabili a cui non verrà assegnato un nuovo valore (come una selezione di elementi jQuery) e let per le variabili che potrebbero cambiare. Questo previene le riassegnazioni accidentali e migliora la chiarezza.

Provi a fare clic sul pulsante:

// Assume HTML: <div id="output"></div><button id="myBtn">Click Me</button>
const $outputDiv = $('#output');
const $myButton = $('#myBtn');

let counter = 0;

$myButton.on('click', () => {
  counter++;
  $outputDiv.text(`Button clicked ${counter} times.`);
});

Funzioni freccia nei callback

Le funzioni freccia offrono una sintassi concisa per i callback e associano automaticamente this al contesto lessicale circostante. Sono spesso utili quando non è necessario che this faccia riferimento all'elemento DOM stesso.

Noti quanto sia facile accedere a appName:

// Assume HTML: <button id="greetBtn">Greet</button><div id="greeting"></div>
const $greetButton = $('#greetBtn');
const $greetingDiv = $('#greeting');

const appName = "CoddyKit App";

$greetButton.on('click', () => {
  // 'this' here refers to the surrounding context (window), not the button
  $greetingDiv.text(`Hello from ${appName}!`);
});

Template literal per l'HTML

I template literal (che usano i backtick ` `) semplificano notevolmente la creazione di stringhe dinamiche, soprattutto quando si inseriscono variabili o contenuti su più righe, rispetto alla concatenazione tradizionale di stringhe.

Guardi con quanta facilità viene creato l'HTML dinamico:

// Assume HTML: <ul id="items"></ul>
const $itemsList = $('#items');
const userName = "Alice";
const itemCount = 3;

const listItemHtml = `
  <li>
    <b>User:</b> ${userName}
    <br>
    Items: ${itemCount}
  </li>
`;

$itemsList.append(listItemHtml);

Destructuring degli oggetti evento

Quando si gestiscono gli eventi, l'oggetto evento contiene molte proprietà. Il destructuring di ES6 consente di estrarre direttamente nell'elenco dei parametri della funzione solo le proprietà necessarie, rendendo il codice più pulito.

Faccia clic per visualizzare i dettagli dell'evento:

// Assume HTML: <button id="eventBtn">Log Target</button><div id="eventOutput"></div>
const $eventButton = $('#eventBtn');
const $eventOutput = $('#eventOutput');

$eventButton.on('click', ({ target, type }) => {
  // Destructured 'target' and 'type' from the event object
  $eventOutput.text(`Event: ${type}, Target ID: ${target.id}`);
});

Attenzione a `this` e alle arrow function

Sebbene le arrow function siano molto utili, ricordi che non hanno un contesto this proprio. Se è necessario che this faccia riferimento all'elemento DOM che ha attivato l'evento, per i callback jQuery è ancora necessaria una funzione normale.

Osservi l'output facendo clic su pulsanti diversi:

// Assume HTML: <button class="colorBtn" id="red">Red</button><button class="colorBtn" id="blue">Blue</button><div id="log"></div>
const $colorButtons = $('.colorBtn');
const $logDiv = $('#log');

$colorButtons.on('click', function() {
  // 'this' here refers to the clicked button element
  $logDiv.text(`Clicked button with ID: ${this.id}`);
});

// An arrow function here would bind 'this' to the global window

`$.noConflict()` per la coesistenza

Se utilizza altre librerie JavaScript che usano anch'esse il simbolo $, il metodo $.noConflict() di jQuery è fondamentale. Rilascia l'identificatore $, consentendoLe di usare invece jQuery e prevenendo i conflitti.

// Assume another library uses '$'
// jQuery is loaded first
$.noConflict();

// Now, '$' is free for another library
// Use 'jQuery' for jQuery methods
jQuery(document).ready(() => {
  jQuery('#status').text('jQuery is active with noConflict!');
});
// Assume HTML: <div id="status"></div>

Buone pratiche per l'integrazione

Per integrare efficacemente jQuery con il JavaScript moderno:

Dichiarazioni coerenti: utilizzi const e let in modo coerente.
Arrow function mirate: utilizzi le arrow function per i callback quando il contesto this non è l'elemento DOM.
Template literal: le utilizzi per creare HTML o stringhe dinamiche.
Incapsulamento di jQuery: raggruppi la logica specifica di jQuery e la tenga separata dalle funzioni di utilità ES6+ pure.

Verifica rapida: ES6+ e jQuery

Quali delle seguenti funzionalità di ES6+ possono essere utilizzate efficacemente con jQuery per scrivere codice più pulito e moderno?

Rispondi nella lezione interattiva

Riepilogo: modernizzare jQuery

Ha imparato a integrare perfettamente con jQuery funzionalità ES6+ come const/let, le arrow function, i template literal e il destructuring.

Questo approccio consente di scrivere JavaScript più conciso, leggibile e facile da manutenere, continuando a sfruttare le potenti funzionalità di manipolazione del DOM di jQuery. Continui a esercitarsi per padroneggiare questa potente combinazione!

Gratis per iniziare

Impara JavaScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 22
Lezioni: 48

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Coesistenza con la sintassi ES6+» è gratuita?

Sì — il testo completo di «Coesistenza con la sintassi ES6+» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Coesistenza con la sintassi ES6+»?

Comprendere come scrivere codice jQuery insieme alle moderne funzionalità JavaScript, come arrow function, const/let e template literal, senza conflitti. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Coesistenza con la sintassi ES6+»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Coesistenza con la sintassi ES6+
jQuery negli ambienti a moduli
Integrazione tra jQuery e framework moderni

← Torna a jQuery Academy