Share
I dag markeras den första posten i en ny "Web Dev Q & A" -serie. Jag mailas ofta om olika webbutvecklingsrelaterade frågor. Även om vissa är mer specifika än andra, kommer många av dem, säkert, att vädja till alla våra läsare. Som sådan kommer vi varje vecka att lägga in en ny sats med frågor och svar från samhället, både i artikeln och i videofilmen, för din bekvämlighet.
I veckan diskuterar vi JavaScript-återuppringningsfunktioner, en mindre kompilator och de knepiga CSS-flottorna.
"Hej Nettuts +: Finns det ett enkelt sätt att skapa återuppringningsfunktioner med regelbunden JavaScript, liknande vad vi kan göra med jQuery?"
Självklart. Det här är något lätt. Låt oss till exempel skapa en generisk funktion.
Accentsconagua
funktion doSomething (namn) alert ('Hej,' + namn); doSomething ("John and Kate Plus 8"); När det kallas, så väntar webbläsaren "Hej, John och Kate Plus 8." Om vi vill vidarebefordra en återuppringningsfunktion, som den andra parametern i "doSomething" -funktionen, kan vi helt enkelt ge en anonym funktion.
funktion doSomething (namn, cb) alert ('Hej,' + namn); doSomething ("John and Kate Plus 8", funktion () alert ('denna återuppringningsfunktion körs bara efter att doSomething har');); Lägg märke till hur vi har lagt till ett andra argument till göra någonting() funktion: "cb." Du är fri att märka detta så du önskar, men det är vanligt att behålla det som "cb", som refererar till "cAlltback. "Nu kommer den anonyma funktionen att representeras via denna variabel.
Det sista steget är att helt enkelt kalla det längst ner i funktionen.
funktion doSomething (namn, cb) alert ('Hej,' + namn); cb (); // kör nu återuppringningsfunktionen doSomething ("John and Kate Plus 8", funktion () alert ('denna återuppringningsfunktion körs endast efter att doSomething har');); Kära Nettuts +: Jag älskade din LESS.js-video, men vill inte använda den för produktion. Finns det en app för Coda som istället ska kompilera min kod?
Visst sak. Den bästa lösningen jag kunde hitta heter LESS.app.
När du har laddat ner det (gratis) drar du helt enkelt din projektmapp i appen, som instruerar den Kolla på alla .LESS-filer. Vid den här tiden kan du fortsätta arbeta med ditt projekt, per vanligt. Varje gång du sparar kör kompilatorn, vilket genererar / uppdaterar en automatiskt skapad style.css fil. När du är klar med att utveckla din app behöver du bara ändra dina referensblankreferenser från style.less till style.css, följaktligen. Lätt! Nu finns det ingen anledning att inte dra nytta av MINDRE - om du inte använder en annan lösning, som Sass.
"Hey Webuts +: Så jag har en navigeringsmeny med en lista över horisontella länkar, men när jag ställer in en bakgrundsfärg till menyn visas ingenting? Hur kommer det? Här är min kod:"
Menyproblem
Okej, det här är en vanlig förvirring. Anledningen till att bakgrunden till "svart" inte dyker upp är att du har floated alla listobjekt till vänster. När du gör det orsakar det att moderelementet (#nav) kollapsar. Det finns två lösningar:
"Overflow: hidden" är ett smutsigt litet knep som bara upptäcktes under de senaste åren, runt 2005. Genom att tillämpa ett värde av "dold" eller "auto" till "överflödet" -egenskapen, verkar det påminna moderelementet som det är meningen att det ska vara omslaget till sina barn! Logiken är lite udda, jag erkänner; dock fungerar det.
#nav bakgrund: svart; överflöde: gömd; / * ta da! * /
Inställning av "överflöde" fungerar 80% av tiden, men det kan finnas tider när vi behöver överlappa gränserna för moderelementet, i vilket fall "överflöde: doldt". kommer att haka av bilden / elementet av. Den andra lösningen är att använda den populära "clearfix" -metoden. Du brukar använda den här ofta, så jag rekommenderar att du fortsätter och sparar koden i ditt favoritverktyg för hantering av snippet, som TextExpander, Texter eller Snippets.
Gå först till din mark-up, och använd en klass av "clearfix" till moderelementet.
Låt oss sedan lägga till lämplig styling för den här klassen. Den allmänna funktionaliteten är att vi använder "after" psuedo-klassen på moderelementet för att tillämpa innehåll, och sedan rensa det innehållet - vilket i huvudsak mimikerar att lägga till
till botten av din mark-up. Denna metod är dock smartare och förstör inte vår vackra semantiska markering..clearfix * zoom: 1; / * triggers har haslayout i äldre versioner av iE .clearfix: efter content: ""; display: block; klara: båda; synlighet: gömd; typsnittstorlek: 0; höjd: 0;
"hasLayout är viktigt eftersom det tvingar elementet att ha en rektangulär form."
Som du kan se använder vi ": after" för att lägga till ett tomt utrymme efter allt flytande innehåll. Vi ställer sedan in skärmen för att blockera, och rensa den, vilket tvingar föräldern att sätta fast de flytande barnen. Slutligen sätter vi några allmänna synlighets-, stilsorts- och höjdregler för att säkerställa att denna kod inte påverkar vår layout i vissa webbläsare.
Värt att notera är "* zoom: 1" -deklarationen längst upp. Egenskapen "zoom" tillåter oss att utlösa IE: s egenutvecklade "hasLayout" -egenskap. hasLayout är viktigt eftersom det tvingar elementet att ha en rektangulär form. Det betyder att innehållet i elementet inte kan flyta runt andra rutor, vilket ofta leder till stora layoutproblem med din webbplats. När Microsofts egen egendom "hasLayout" är lika med sant, har elementet layout. "Lyckligtvis kan vi utlösa detta genom att lägga till specifika egenskaper för våra selektörer, inklusive" zoom ". Andra harLayout utlösare, för att bara nämna en handfull, är:
Det kommer att göra det för denna flaggskepps "Web Dev Q & A" -post. Om du har en "inte-för-komplicerad" webbutvecklingsfråga för oss kan du:
Tack för att du läste och tittade på!
