Share
Heute ist der erste Eintrag in einer neuen "Web Dev Q & A" -Serie. Ich werde häufig per E-Mail zu verschiedenen Fragen zur Webentwicklung geschickt. Obwohl einige spezifischer sind als andere, würden viele davon sicherlich alle unsere Leser ansprechen. Daher veröffentlichen wir jede Woche eine neue Reihe von Fragen und Antworten aus der Community, sowohl in Form von Artikeln als auch in Form von Videos.
Diese Woche diskutieren wir JavaScript-Callback-Funktionen, einen LESS-Compiler und diese kniffligen CSS-Floats.
"Hallo Nettuts +: Gibt es eine einfache Möglichkeit, Callback-Funktionen mit normalem JavaScript zu erstellen, ähnlich wie bei jQuery?"
Na sicher. Das ist einfach. Lassen Sie uns zum Beispiel eine generische Funktion erstellen.
Accentsconagua
function doSomething (name) alert ('Hallo', + Name); doSomething ("John und Kate Plus 8"); Wie erwartet, meldet der Browser beim Aufruf "Hallo, John und Kate Plus 8." Wenn wir nun als zweiten Parameter der Funktion "doSomething" auch eine Rückruffunktion übergeben möchten, können Sie einfach eine anonyme Funktion übergeben.
function doSomething (name, cb) alert ('Hallo', + Name); doSomething ("John und Kate Plus 8") function () alert ('Diese Rückruffunktion wird erst ausgeführt, nachdem doSomething');); Beachten Sie, wie wir das zweite Argument hinzugefügt haben etwas tun() Funktion: "cb." Es steht Ihnen frei, das zu kennzeichnen, wie Sie möchten, obwohl es üblich ist, es als "cb" zu bezeichnen.callesback. "Nun wird diese anonyme Funktion über diese Variable dargestellt.
Der letzte Schritt ist, es einfach am Ende der Funktion aufzurufen.
function doSomething (name, cb) alert ('Hallo', + Name); cb (); // Führen Sie jetzt die Rückruffunktion aus. doSomething ("John und Kate Plus 8") function () alert ('Diese Rückruffunktion wird nur ausgeführt, nachdem doSomething');); Lieber Nettuts +: Ich habe dein LESS.js-Video geliebt, möchte es aber nicht für die Produktion verwenden. Gibt es eine App für Coda, die stattdessen automatisch meinen Code kompiliert?
Sichere Sache. Die beste Lösung, die ich finden konnte, heißt LESS.app.
Nachdem Sie es (kostenlos) heruntergeladen haben, ziehen Sie einfach Ihren Projektordner in die App, die ihn anweist sehen alle .LESS-Dateien. An diesem Punkt können Sie wie gewohnt an Ihrem Projekt arbeiten. Bei jedem Speichern wird der Compiler ausgeführt, der eine automatisch erstellte Datei generiert / aktualisiert style.css Datei. Wenn Sie mit der Entwicklung Ihrer App fertig sind, müssen Sie nur noch Ihre Stylesheet-Referenzen ändern style.less zu style.css, entsprechend. Einfach! Jetzt gibt es keinen Grund, LESS nicht zu nutzen - es sei denn, Sie verwenden eine andere Lösung wie Sass.
"Hey Nettuts +: Ich habe also ein Navigationsmenü mit einer Liste horizontaler Links. Wenn ich jedoch eine Hintergrundfarbe für das Menü einstelle, wird nichts angezeigt. Wie kommt es? Hier ist mein Code:"
Menü Problem
Okay, das ist eine allgemeine Verwirrung. Der Hintergrund von "Schwarz" wird nicht angezeigt, weil Sie alle Listenelemente nach links verschoben haben. Wenn Sie dies tun, wird das übergeordnete Element (#nav) reduziert. Es gibt zwei Lösungen:
"Overflow: hidden" ist ein geschickter kleiner Trick, der erst in den letzten Jahren um 2005 entdeckt wurde. Wenn Sie einen Wert von "hidden" oder "auto" auf die Eigenschaft "overflow" anwenden, scheint das übergeordnete Element daran zu erinnern es soll seine Kinder einwickeln! Die Logik ist etwas seltsam, gebe ich zu; es funktioniert aber trotzdem.
#nav Hintergrund: schwarz; Überlauf versteckt; / * ta da! * /
Die Einstellung "Überlauf" funktioniert 80% der Zeit. In einigen Fällen müssen wir jedoch die Grenzen des übergeordneten Elements überlappen. In diesem Fall "Überlauf: ausgeblendet;" hackt das Bild / Element ab. Die zweite Lösung ist die Verwendung der beliebten "Clearfix" -Methode. Sie werden dieses häufig verwenden, daher empfehle ich Ihnen, den Code in Ihrem bevorzugten Snippet-Verwaltungstool wie TextExpander, Texter oder Snippets zu speichern.
Kehren Sie zunächst zu Ihrem Markup zurück und wenden Sie eine Klasse von "clearfix" auf das übergeordnete Element an.
Als Nächstes fügen wir das entsprechende Styling für diese Klasse hinzu. Die allgemeine Funktionalität besteht darin, dass wir die "after" -Pseudo-Klasse für das übergeordnete Element verwenden, um Inhalt anzuwenden, und anschließend diesen Inhalt löschen - was im Wesentlichen das Nachahmen imitiert
an der Unterseite Ihres Markups. Diese Methode ist jedoch intelligenter und ruiniert unseren schönen, semantischen Aufschlag nicht..clearfix * zoom: 1; / * trigger hat haslayout in älteren Versionen von iE .clearfix: after content: ""; Bildschirmsperre; Lösche beide; Sichtbarkeit: versteckt; Schriftgröße: 0; Höhe: 0;
msgstr "hasLayout ist wichtig, weil es das Element zwingt, eine rechteckige Form zu haben."
Wie Sie sehen, verwenden wir ": after", um ein Leerzeichen hinzuzufügen nach dem der gesamte Float-Inhalt. Dann setzen wir die Anzeige auf "Blockieren" und löschen sie, sodass der übergeordnete Benutzer die schwebenden Kinder einwickeln muss. Schließlich haben wir einige allgemeine Regeln für Sichtbarkeit, Schriftgröße und -höhe festgelegt, um sicherzustellen, dass dieser Code in einigen Browsern keinen Einfluss auf unser Layout hat.
Bemerkenswert ist die "* zoom: 1" -Deklaration oben. Die "Zoom" -Eigenschaft ermöglicht es uns, die proprietäre "hasLayout" -Eigenschaft des IE auszulösen. hasLayout ist wichtig, da es das Element zwingt, eine rechteckige Form zu haben. Dies bedeutet, dass der Inhalt des Elements nicht um andere Felder herumfließen kann, was häufig zu erheblichen Layoutproblemen bei Ihrer Website führt. Wenn Microsofts proprietäre Eigenschaft "hasLayout" gleich "true" ist, hat das Element "Layout". Glücklicherweise können wir dies auslösen, indem wir unseren Selektoren bestimmte Eigenschaften hinzufügen, einschließlich "Zoom". Andere hasLayout-Trigger, um nur eine Handvoll zu nennen, sind:
Das wird es für diesen Flaggschiff-Eintrag "Web Dev Q & A" tun. Wenn Sie eine "nicht zu komplizierte" Webentwicklungsfrage für uns haben, können Sie:
Danke fürs Lesen und Zuschauen!
