Migliorare il codice Javascript: indentazione, spazi, tabulazione, a capo e formattazioni

Scritto il 29 Maggio 2008
Nella categoria Guide, Javascript | 1 commento
Tag: , , , , ,

Solitamente scrivo io il codice che devo poi mantenere, ma capita di prendere altri programmi oppure semplicemente di voler curiosare; o anche di aver scritto un po’ di righe velocemente, senza prestare troppa attenzione e poi volerle espandere. In tutti questi casi il codice scritto deve essere ben indentato e formattato.

Codice

Immagine di dermiller

Per indentazione si intende l’uso degli spazi bianchi o della tabulazione, per allineare il codice in base al flusso e alle strutture del linguaggio come blocchi o istruzioni di controllo. Per parlare chiaro, questo è codice indentato.

if (condizione == true)
    esegui();
else
    exit;

Questo è indentato con gli spazi (nel numero di 4), questo metodo di scrittura rende più semplice la lettura del codice, perché seguire il flusso logico del codice è più semplice, diventa chiaro che esegui dipende dalla condizione precedente.

if (condizione == true)
esegui();
else
exit;

Questo codice sopra è chiaramente molto meno semplice da leggere, è necessario sforzarsi molto di più per capire come funziona.

Indentazione

Alcuni editor hanno già in loro la funzionalità per “rendere bello” il nostro codice, strumenti chiamati solitamente auto-indenter, ma io non mi sono mai trovato bene, poi ognuno usa il suo e difficilmente cambierà per una funzione simile, almeno io non lo farei. Per questo vi consiglio questo tool: Online beautifuller. Ha proprio questa funzione, tutto con un unico click, inoltre utilizza il io stesso stile di indentazione, a volte chiamato K&R, dal nome dei famosi Kernighan e Ritchie, inventori del C. La scelta tra spazi e tabulazione è lasciata all’utente.

Formattazione

Un altro strumento utile, da utilizzare successivamente è Online syntax highlighting. Questo formatta in codice, lo colora in particolare, in modo da evidenziare le parole chiave, quasi tutti gli editor lo fanno già da loro, se il tuo non lo fa, ti consiglio di cambiarlo :P

Codice evidenziato

La sua utilità principale è per chi intende pubblicare codice online, perché fornisce l’HTML da inserire nelle pagine. Ricordarsi sempre di selezionare Javascript a sinistra, altrimenti non funzionerà benissimo!

Minimizzare e compattare

Ultime note su come disfare il lavoro fatto, molte volte si rivela utile anche questo, ma solo in fase finale. Il codice Javascript non viene compilato, ma gira così come lo scriviamo, quindi sicuramente leggibile, ma non compatto, mentre le pagine web devono essere il più leggere possibili. Sono stati creati quindi questi strumenti che minimizzano e compattano il codice, fino al minimo indispensabile e anche oltre volendo (restringendo anche i nomi delle variabili per esempio).

JS Minifier: forse uno dei migliori, permette la scelta anche di quanto comprimere.

BrainJar: uno dei primi e ancora buoni, servizi simili.

Packer: semplice semplice, ma efficace.

PHP Packer: script in PHP, da usare anche in locale.

« altri articoli

Lettere scombinate

Scritto il 3 Gennaio 2008
Nella categoria Javascript, Produzioni Proprie | Scrivi un commento
Tag: , ,

Nota: se non capisci niente o non vuoi fare fatica, alla fine trovi la traduzione

Gira ormai da tntissaimo tmepo la mial srctita tttua cmoe qeusto artoiclo cioè con le lterete di ogni polraa mhiicsate, eucslse la pmria e l’umlita. Ebenbe, gaizre alla REgexp per iavddiirune le poalre apenpa vsita e alla fonunize per msrhicaie un array, ho deciso di inrmlepamete un “misciothare” di prlaoe.


Traduzione:Gira ormai da tantissimo tempo la mail scritta tutta come questo articolo cioè con le lettere di ogni parola mischiate, escluse la prima e l’ultima. Ebbene, grazie alla RegExp per individuare le parole appena vista e alla funzione per mischiare un array, ho deciso di implementare un “mischiatore” di parole.

« altri articoli

Parole (\w+) nelle regular expression

Scritto il 28 Dicembre 2007
Nella categoria Guide, Javascript | Scrivi un commento
Tag: , , ,

Funzione molto comoda nelle Regular Expression sono le i caratteri speciali, come \d per le cifre o \s per tutti i vari spazi. Utilissimo sarebbe il carattere \w, che identificherebbe le lettere (e quindi le parole), ma la specifica impone che trovi solo i caratteri latini base (da “A” a “Z” e da “a” a “z“) più i numeri, rendendo quindi inutile il mezzo per tutti gli alfabeti con caratteri accentati o in generale estesi. Per esempio la parola “perché” non contiene tutte \w in quanto la “é” non appartiene al range [A-Za-z0-9].

Fate qui sotto una prova, nell’output verrà estratta la prima “parola” cioè il primo blocco \w+

Input:

Output:
(generato tramite match(/\w+/) )Per ovviare a questo problema, mi sono sfogliato tutti i codici unicode e ho estratto il blocco esatto per i caratteri, che include quindi anche le lettere accentate e strane di ogni nazione.

[\w\u00C0-\u017F\u1e00-\u1ef9]

Sarebbe il blocco corrispettivo, cioè il classico \w più il resto delle lettere (per essere preciso il blocco Latin Extended Additional, il necessario da Latin-1 Supplement e Latin Extended-A ), ma magari è più utile

[A-Za-Z\u00C0-\u017F\u1e00-\u1ef9]

Che individua solo le lettere escludendo i numeri (che non capisco perché vengano inclusi). Eccone una prova

Input:

Output:
(generato tramite match(/[A-Za-z\u00C0-\u017F\u1e00-\u1ef9]+/) )
.

« altri articoli

Travian Più Più 0.4.6

Scritto il 10 Settembre 2007
Nella categoria Javascript, Mozilla, Travian Più Più | 51 commenti
Tag: ,

Ecco ci qui per l’ultimo aggiornamento a Travian Più Più, arrivato alla versione 0.4.6; ho deciso di smettere di sviluppare quest’estensione perché non gioco più a travian, non ho la possibilità né la motivazione. Sono però disposto a "cedere" TravianPP a chi volesse continuare lo sviluppo, dando la possibilità di fare qui un aggiornamento e beccarsi quindi gli aggiornamenti automatici. Per contattarmi basta mettere dopo il mio nick @gmail.com ;)

In ogni caso ecco le novità di questa versione, non molti a dire la verità:

  • Orari negativi corretti: ora quando avete il grano "in rosso", l’orario del granaio rappresenta quanto manca all’esaurimento
  • Timer sotto le risorse: sotto le risorse, in ogni pagina, è scritto tra parentesi tra quante ore si riempirà quella risorsa, in modo da avere sempre d’occhio la situazione
  • Orari più leggibili: quando manca più di un giorno ora l’orario visualizza anche i giorni (prima solo le ore)
  • Numerosi bug corretti

Potrei essermi dimenticato qualcosa, ci sono state le vacanze di mezzo, se vedete altro di nuovo scrivete un commento.

Buon download e buon travian!

« altri articoli

La delegazione di eventi

Scritto il 16 Agosto 2007
Nella categoria Guide, Javascript | Scrivi un commento
Tag: , ,

La delegazione di eventi è una tecnica Javascript/DOM che ho trovato utile in alcune occasioni, si tratta di non controllare ogni singolo nodo di cui ci interessa un evento, e monitorarne un altro nodo più in alto nella radice DOM.

Un esempio per chiarire: abbiamo una serie di campi input testuali, vogliamo controllare il cambiamento di tutti quanti; classicamente dovremmo attaccare un EventListener ad ognuno di essi (oppure aggiungere una proprietà onChange o simile). Beh invece si può attaccare un solo EventListener ad un elemento che contiene tutti i campi (come l’elemento “form” ad esempio).

Questo è possibile perché gli eventi si trasmettono attraverso l’albero dei nodi, per maggiori informazioni a proposito (ma diventa piuttosto tecnico), si trovano sulla documentazione ufficiale DOM, sezione Eventi.

Potrebbe però diventare utile, a questo punto, scoprire qual’è l’elemento che ha generato l’evento, perché this farà riferimento al nodo a cui abbiamo aggiunto l’EventListener, non al campo testuale. Tra le proprietà dell’evento infatti c’è target oppure srcElement, dipende dal browser. Per essere sicuro che funzioni, io utilizzo il seguente codice: var element = e.target || e.srcElement;

[via HTML]

« altri articoli

Travian Più Più 0.4.5

Scritto il 19 Giugno 2007
Nella categoria Javascript, Mozilla, Travian Più Più | 27 commenti
Tag: ,

Altro aggiornamento per Travian Più Più, con i seguenti cambiamenti:

  • Corretto il bug delle risorse piene: ora vengono segnalate solo quelle giuste, inoltre ho invertito i segnali, in grassetto se si stanno per riempire, lampeggianti (e in grassetto) se piene.
  • A grande richiesta ho cambiato il filtro del mercato, ora è un filtro a selezione piuttosto che ad esclusione.
  • Orario preciso: quando non si hanno risorse o nel magazzino verrà visualizzato non solo il tempo da aspettare ma anche l’orario preciso.

Per questo aggiornamento devo ringraziare tutti quelli che si sono fatti vivi, anche con richieste e segnalazioni (Rulez, Jimbo, active) e anche Claudio e Chido. Mi hanno chiesto in tanti il mercato.

Già che ci sono, a proposito, aggiungo che il filtro non è "trasportabile", quando cambiate pagina dovete ri-selezionare, ora è più comodo di prima, ma il vero motivo è che se vengono passate informazioni da una pagina all’altra il signor Travian potrebbe accorgersene.

Per altre informazioni vi rimando alla pagina ufficiale.

« altri articoli

Travian Più Più 0.4.1

Scritto il 13 Giugno 2007
Nella categoria Javascript, Mozilla, Travian Più Più | 11 commenti
Tag: ,

Mini aggiornamento per Travian Più Più, la 0.4.1, non è un grande aggiornamento, più che altro adatta il codice alla nuova interfaccia, nulla di più, potevano avvertire prima, avevo appena fatto l’aggiornamento!!!!

Sottolineo soltanto che è un aggiornamento fatto sul momento, potrebbero esserci ancora alcuni problemi, fatemeli presenti commentando questo post; tra l’altro il codice per i mercanti ora è un po’ inutile in quanto ogni click corrisponde ad un mercante per tutte le razze, vabbè, ormai era già pronto.

Buona prova, scaricate pure, oppure aggiornate tramite Firefox (andate in Strumenti, Componenti Aggiuntivi e lì cliccate su Cerca Aggiornamenti).

PS con la precedente estensione ero arrivato a circa 100 download, un grazie non farebbe male ;)

« altri articoli

Travian Più Più 0.4

Scritto il 11 Giugno 2007
Nella categoria Javascript, Travian Più Più, Vita sul web | 4 commenti
Tag: ,

Nuova versione di Travian Più Più, ecco le novità:

  • Cambio
    delle icone per i galli: ora le varie cavallerie hanno icone diverse,
    così si possono distinguere tra loro (vengono usate le icone delle
    altre tribù).
  • Contatore di mercanti: quando andate per inviare
    le risorse, vi viene detto quanti mercanti sono necessari e quante
    risorse potete ancora mandare senza aumentarne il numero.
  • Ora il link per inviare nuovamente le truppe appare sempre, troppo utile!
  • Corretto ancora qualche bug dei report.
  • Nel menù di sinistra ora uno spazio dedicato ai report, divisi per categoria (provate e cliccare sullo spazio bianco ;)

Infine ho creato una pagina di descrizione statica, sarà sempre valida e conterrà la descrizione aggiornata (mentre questa riporta solo i cambiamenti tra la 0.3 e la 0.4

Un ringraziamento a beppe e all’inossidabile Chiodo per le idee.

Buon download.

« altri articoli

Travian Più Più: 0.3

Scritto il 26 Aprile 2007
Nella categoria Javascript, Produzioni Proprie, Vita sul web | 19 commenti
Tag: ,

Nuova versione di aggiornamento per Travian Più Più, siamo arrivati alla 0.3, in realtà le modifiche non sono molte ma sono comode ;)

Aggiunte

  • Cliccate sulle coordinate dei vostri secondi villaggi per impostare direttamente le coordinate di "invia risorse" e per i rinforzi (e sarà impostata la casella "rinforzi".
  • Menù a sinistra con l’alleanza, lo trovate sotto il collegamento per il "logout", ci sono tre collegamenti per vedere le pagine collegate all’alleanza, quella principale, quella degli attacchi e quella delle novità. Dico già da subito che non è possibile mettere un collegamento al forum perché se è esterno non c’è modo di "prenderlo".

Modifiche

  • Grazie all’idea di Chiodo ora nel report dopo un combattimento, se il villaggio è risulta avere altre risorse dopo l’attacco (cioè quando appare (LIMITE) ora appare (ANCORA?) come un collegamento per attaccare nuovamente lo stesso villaggio (e magari ripulirlo ;) ).

Ricordate sempre che sono aperto a nuove idee, se avete un suggerimento o vi piacerebbe che l’estensione facesse qualcosa in particolare, scrivete pure un commento qui (come ha fatto Chiodo), se necessario vi contatterò io.

« altri articoli

Mischiare un array: mix()

Scritto il 23 Aprile 2007
Nella categoria Javascript, Produzioni Proprie | Scrivi un commento
Tag: , , ,

Oggi altra funzione che potrebbe tornare utile: mix() che mischia un array in modo casuale; non mi addentro sul significato di casuale, dico soltanto che crea un array aggiungendo ogni volta un elemento preso a caso dall’array originale.

Array.prototype.mix = function() {
	var ret = new Array();
	while (this[0]) {
		ret.push(
			this.splice(
				parseInt(Math.random()*this.length),
				1)[0]
			)
	}
	while (ret[0]) {
		this.push(ret.shift());
	}
	return this;
}

La funzione oltre che mischiare l’array lo restituisce, quindi potete subito agire sul risultato di mix().

Chiaramente è applicabile anche al di fuori di un array, basta che l’oggetto supporti push, pop e splice; inoltre con pochissimi cambiamenti potete renderla una funzione esterna, io preferisco però la programmazione ad oggetti e quindi la implemento come membro di una classe.

Non c’è molto altro da spiegare, viene sempre utile anche se avete una cosa da mischiare, per esempio un elenco di nomi (stringhe in generale). A me è servita proprio per mischiare un elenco di file, resi in array e poi mischiati ;)

« altri articoli