Vorwort
SeaJS ist ein JavaScript -Modul -Ladegerüst, das der CommonJS -Spezifikation folgt, mit der der modulare Entwicklungs- und Lademechanismus von JavaScript implementiert werden kann. Im Gegensatz zu JavaScript -Frameworks wie JQuery erweitert SeaJS nicht die Funktionen der Kapselungssprache, sondern implementiert nur Modularisierung und Laden nach Modul. Der Hauptzweck von SeaJs ist es, JavaScript-Entwicklung modular zu machen und einfach und glücklich zu laden, freie Front-End-Ingenieure aus der starken JavaScript-Datei- und Objektabhängigkeitsverarbeitung und können sich auf die Logik des Codes selbst konzentrieren. SeaJs können perfekt in Frameworks wie JQuery integriert werden. Die Verwendung von SeaJs kann die Lesbarkeit und Klarheit des JavaScript -Code verbessern, die Probleme der Abhängigkeitsverwirrung und -code -Verstrickung lösen, die bei der JavaScript -Programmierung häufig sind, und die Schreiben und Wartung von Code erleichtern.
Der Autor von SeaJS ist Yu Bo, ein Taobao Front-End-Ingenieur.
SeaJs selbst folgt dem Kiss-Konzept (Keep It Simple, Dummes) für die Entwicklung. Im Prozess des Lernens von SeaJs können Sie die Essenz des Kussprinzips überall spüren - nur eins machen und eine Sache gut machen.
In diesem Artikel wird zunächst ein Beispiel verwendet, um die traditionelle JavaScript -Programmierung und modulare JavaScript -Programmierung mit SeaJs intuitiv zu vergleichen, und diskutiert dann die Nutzungsmethoden von SeaJs ausführlich und enthält schließlich einige Informationen zu SeAJs.
Traditioneller Modus gegen SeaJs Modularität
Angenommen, wir entwickeln jetzt eine Webanwendung TinyApp und haben uns entschlossen, das JQuery -Framework in TinyApp zu verwenden. Die Homepage von TinyApp verwendet Module1.js, das von Module2.js und Module3.js und Module3.js abhängt.
Traditionelle Entwicklung
Mit herkömmlichen Entwicklungsmethoden lautet der Code der einzelnen JS -Datei wie folgt:
Kopieren Sie den Code wie folgt: //module1.js
var modul1 = {
run: function () {
return $ .merge (['modul1'], $ .merge (module2.run (), module3.run ()));
}
}
//module2.js
var modul2 = {
run: function () {
return ['module2'];
}
}
//module3.js
var modul3 = {
run: function () {
return $ .merge (['modul3'], module4.run ());
}
}
//module4.js
var module4 = {
run: function () {
return ['module4'];
}
}
Zu diesem Zeitpunkt muss index.html modul1.js und alle seine zugrunde liegenden Abhängigkeiten verweisen (beachten Sie die Reihenfolge):
Kopieren Sie den Code wie folgt: <! DocType html>
<html lang = "zh-cn">
<kopf>
<meta charset = "utf-8">
<title> TinyApp </title>
<script src = "./ jQuery-min.js"> </script>
<script src = "./ module4.js"> </script>
<script src = "./ module2.js"> </script>
<script src = "./ module3.js"> </script>
<script src = "./ module1.js"> </script>
</head>
<body>
<p> </p>
<Script>
$ ('. Inhalt'). html (modul1.run ());
</script>
</body>
</html>
Im Laufe des Projekts wird es immer mehr JS -Dateien geben, und die Abhängigkeiten werden immer komplexer, sodass die JS -Code und die Skriptlisten in HTML häufig schwer zu warten sind.
SeaJS Modulare Entwicklung
Schauen wir uns an, wie die gleiche Funktionalität mit SeaJs implementiert werden kann.
Erstens ist index.html:
Kopieren Sie den Code wie folgt: <! DocType html>
<html lang = "zh-cn">
<kopf>
<meta charset = "utf-8">
<title> TinyApp </title>
</head>
<body>
<p> </p>
<script src = "./ sea.js"> </script>
<Script>
SeaJs.use ('./ Init', Funktion (init) {
init.initpage ();
});
</script>
</body>
</html>
Sie können sehen, dass die HTML -Seite nicht mehr alle Abhängigkeiten JS -Dateien einführen muss, sondern nur ein Sea.js. Wenn Sie die Seite rendern.
Index.html lädt das Init -Modul und verwendet die InitPage -Methode dieses Moduls, um die Seitendaten zu initialisieren.
Schauen wir uns das folgende modulare JavaScript -Schreiben an:
Kopieren Sie den Code wie folgt: //jquery.js
Definieren Sie (Funktion (erfordern, exportieren, modul) = {
// der ursprüngliche jQuery.js Code ...
module.exports = $ .noconflict (true);
});
//init.js
Definieren Sie (Funktion (erfordern, exportieren, modul) = {
var $ = fordert ('JQuery');
var m1 = require ('modul1');
exports.initpage = function () {
$ ('. Inhalt'). html (m1.run ());
}
});
//module1.js
Definieren Sie (Funktion (erfordern, exportieren, modul) = {
var $ = fordert ('JQuery');
var m2 = require ('modul2');
var m3 = require ('modul3');
exports.run = function () {
return $ .merge (['modul1'], $ .Merge (m2.run (), m3.run ()));
}
});
//module2.js
Definieren Sie (Funktion (erfordern, exportieren, modul) = {
exports.run = function () {
return ['module2'];
}
});
//module3.js
Definieren Sie (Funktion (erfordern, exportieren, modul) = {
var $ = fordert ('JQuery');
var m4 = require ('modul4');
exports.run = function () {
return $ .merge (['modul3'], m4.run ());
}
});
//module4.js
Definieren Sie (Funktion (erfordern, exportieren, modul) = {
exports.run = function () {
return ['module4'];
}
});
Auf den ersten Blick scheint der Code komplizierter zu sein, da dieses Beispiel zu einfach ist. Daraus können wir jedoch immer noch einige Merkmale von SeaJs sehen:
Zunächst muss die HTML -Seite keine lange Liste von Skript -Tags beibehalten, sondern nur ein Sea.js.
Der zweite ist, dass der JS -Code als Module organisiert ist.
In diesem Beispiel sollten Freunde einen intuitiven Eindruck von SeaJs haben.