Share
Vandaag is de eerste vermelding in een nieuwe "Web Dev Q & A" -reeks. Ik word vaak per e-mail gemaild over verschillende webontwikkeling gerelateerde vragen. Hoewel sommige specifieker zijn dan andere, zullen veel van deze zeker een beroep doen op al onze lezers. Daarom posten we elke week een nieuwe reeks vragen en antwoorden van de community, zowel in de vorm van een artikel als in een video, voor uw gemak.
Deze week bespreken we JavaScript callback-functies, een LESS-compiler en die lastige CSS-drijvers.
"Hallo Nettuts +: is er een eenvoudige manier om callback-functies te maken met normaal JavaScript, vergelijkbaar met wat we met jQuery kunnen doen?"
Natuurlijk. Dit is een gemakkelijke. Laten we bijvoorbeeld een generieke functie maken.
Accentsconagua
functie doSomething (naam) alert ('Hallo', + naam); doSomething ("John en Kate Plus 8"); Wanneer deze wordt opgeroepen, zal de browser zoals verwacht 'Hallo, John en Kate Plus 8' waarschuwen. Als we nu ook een callback-functie willen doorgeven, als de tweede parameter van de functie "DoSomething", kunnen we eenvoudig een anonieme functie doorgeven.
functie doSomething (naam, cb) alert ('Hallo', + naam); doSomething ("John en Kate Plus 8", functie () alert ('deze callback-functie wordt alleen uitgevoerd nadat doSomething heeft');); Merk op hoe we een tweede argument hebben toegevoegd aan de doe iets() functie: "cb." Je bent vrij om dit te labelen zoals je wilt, hoewel het gebruikelijk is om dit te behouden als "cb", wat verwijst naar "callemaalback. "Nu zal die anonieme functie worden gerepresenteerd via deze variabele.
De laatste stap is om het simpelweg onderaan de functie te bellen.
functie doSomething (naam, cb) alert ('Hallo', + naam); Deu (); // voer nu de callback-functie uit doSomething ("John en Kate Plus 8", functie () alert ('deze callback-functie wordt alleen uitgevoerd nadat doSomething heeft');); Beste Nettuts +: ik ben dol op je LESS.js-video, maar wil hem niet gebruiken voor productie. Is er een app voor Coda die mijn code automatisch zal compileren??
Natuurlijk. De beste oplossing die ik kon vinden heet LESS.app.
Nadat u het (gratis) hebt gedownload, sleept u eenvoudig uw projectmap naar de app, waar deze wordt opgedragen kijk maar alle .LESS-bestanden. Op dit punt kun je gewoon doorgaan met werken aan je project. Elke keer dat u opslaat, wordt de compiler uitgevoerd, die een automatisch aangemaakte bewerking genereert / updatet style.css het dossier. Als u klaar bent met het ontwikkelen van uw app, hoeft u alleen uw stylesheet-verwijzingen te wijzigen van style.less naar style.css, overeenkomstig. Gemakkelijk! Er is nu geen reden om niet te profiteren van MINDER - tenzij u een andere oplossing gebruikt, zoals Sass.
"Hey Nettuts +: Dus ik heb een navigatiemenu met een lijst met horizontale links, maar wanneer ik een achtergrondkleur in het menu zet, verschijnt er niets? Hoezo? Hier is mijn code:"
Menu probleem
Oké, dit is een veel voorkomende verwarring. De reden waarom de achtergrond van "zwart" niet wordt weergegeven, is omdat u alle lijstitems naar links hebt verplaatst. Wanneer u dit doet, wordt het bovenliggende element (#nav) samengevouwen. Er zijn twee oplossingen:
"Overloop: verborgen" is een handige kleine truc die pas in de laatste paar jaar rond 2005 werd ontdekt. Door een waarde van "verborgen" of "auto" toe te passen op de eigenschap "overloop", lijkt het eraan te herinneren dat het bovenliggende element het moet zijn kinderen inpakken! De logica is een beetje vreemd, dat geef ik toe; niettemin werkt het.
#nav achtergrond: zwart; overloop verborgen; / * ta da! * /
Het instellen van "overflow" werkt 80% van de tijd, maar er kunnen momenten zijn dat we de grenzen van het bovenliggende element moeten overlappen, in welk geval "overflow: hidden;" zal het beeld / element weghalen. De tweede oplossing is om de populaire "clearfix" -methode te gebruiken. Je zult deze vaak gebruiken, dus ik raad aan dat je doorgaat en de code opslaat in je favoriete tool voor het beheren van fragmenten, zoals TextExpander, Texter of Snippets.
Ga eerst terug naar je mark-up en pas een klasse "clearfix" toe op het bovenliggende element.
Laten we vervolgens de juiste stijl voor deze klasse toevoegen. De algemene functionaliteit is dat we de "na" psuedo-klasse op het bovenliggende element gebruiken om inhoud toe te passen en vervolgens die inhoud te wissen - die in wezen nabootsing nabootst
naar de bodem van je mark-up. Deze methode is echter slimmer en ruïneert onze mooie, semantische mark-up niet..clearfix * zoom: 1; / * triggers heeft haslayout in oudere versies van iE .clearfix: after content: ""; weergave: blok; beiden opschonen; zichtbaarheid: verborgen; lettergrootte: 0; hoogte: 0;
"hasLayout is belangrijk omdat het het element dwingt een rechthoekige vorm te hebben."
Zoals u kunt zien, gebruiken we ": na" om een lege ruimte toe te voegen na alle zwevende inhoud. Vervolgens stellen we het display in op blokkeren en wissen, waardoor de ouder gedwongen wordt de zwevende kinderen in te pakken. Ten slotte stellen we algemene regels voor algemene zichtbaarheid, lettertypegrootte en hoogte in om ervoor te zorgen dat deze code in sommige browsers onze layout niet beïnvloedt..
Het vermelden waard is de verklaring "* zoom: 1" bovenaan. Met de eigenschap "zoom" kunnen we de eigen "hasLayout" -eigenschap van IE activeren. hasLayout is belangrijk omdat het het element dwingt een rechthoekige vorm te hebben. Dit betekent dat de inhoud van het element niet in andere vakjes kan rondlopen, wat vaak tot grote layoutproblemen met uw website leidt. Wanneer de eigendomseigenschap "hasLayout" van Microsoft gelijk is aan true, heeft het element "layout". Gelukkig kunnen we dit activeren door specifieke eigenschappen aan onze selectors toe te voegen, waaronder "zoom". Andere trigger-triggers, om slechts een handvol te noemen, zijn:
Dat zal het doen voor dit vlaggenschip "Web Dev Q & A" entry. Als u een "niet al te ingewikkelde" webontwikkelingvraag voor ons heeft, kunt u:
Bedankt voor het lezen en kijken!
