Share
Oggi segna il primo ingresso in una nuova serie "Web Dev Q & A". Sono spesso inviato per e-mail riguardo a varie domande relative allo sviluppo web. Sebbene alcuni siano più specifici di altri, molti di questi, sono sicuro, farebbero appello a tutti i nostri lettori. Di conseguenza, ogni settimana pubblicheremo una nuova serie di domande e risposte dalla community, sia in forma di articolo che di video, per vostra comodità.
Questa settimana discuteremo le funzioni di callback JavaScript, un compilatore LESS e quei buffi float CSS.
"Hi Nettuts +: c'è un modo semplice per creare funzioni di callback con JavaScript normale, simile a quello che possiamo fare con jQuery?"
Ovviamente. Questo è facile. Ad esempio, creiamo una funzione generica.
Accentsconagua
function doSomething (name) alert ('Hello,' + name); doSomething ("John and Kate Plus 8"); Quando viene chiamato, come previsto, il browser avviserà "Ciao, John e Kate Plus 8." Ora, se vogliamo passare anche una funzione di callback, come secondo parametro della funzione "doSomething", possiamo semplicemente passare una funzione anonima.
function doSomething (name, cb) alert ('Hello,' + name); doSomething ("John and Kate Plus 8", function () alert ('questa funzione di callback verrà eseguita solo dopo che DoSomething ha');); Nota come abbiamo aggiunto un secondo argomento al fare qualcosa() funzione: "cb." Sei libero di etichettare questo come desideri, anche se è normale tenerlo come "cb", che si riferisce a "ctuttiBack. "Ora, quella funzione anonima verrà rappresentata tramite questa variabile.
L'ultimo passo è semplicemente chiamarlo in fondo alla funzione.
function doSomething (name, cb) alert ('Hello,' + name); cb (); // ora esegue la funzione di callback doSomething ("John and Kate Plus 8", function () alert ('questa funzione di callback verrà eseguita solo dopo che DoSomething ha');); Dear Nettuts +: ho adorato il tuo video LESS.js, ma non voglio usarlo per la produzione. Esiste un'app per Coda che compilerà automaticamente il mio codice?
Cosa certa. La migliore soluzione che sono riuscito a trovare si chiama LESS.app.
Dopo averlo scaricato (gratuitamente), trascina semplicemente la cartella del progetto nell'app, a cui viene richiesto di farlo orologio tutti i file .LESS. A questo punto, puoi continuare a lavorare sul tuo progetto, come al solito. Ogni volta che salvi, il compilatore verrà eseguito, il che genera / aggiorna automaticamente creato style.css file. Quando hai finito di sviluppare la tua app, devi solo cambiare i riferimenti al foglio di stile da style.less a style.css, di conseguenza. Facile! Ora non c'è motivo per non approfittare di MENO - a meno che tu non stia usando una soluzione diversa, come Sass.
"Hey Nettuts +: Quindi ho un menu di navigazione con un elenco di collegamenti orizzontali, ma quando imposto un colore di sfondo nel menu, non compare nulla? Come mai? Ecco il mio codice:"
Menu Problema
Ok, questa è una confusione comune. Il motivo per cui lo sfondo di "nero" non viene visualizzato è perché hai spostato tutti gli elementi della lista a sinistra. Quando lo fai, fa in modo che l'elemento genitore (#nav) venga compresso. Ci sono due soluzioni:
"Overflow: hidden" è un piccolo trucchetto che è stato scoperto solo negli ultimi anni, intorno al 2005. Applicando un valore di "hidden" o "auto" alla proprietà "overflow", sembra ricordare all'elemento padre che dovrebbe essere avvolgere i suoi bambini! La logica è un po 'strana, lo ammetto; tuttavia, tuttavia, funziona.
#nav background: black; overflow: nascosto; / * ta da! * /
L'impostazione "overflow" funziona per l'80% delle volte, tuttavia, potrebbero esserci momenti in cui è necessario sovrapporre i limiti dell'elemento genitore, nel qual caso "overflow: hidden;" taglierà l'immagine / elemento. La seconda soluzione è utilizzare il popolare metodo "clearfix". Lo utilizzerai spesso, quindi ti consiglio di andare avanti e salvare il codice nel tuo strumento di gestione dei frammenti preferiti, come TextExpander, Texter o Snippet.
Per prima cosa, torna al tuo markup e applica una classe di "clearfix" all'elemento genitore.
Successivamente, aggiungiamo lo stile appropriato per questa classe. La funzionalità generale è che usiamo la classe "dopo" psuedo sull'elemento padre per applicare il contenuto, e quindi successivamente cancelliamo quel contenuto - che essenzialmente imita l'aggiunta
fino alla fine del tuo mark-up. Tuttavia, questo metodo è più intelligente, e non rovina il nostro bellissimo markup semantico..clearfix * zoom: 1; / * i trigger hanno haslayout nelle versioni precedenti di iE .clearfix: after content: ""; blocco di visualizzazione; chiaro: entrambi; visibilità: nascosta; dimensione carattere: 0; altezza: 0;
"hasLayout è importante perché costringe l'elemento ad avere una forma rettangolare."
Come puoi vedere, usiamo ": after" per aggiungere uno spazio vuoto dopo tutto il contenuto fluttuante. Quindi impostiamo il display per bloccare e cancellarlo, il che costringe il genitore a racchiudere i bambini fluttuanti. Infine, abbiamo impostato alcune regole di visibilità generale, dimensioni dei caratteri e altezza per garantire che questo codice non influenzi il nostro layout in alcuni browser.
Degno di nota è la dichiarazione "* zoom: 1" in alto. La proprietà "zoom" ci consente di attivare la proprietà proprietaria "hasLayout" di IE. hasLayout è importante perché costringe l'elemento ad avere una forma rettangolare. Ciò significa che il contenuto dell'elemento non può fluire attorno ad altre caselle, che spesso causano problemi di layout importanti con il tuo sito web. Quando la proprietà proprietaria di Microsoft "hasLayout" è uguale a true, l'elemento "ha layout". Fortunatamente, possiamo attivare questa funzione aggiungendo proprietà specifiche ai nostri selettori, incluso "zoom". Altri trigger di hasLayout, per nominare solo una manciata, sono:
Questo lo farà per questa voce di punta "Web Dev Q & A". Se hai una domanda di sviluppo web "non troppo complicata" per noi, puoi:
Grazie per aver letto e guardato!
