Heim > Artikel > Web-Frontend > Wie wird Modularität in JS implementiert?

Wie wird Modularität in JS implementiert?

小云云Original: 2018-01-09 17:01:532210Durchsuche

Aufgrund der anfänglichen Positionierung von Js (ich hatte zunächst nicht erwartet, dass es in übermäßig komplexen Szenarien verwendet wird) stellt es kein Modulsystem bereit. Da Anwendungen komplexer werden, wird die Modularisierung zu einem Problem, das gelöst werden muss. Im Einklang mit den ausführlichen Grundsätzen von Feimai ist es notwendig, den Schleier der Modularisierung zu lüften. In diesem Artikel wird hauptsächlich die Implementierung der Modularisierung in Js im Detail vorgestellt und die Funktionsweise der Modularisierung im Detail vorgestellt, die einen bestimmten Referenzwert hat. Interessierte können mehr erfahren, ich hoffe, es kann allen helfen.

1. Probleme, die durch Modularisierung gelöst werden müssen

Um eine tiefgreifende Analyse von etwas durchzuführen, ist es notwendig, es zielgerichtet zu betrachten. Das durch Modularisierung zu lösende Problem lässt sich in einem Satz zusammenfassen

Projektcode besser organisieren ohne globale Verschmutzung

Um ein einfaches Beispiel zu geben, haben wir jetzt den folgenden Code:

function doSomething () {
 const a = 10;
 const b = 11;
 const add = function (a + b) {
  return a + b
 }
 add (a + b)
}

In realen Anwendungsszenarien muss doSomething möglicherweise viele, viele Dinge tun, und die Add-Funktion ist möglicherweise komplexer und kann wiederverwendet werden. Daher hoffen wir, die Add-Funktion unabhängig zu machen In einer separaten Datei :

// doSomething.js 文件
const add = require('add.js');
const a = 10;
const b = 11;
add(a+ b);

// add.js 文件
function add (a, b) {
 return a + b;
}
module.exports = add;

Der Zweck davon ist offensichtlich. Um den Projektcode besser zu organisieren, beachten Sie die Anforderungen von require und module.exports in den beiden Dateien. Von nun an kommt Gott aus einer Perspektive Die Schlüsselwörter in der CommonJS-Spezifikation (der Spezifikation wird später ein Kapitel gewidmet), die Import bzw. Export darstellen. Unabhängig von der Spezifikation ist dies tatsächlich ein Problem, das auf unserem Weg zur Modularisierung gelöst werden muss. Obwohl das Add-Modul wiederverwendet werden muss, möchten wir bei der Einführung von Add keine globale Verschmutzung verursachen

2 So führen Sie das importierte Modul aus

Im obigen Beispiel haben wir Der Code ist in zwei Moduldateien aufgeteilt. Wie können wir require implementieren, damit der Code im Beispiel normal ausgeführt werden kann, ohne eine globale Verschmutzung zu verursachen?

Ignorieren Sie den Ladevorgang des Moduldateicodes und gehen Sie davon aus, dass require die Codezeichenfolge bereits aus der Moduldatei lesen kann. Dann kann require wie folgt implementiert werden

function require (path) {
  // lode 方法读取 path 对应的文件模块的代码字符串
  // let code = load(path);
  // 不考虑 load 的过程，直接获得模块 add 代码字符串
  let code = 'function add(a, b) {return a+b}; module.exports = add';
  // 封装成闭包
  code = `(function(module) {$[code]})(context)`
  // 相当于 exports，用于导出对象
  let context = {};
  // 运行代码，使得结果影响到 context
  const run = new Function('context', code);
  run(context, code);
  //返回导出的结果
  return context.exports;
}

Es gibt mehrere Schlüssel Punkte:

1) Um keine globale Verschmutzung zu verursachen, muss die Codezeichenfolge in Form eines Abschlusses gekapselt werden und das Schlüsselwort module.exports sollte der einzige Träger sein für den Kontakt mit der Außenwelt und muss verwendet werden als Die Eingabeparameter der anonymen Schließungsfunktion sind mit dem vom Referrer übergebenen Kontext verknüpft

2) Verwenden Sie die neue Funktion, um die Codezeichenfolge auszuführen. Es wird geschätzt, dass die meisten Schüler mit der neuen Funktion nicht vertraut sind, da dies beim Definieren einer Funktion nicht erforderlich ist. Sie müssen wissen, dass Sie eine Funktion direkt mit der Function-Klasse erstellen können.

var function_name = new function(arg1, arg2, ..., argN, function_body)

In der obigen Form ist jedes Argument ein Parameter und der letzte Parameter ist der Funktionskörper (der auszuführende Code). Diese Parameter müssen Zeichenfolgen sein. Mit anderen Worten, Sie können damit String-Code ausführen, ähnlich wie bei eval, und im Vergleich zu eval können Sie auch die Werte bestimmter Variablen im String-Code in Form von Parametern

3) Wenn Sie sich jemals gefragt haben, warum das Standard-Export-Schlüsselwort nur exports lautet, wir aber module.exports tatsächlich verwenden (es sollte denjenigen bekannt sein, die Node-Code geschrieben haben), dann finden Sie die Antwort in diesem Code. Wenn Sie Exporte nur zum Empfangen von Kontext verwenden, hat die Neuzuweisung von Exporten keine Auswirkungen auf den Kontext (die Adresse des Parameters wird übergeben). Wenn Sie es nicht glauben, ändern Sie den Code in die folgende Form und führen Sie ihn aus noch einmal:

Demonstrationsergebnisse

3. Die Codelademethode

löst das Problem der Codeausführung und muss auch das Problem lösen Problem beim Laden des Moduldateicodes. Unser Ziel besteht darin, den Moduldateicode in Form einer Zeichenfolge zu laden.

Im Knotencontainer sind alle Moduldateien lokal Lesen Sie die Moduldatei von der lokalen Festplatte, laden Sie den Zeichenfolgencode und befolgen Sie dann die obigen Schritte. Der Vorgang ist in Ordnung. Fakten haben bewiesen, dass die Lade- und Ausführungsmethode der nicht integrierten, Kern- und C++-Module von Node ungefähr gleich ist (obwohl es sich nicht um eine neue Funktion handelt, handelt es sich um eine ähnliche Methode)

Im RN/ Weex-Container, Sie müssen einen laden. Für Remote-Bundle.js können Sie über native Funktionen eine Remote-JS-Datei anfordern, sie dann in einen Zeichenfolgencode einlesen und laden (gemäß dieser Logik scheint es, dass Node einen Remote-Code lesen kann). js-Modul, obwohl wir dies beim nächsten Mal nicht tun müssen)

In der Browserumgebung müssen alle Js-Module aus der Ferne gelesen werden. Das Peinliche ist, dass dies durch die von bereitgestellten Funktionen eingeschränkt ist Der Browser kann nicht über Ajax in Form von Dateien gestreamt werden. Lesen Sie die Remote-JS-Datei direkt in den String-Code. Wenn die Voraussetzungen nicht erfüllt werden können, funktioniert die obige Betriebsstrategie nicht und wir können nur einen anderen Weg finden

Aus diesem Grund gibt es eine CommonJs-Spezifikation und auch eine AMD/CMD-Spezifikation

Wie geht das im Browser? Um eine Remote-Js-Moduldatei dynamisch über die Js-Steuerung im Browser zu laden, müssen Sie dynamisch einen