headjs implementiert das parallele Laden von Websites, aber die sequentielle Ausführung von JS

Laden Sie JS parallel, aber führen Sie es nacheinander aus, um die Website-Geschwindigkeit zu verbessern

<script src="js/head.min.js"></script>
<script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js"); </script>

Hinweis: head.js("js/jquery -1.6 .1.min.js","js/jquery.validate.min.js","js/my_validate.js"); Das darin enthaltene JS muss sich im lokalen Ordner befinden, andernfalls wird es mittendrin ausgeführt IE

Zum Beispiel: head.js("js/jquery-1.6.1.min.js", "js/jquery.validate.min.js", "js/alert.js"); Es gibt lokal keine jquery-Datei. Alert.js wird nicht unter IE ausgeführt.

1. Laden Sie andere JS-Dateien asynchron, z. B. Jquery. Obwohl ich zuvor das referenzierte externe JS unten auf der Seite platziert habe, kann ich nach der Verwendung von head.js den gesamten JS-Inhalt in einer Datei sammeln und am Ende der Seite platzieren. Dann können Sie in dieser JS-Datei auf andere externe JS verweisen. Am Ende meiner Seite wird beispielsweise auf ein JS verwiesen:

head(function() {
........
});
/* part 1 */
head.js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
/* part 2 */

Der erste Teil ist das JS-Skript, das nach der Seite ausgeführt werden soll Der zweite Teil ist die Adresse der externen JS-Datei, auf die vor der Ausführung des Skripts verwiesen wird. Wenn ich die von mir verwendete Jquery-Version aktualisieren möchte, muss ich natürlich nur diese Datei ändern, ohne den Seiteninhalt zu ändern. Dies ist nützlich für statisch veröffentlichte MovableTypes.

2. Erkennung der CSS3-Attributunterstützung. Das ist zwar übertrieben, bedeutet aber, dass Sie erkennen können, ob der Browser eine bestimmte CSS3-Eigenschaft unterstützt. Wenn ein bestimmtes Attribut unterstützt wird, wird eine nach diesem Attribut benannte Klasse zum HTML-Knoten der Seite hinzugefügt. Wenn es nicht unterstützt wird, hat der Klassenname ein No-Präfix. Beispielsweise unterstützt IE6 das Boxshadow-Attribut nicht. Wenn Sie die Seite also mit IE6 durchsuchen, sieht der HTML-Knoten der Seite etwa so aus: .

Auf diese Weise können Sie in der CSS-Datei festlegen, dass stattdessen andere Lösungen verwendet werden, wenn der Browser ein bestimmtes erweitertes Attribut nicht unterstützt.

.boxshadow .box{
box-shadow: 0px 0px 5px #bbb;
}
.no-boxshadow .box{
border: 2px solid #bbb;
}

Derzeit umfassen die CSS3-Eigenschaften, die head.js erkennen kann, „Borderimage“, „Borderradius“, „Boxshadow“, „Deckkraftreflexionen“, „Rgba“, „Textschatten“, „Transformationen“ und „Übergänge“.

3. head.js kann den Typ und die Version des Browsers erkennen und auch den Pfad der aktuell besuchten Seite relativ zum Stammverzeichnis der Website erkennen. Noch cooler: head.js kann es dynamisch erkennen den aktuellen Status des Browsers. Übergeben Sie außerdem die vorherigen Attribute dynamisch an den HTML-Knoten und fügen Sie die entsprechende Klasse hinzu! Auf diese Weise können Sie in Kombination mit CSS ein cooles Design erstellen, das sich an jeden Browser anpasst, jede Seite einzigartig macht und das Layout automatisch ändert, wenn sich die Fenstergröße ändert.