JavaScript è uno dei linguaggi più utilizzati nello sviluppo web. È semplice, ma molto potente e il numero di modi in cui può essere utilizzato è quasi illimitato. Ecco perché è così importante raccogliere consigli da quelli che ti hanno preceduto. Ecco 10 suggerimenti da sviluppatori web ben rispettati all'interno della comunità JavaScript.
Christophe Porteneuve ha alcune costolette di design seriose. Ha sviluppato siti web dal 1995, ha gestito il reparto di ingegneria del software di un importante college IT e ora è il CTO di Ciblio.net. È così bravo in quello che fa che il team di A List Apart gli ha dato degli spazi per condividere alcune delle sue idee.
Christophe colpisce un aspetto molto importante di javascript: Bindings.
Quasi nessuno dei principali linguaggi di programmazione orientata agli oggetti (OOP) impone di considerare vincolante. Cioè, non ti richiedono di qualificare esplicitamente l'accesso ai membri dell'oggetto corrente (metodi e proprietà) con un riferimento come questo o se stessi. Se si chiama un metodo su nessun oggetto particolare, di solito lo si chiama sull'oggetto corrente. Lo stesso vale quando passi un metodo per l'invocazione successiva: manterrà il suo oggetto attuale. In breve, per la maggior parte dei linguaggi OOP, l'associazione è implicita.
Christophe continua a fornire esempi di rilegatura corretta e come riconoscere schemi sensibili vincolanti. Ecco quattro punti da asporto nell'articolo di Christophe:
Questo
.applicare
e chiamata
.Dave Shea è un rispettato sviluppatore e designer di web, probabilmente meglio conosciuto per il suo eccellente lavoro su CSS Zen. Dave ha dimostrato un'incredibile capacità di progettare interfacce utente eccezionali ed è un altro autore dell'eccellente A List Apart.
Le librerie JavaScript sono come un coltellino svizzero per lo sviluppatore web. Esistono innumerevoli gusti di librerie JavaScript tra cui scegliere e il numero di sviluppatori che sviluppano plug-in per queste librerie sta crescendo ogni giorno. È possibile utilizzare le librerie JavaScript per quasi tutte le funzionalità.
Prendi gli sprite CSS, per esempio. Invece di usare pesanti layout di flash per ottenere un effetto rollover, Dave Shea ritiene che si dovrebbero utilizzare librerie JavaScript minuscole come jQuery per ottenere la stessa funzionalità. Dave elenca alcuni dei vantaggi dell'utilizzo di librerie JavaScript, in particolare di quelle ospitate da Google.
Poiché molti altri sviluppatori web si collegheranno al codice di Google, è possibile che JavaScript si trovi già nella cache del browser. L'utilizzo delle librerie JavaScript ti consentirà di concentrare più tempo sullo sviluppo, con meno tempo dedicato alla scrittura del codice JavaScript.
John Resig è uno degli sviluppatori JavaScript più famosi del pianeta. Ha creato la libreria jolly Wildly popolare. Ha scritto un libro su Pro JavaScript Techniques e condivide anche le sue conoscenze di scripting sul suo blog personale.
John offre un metodo piuttosto unico per accelerare i tempi di sviluppo di JavaScript con l'uso di micro-modelli.
Ho avuto un po 'di utilità che ho iniziato a fare da un po' di tempo che ho trovato molto utile nei miei progetti di creazione di applicazioni JavaScript. È una funzione di template semplicissima che è veloce, si memorizza rapidamente nella cache ed è facile da usare. Ho un paio di trucchi che uso per rendere davvero divertente scherzare.
L'utilizzo di micro-modelli non è un aspetto critico, ma può davvero accelerare il processo di sviluppo. Dai un'occhiata ad alcuni esempi di micro-templating di John per ottenere una migliore percezione dei benefici della funzione di template.
Ayman Hourieh è un laureato in informatica, dipendente di Google e autore dello sviluppo web di Django. Ayman conosce la sua strada con una programmazione elegante.
Nel suo articolo che illustra nove suggerimenti JavaScript, Ayman tocca un aspetto leggermente più avanzato dei metodi di associazione agli oggetti.
Chiunque lavori con eventi JavaScript può aver incontrato una situazione in cui è necessario assegnare il metodo di un oggetto a un gestore di eventi. Il problema qui è che i gestori di eventi sono chiamati nel contesto del loro elemento HTML, anche se erano originariamente legati a un altro oggetto. Per superare questo, utilizzo una funzione che lega un metodo a un oggetto; prende un oggetto e un metodo e restituisce una funzione che chiama sempre il metodo nel contesto di quell'oggetto.
Usando Prototype e un piccolo codice personalizzato, Ayman fornisce un ottimo consiglio per i metodi di rilegatura agli oggetti. Un trucco piccolo, semplice ed efficiente.
Andrew Tetlaw sviluppa siti Web dal 1997 ed è l'editore tecnico di SitePoint. SitePoint non assumerebbe alcuno slouch per diventare il loro redattore tecnico. La scrittura di Andrew su SitePoint ne è la prova.
L'utilizzo dell'interattività di JavaScript nei tuoi layout può essere un compito scoraggiante. Ma Andrew ha dimostrato che l'utilizzo della delega degli eventi non è solo più facile di quanto si possa pensare, ma offre anche molti vantaggi, come l'eliminazione delle perdite di memoria.
Gli eventi JavaScript sono il fondamento di tutta l'interattività sulle pagine web (intendo interattività seria, non quei menu a tendina CSS). Nella gestione degli eventi tradizionale aggiungi o rimuovi gestori di eventi da ciascun elemento secondo necessità. Tuttavia, i gestori di eventi possono potenzialmente causare perdite di memoria e degrado delle prestazioni "più ne hai, maggiore è il rischio. La delega degli eventi JavaScript è una tecnica semplice con cui si aggiunge un singolo gestore di eventi a un elemento padre per evitare di dover aggiungere gestori di eventi a più elementi figlio.
Molte delle principali librerie JavaScript hanno esempi di delega degli eventi, quindi non dovrai scrivere il tuo script personalizzato.
Chris Heilmann è un evangelista dello sviluppo internazionale che lavora per Yahoo Developer Network. Chris ha alcune grosse costolette di JavaScript e puoi vedere molte presentazioni dal suo sito personale.
Chris ha sviluppato un eccellente tutorial che mostra le differenze tra la gestione degli eventi e la gestione degli eventi.
La differenza tra i due è che l'esempio "Handlers" è piuttosto lento quando la lista è molto grande mentre l'esempio "Delegation" può essere esteso quanto vuoi senza aggiungere altro overhead. Anche l'ultimo esempio è molto più semplice da cambiare.
La delega degli eventi è più adatta per le applicazioni più grandi, mentre la gestione degli eventi è molto più adatta ai piccoli progetti.
Per gli sforzi di gestione degli eventi davvero piccoli, la soluzione classica ti offre un maggiore controllo ed è abbastanza facile da consegnare ad altri sviluppatori senza molte spiegazioni. La delega degli eventi è probabilmente l'unico modo per mantenere un'app di grandi dimensioni con molti elementi per applicare la gestione a (o gli elementi caricati dinamicamente) sotto controllo.
Se mai ci fosse una squadra di "maestri JavaScript", Yahoo! La rete degli sviluppatori potrebbe essere così. Yahoo! Il team di sviluppatori ha fornito alcune risorse incredibili alla comunità di sviluppo. Sono dotati di ampi articoli e suggerimenti dai propri sviluppatori, quindi possiamo essere certi che ogni bit di conoscenza che condividono supera uno standard molto alto.
Ajax può essere uno strumento meraviglioso per offrire un'esperienza utente molto più ricca a un sito web. Tuttavia, il compromesso con l'utilizzo di Ajax è che a volte si carica più lentamente di un sito web tradizionale. Il team di sviluppatori di Yahoo ha sviluppato alcuni suggerimenti su come lavorare con JavaScript e Ajax, in particolare con il caching Ajax, quindi i tempi di risposta sono molto più veloci.
In molte applicazioni, indipendentemente dal fatto che l'utente resti in attesa dipende da come viene utilizzato Ajax. Ad esempio, in un client di posta elettronica basato sul Web, l'utente sarà tenuto ad attendere i risultati di una richiesta Ajax per trovare tutti i messaggi di posta elettronica che soddisfano i criteri di ricerca. È importante ricordare che "asincrono" non implica "istantaneo".
Per migliorare le prestazioni, è importante ottimizzare queste risposte Ajax. Il modo più importante per migliorare le prestazioni di Ajax è rendere le risposte memorizzabili nella cache ...
Caching Le chiamate Ajax con metodi come l'aggiunta di Expires o Cache-Control Headercan velocizzano notevolmente i tempi di risposta dell'applicazione.
Non sorprende che il team di YUI stia per fare questa lista due volte, con la sua ampia base di conoscenza di suggerimenti JavaScript.
Un aspetto semplice ma fondamentale dello sviluppo con JavaScript che molti sviluppatori trascurano è l'aggiunta di JavaScript nella parte inferiore della pagina, in contrasto con la parte superiore. Aggiungendo JavaScript include nella parte superiore della pagina, stai bloccando anche download paralleli di altri elementi all'interno della pagina, come le immagini.
Non è sempre l'idea migliore per aggiungere JavaScript include in fondo, ma molte volte è possibile, e le prestazioni aumenteranno a causa di esso.
Julien Lecomte è un altro Yahoo! Dipendente della rete di sviluppo. È un uomo molto esperto quando si tratta di ottimizzare il codice JavaScript come autore del compressore YUI e del gestore cronologico YUI.
In un discorso tenuto da Julien, dà alcuni consigli eccellenti sull'ottimizzazione di JavaScript. Durante la presentazione Julien afferma che i programmatori JavaScript dovrebbero stare il più lontano possibile dal costruttore di Eval. Sulla diapositiva 19 del discorso vedrai la sua logica.
- La stringa passata a Eval (e ai suoi parenti, al costruttore Function e alle funzioni setTimeout e setInterval) deve essere compilata e interpretata. Estremamente lento!
- Non passare mai una stringa alle funzioni setTimeout e setInterval. Passa invece una funzione anonima.
- Non utilizzare mai il costruttore Eval e Function (tranne in casi estremamente rari e solo in blocchi di codice in cui le prestazioni non sono critiche).
Peter-Paul Koch è un famoso sviluppatore di Apple Internet che gestisce anche il sito Web di Quirksmode che presenta una gran quantità di suggerimenti JavaScript. Peter-Paul ha anche scritto la ppk su JavaScript, che offre ogni sorta di informazioni sullo sviluppo di JavaScript.
PPK tocca un importante (e comune) equivoco che i nuovi scrittori di script Java potrebbero incontrare frequentemente: = o == ?
Un errore che gli autori di JavaScript spesso fanno è confondere gli operatori di assegnazione e uguaglianza = e ==. Se vuoi confrontare due valori, dovresti usare un doppio segno di uguale poiché è così che funziona JavaScript. Se si utilizza accidentalmente un singolo segno di uguale, non si confrontano i valori ma si assegna un valore a una variabile.
Sebbene non sia un concetto sconvolgente o un bocconcino di informazioni, è un utile promemoria che può far risparmiare molte ore al programmatore iniziale.
Glen Stansberry è uno sviluppatore web e blogger che ha faticato più volte di quanto avrebbe voluto ammettere con i CSS. Puoi leggere altri suggerimenti sullo sviluppo web sul suo blog Web Jackalope.
Se hai trovato utile questo post, per favore dì grazie a Digg: