Una delle sfide dell’apprendimento di una libreria (che si tratti della libreria standard di funzioni fornita con un linguaggio di programmazione o di un progetto di terze parti) \u00e8 duplice:<\/p>\n
E, in realt\u00e0, a volte anche imparare a utilizzare dette funzioni non \u00e8 poi cos\u00ec difficile: \u00e8 sapere quando utilizzare una determinata funzione per ridurre al minimo il codice pur raggiungendo gli obiettivi del progetto.<\/p>\n
Un esempio che mi viene in mente \u00e8 l’uso della funzione clone<\/strong> di jQuery. La definizione<\/a> della funzione \u00e8 semplice:<\/p>\n Il metodo .clone() esegue una copia completa dell’insieme di elementi abbinati, il che significa che copia gli elementi abbinati cos\u00ec come tutti i loro elementi discendenti e nodi di testo.<\/p>\n<\/blockquote>\n La cosa bella della funzione \u00e8 che pu\u00f2 anche creare una copia "superficiale" della funzione. Ci\u00f2 significa che puoi copiare gli elementi senza i gestori di eventi, gli elementi figlio e cos\u00ec via.<\/p>\n A seconda delle tue esigenze, uno sar\u00e0 pi\u00f9 prezioso dell’altro. Ma, per questo post, supponiamo che una copia profonda sia ci\u00f2 che stiamo cercando.<\/p>\n Diciamo che hai un insieme di immagini su una pagina e per ciascuna di queste immagini, devi aggiungere un gestore di eventi in modo che quando si fa clic sull’immagine succeda qualcosa.<\/p>\n Non lo so. Qualunque sia il tuo caso, supponiamo che tu abbia un’immagine o un insieme di immagini e devi visualizzare una finestra di dialogo modale quando viene cliccata.<\/p>\n Per fare ci\u00f2, ci sono diverse cose che dobbiamo fare:<\/p>\n Se stai lavorando con WordPress e stai cercando come aggiungere attributi di immagine personalizzati, puoi vedere un tutorial su come farlo in questo post<\/a>.<\/p>\n Creare un parziale \u00e8 semplice. Il codice potrebbe essere semplice come il seguente snippet<\/a> :<\/p>\n E s\u00ec, potresti vestirlo con un po’ di CSS e aggiungere del codice personalizzato a uno degli elementi usando PHP, ma questo copre le basi assolute.<\/p>\n Ora diciamo che per ogni immagine che esiste nella pagina (con un attributo personalizzato come data-type="acme”<\/strong> ), vogliamo aggiungere una copia dell’elemento sopra alla pagina relativa a ciascuna delle immagini nella pagina.<\/p>\n Per fare ci\u00f2, dobbiamo sapere:<\/p>\n Quindi, per prima cosa, vogliamo rilevare quando si fa clic su una determinata immagine. Per fare ci\u00f2, possiamo scorrere tutte le immagini<\/a> sulla pagina in modo da poter allegare un gestore di eventi personalizzato:<\/p>\n\n
1 Un potenziale caso d’uso<\/h3>\n
\n
2 Impostazione del codice<\/h3>\n
\n
Passo 1<\/h4>\n
Passo 2<\/h4>\n
<p class=\"acme-element\">\n <span>Acme<\/span>\n<\/p><!--- .acme-element --><\/code><\/pre>\nPassaggio 3<\/h4>\n
\n
\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n \/\/ ...\n\n});<\/code><\/pre>\n