Verschiedene modulare Frontend-Spezifikationen

Notieren Sie einige wichtige Punkte, damit Sie sie immer im Gedächtnis behalten und anhand von Beweisen nachvollziehen können!

Ein kurzer Rückblick auf meinen eigenen Modularisierungsweg. Da es zu viele verschiedene Inhalte gibt, ist es nicht bequem, das Frontend zu modularisieren umfassendes Verständnis; Ich habe in den letzten Tagen einige Front-Ends interviewt und festgestellt, dass die meisten Menschen mit Ausnahme der Experten, die gekommen sind, um mich zu töten, mit Modularität relativ unbekannt sind und noch nicht einmal davon gehört haben, was Modularität ist Etwas peinlich. Schauen Sie sich die drei heute weltweit beliebten Frameworks an: React, Angular(2) und Vue. Die größte Gemeinsamkeit ist: Modularität und Komponentisierung Nodejs: Webpack, Gulp und Systemjs basieren auf Modularisierung und Komponentisierung, und Ihr Projekt läuft reibungslos und Sie können diese Konstruktionstools verwenden. Warum sich die Mühe machen? Es ist ersichtlich, dass die Modularisierung unabhängig von der Größe des Projekts gut verstanden und in der Praxis angewendet werden muss. Einerseits kann sie die Arbeitseffizienz verbessern und andererseits kann sie das Front-End verbessern Ebene;

Was die Modularisierung betrifft, werde ich nicht näher auf die Vorteile verschiedener Meinungen im Internet eingehen. Wichtiger ist außerdem: Ein stillschweigendes Verständnis zwischen den Teammitgliedern zu schaffen der Modularisierung, der Bildung eines privaten Lagers innerhalb des Teams und der einheitlichen Verwaltung. Erreichen Sie den Zweck, das Front-End-Modul so natürlich aufzurufen, wie das Back-End das Paket aufruft.

Alles kommt von CommonJS:

Haben Sie keine Angst davor, was für ein Framework das ist, und nehmen Sie sich Zeit, es zu lernen. CommonJS ist ein Modul von JS. Aus historischen Gründen gab es bei JS zunächst keine Modularität. Später wurde JS zum De-facto-Standard auf der Browserseite, und sein Status wird immer wichtiger. Die CommonJS-Spezifikation wurde vorgeschlagen, um dieses Problem zu lösen, und es wird gehofft, dass JS nicht nur auf der Browserseite läuft, sondern überall, wo es sich großartig anfühlt. Dann implementierte Nodejs die CommonJS-Spezifikation auf der Serverseite und zog so JS aus der kleinen Umgebung des Browsers in die große Umgebung der Front-End- und Back-End-Kommunikation. Aus dem hässlichen Entlein wurde schließlich ein weißer Schwan!

Gemäß den CommonJS-Spezifikationen sind Dateien Module, mit denen Sie auf Module verweisen und sie laden können. Mit „Exports“ können Sie Module definieren und exportieren. Bei der Verwendung von „Require“ müssen Sie die Datei lesen und ausführen Geben Sie dann den durch Exporte exportierten Inhalt zurück. Da das Lesen und Ausführen des Moduls ein synchroner Dateivorgang ist, kann CommonJS nur von Nodejs auf der Serverseite übernommen werden. Sie können sich die Modularisierung von Nodejs hier ansehen: Browserify ermöglicht es Ihrem Javascript Reisen im Front- und Back-End; auf der Browserseite ist diese Art der synchronen Operation jedoch nicht anwendbar, zumindest ist sie sehr zeitaufwändig und blockiert die Ausführung von nachfolgendem Code. Daher hat CommonJS zwei Hauptzweige abgeleitet die Browserseite: AMD (Asynchronous Module Definition) und CMD (Common Module Definition);

AMD (Asynchronous Module Definition):

AMD wird durch RequireJS dargestellt, das Module durch define(id) definiert ?, dependencies?, Factory) und Aufrufe mit require([dependencies], function(){}) Module verwenden die Methode des asynchronen Ladens abhängiger Module im Voraus. Nach dem Laden des Moduls wird die Callback-Funktion ausgeführt Um den asynchronen Mechanismus von JS zu verstehen, spielt es keine Rolle, welche Dateien zuerst in synchroner Reihenfolge ausgeführt werden Abhängigkeiten, die ausgeführt werden sollen, und schließlich die Ergebnisse zurückrufen;

CMD (Common Module Definition):

Der Vertreter von CMD ist SeaJS und RequireJS. Die Art und Weise, Module zu definieren und zu laden, ist etwas anders Sie können Module auch über define(id?, dependencies?, Factory) definieren, aber SeaJS verwendet die nächstgelegene Abhängigkeitsmethode, um Module in Abhängigkeiten zu laden, sondern sie auf einheitliche Weise zu schreiben (function(require, exports, module){}), laden Sie das abhängige Modul in der Nähe in der Fabrik und verwenden Sie das Modul von seajs.use([dependencies], function(mod,[mod]){}); Beim asynchronen Laden von Modulen unterscheidet sich lediglich der Zeitpunkt des Ladens und der Ausführung von RequireJS.

Im Vergleich dazu sind Seajs und Requirejs beide sehr gute modulare Front-End-Organisationslösungen, von denen jede ihre eigenen Vorzüge hat Warten Sie, bis alle Front-End-Abhängigkeiten geladen und ausgeführt wurden. Wenn etwas fehlt, müssen Sie die Front-End-Abhängigkeiten optimieren. Im Allgemeinen ist dies jedoch sehr reibungslos. lädt die abhängigen Module und wenn Sie sie nicht ausführen, können Sie sie bei Bedarf in der Nähe verwenden.

Ein einfaches Verständnis von Seajs:

Gute Seajs, nicht wahr? Verwenden Sie es nicht, wenn Sie sagen, dass Sie es nicht benötigen

Verwenden Sie Seajs gut!

Tools sind sehr wichtig für die Produktivität:

Obwohl die beliebten modularen Spezifikationen auf der Browserseite AMD und CMD sind, können wir mit Hilfe von Tools dennoch auf der Browserseite simulieren Mit CommonJS-Spezifikationen können wir beispielsweise mit Hilfe von Tools wie Gulp und Webpack weiterhin Front-End-JS-Code in der Entwicklungsumgebung schreiben, genau wie beim Schreiben von Nodejs, und die Tools packen ihn in ähnlicher Weise in vom Browser ausführbares JS Auch das Aufrufen von Codeblöcken ist möglich. ;

UMD (Universal Module Specification):

Da JS nun sowohl am Front- als auch am Backend verwendet werden kann, kann ein JS-Modul weitgehend ausgeführt werden Sowohl im Browser als auch gleichzeitig läuft die UMD-Lösung, um eine plattformübergreifende Modularisierung von JS zu erreichen:

(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this,function($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));

Modularisierung von ES6:

Als neuer Standard für JavaScript verfügt ES6 über modulare Buffs und Import- und Exportmodule. Die Grundidee ähnelt CMD und AMD, bietet jedoch mehr Syntax-Unterstützung. Natürlich ist es aufgrund der aktuellen Browserumgebung einfacher zu verwenden und zu verstehen. Wenn Sie es beruhigt verwenden möchten, müssen Sie zum Konvertieren immer noch die Leistungsfähigkeit von Tools nutzen Endmodularisierung ist ein Muss! Wir können uns nicht mit dem Status quo zufrieden geben, selbst wenn wir ein paar zufällige Dinge tun, es wird immer noch funktionieren, still zu sein ist ein Rückschritt, denn es gibt zu viele große Meister, die härter arbeiten als wir!