Bringen Sie Ihnen Schritt für Schritt bei, wie Sie gängige Module mit JS schreiben (detaillierte Code-Erklärung)

Im vorherigen Artikel „Eine kurze Analyse der Zeitstempel-Operationsmethode in JavaScript (mit Code)“ haben wir etwas über die Zeitstempel-Operationsmethode in js gelernt. Der folgende Artikel zeigt Ihnen, wie Sie JS zum Schreiben gemeinsamer Module verwenden.

Das Problem der Modularisierung bestand nicht von Anfang an, als WWW zum ersten Mal herauskam, html, JavaScript, CSS (JS und CSS wurden später bei Netscape in den Browser eingeführt) sind äußerst einfach und erfordern keine Modularisierung. WWW刚刚问世的时候，html，JavaScript，CSS（JS和CSS都是后来在网景被引进浏览器的）都是极其简单的存在，不需要模块化。

模块化的需求是规模的产物，当web page进化到web application，浏览器端处理的逻辑越来越复杂，展现的样式和动画越来多，对于工程的要求也就越来越高。于是模块化的需求也就产生了。模块化的意义：

• 组件的复用，降低开发成本和维护成本

• 组件单独开发，方便分工合作

• 模块化遵循标准，方便自动化依赖管理，代码优化，部署

JavaScript长久以来被认为是简单的脚本语言，实际上情况早就发生来变化，在最新版的 ECMA-262（ES6）文档中强调JavaScript是通用编程语言而不是脚本语言。脚本语言，比如shell并不是用来完成复杂功能的，只是用来做一些自动化控制，是不需要模块化的。而用于构建复杂系统通用编程语言（比如Java）一般都有模块的实现。

在ES6以前，JS语言没有模块化，如何让JS不止运行在浏览器，且能更有效的管理代码， 于是应运而生CommonJS这种规范，定义了三个全局变量：

require，exports，module

• require用于引入一个模块

• exports对外暴露模块的接口，可以是任何类型

• module是这个模块本身的对象

用require引入时获取的是这个模块对外暴露的接口（exports）

Node.js使用了CommonJS规范：

var foo = require("foo");
var out = foo.sayName();
module.exports = out;

在浏览器端，不像Node.js内部支持CommonJS，如何进行模块化，于是出现了CMD与AMD两种方式，其主要代表是seajs和requirejs，他们都定义了一个全局函数define来创建一个模块：

//CMD
define(function (require, exports, module) {
  var foo = require("foo");
  var out = foo.sayName();
  module.exports = out;
});

//AMD
define(["foo"], function (foo) {
  var out = foo.sayName();
  return out;
});

可以看出CMD完好的保留了CommonJS的风格， 而AMD用了一种更简洁的依赖注入和函数返回的方式实现模块化。 两者除风格不同外最大区别在于加载依赖模块的方式，CMD是懒加载，在require时才会加载依赖， 而AMD是预加载，在定义模块时就提前加载好所有依赖。 

 我们要实现一个模块，让它既能在seajs（CMD）环境里引入，又能在requirejs（AMD）环境中引入，当然也能在Node.js（CommonJS）中使用，另外还可以在没有模块化的环境中用script标签全局引入。

首先搞一个模块

var factory = function () {
  var moduleName = {};
  return moduleName;
};

当然return输出的可以是任何值，对象，类，其他都可以

首先满足Node.js或者ES6，我们可以通过全局变量module和exports来判断

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
}

在CMD和AMD中，我们需要提供一个工厂函数传入define来定义模块，当没有上述全局变量，且有define全局变量时，我们认为是AMD或CMD，可以直接将factory传入define：

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
} else if (typeof define === "function" && (define.cmd || define.amd)) {
  define(factory);
}

注意：CMD 其实也支持 return 返回模块接口，所以两者可以通用。

然后还要满足script标签全局引入，我们可以将模块放在window上，为了模块内部在浏览器和Node.js中都能使用全局对象，我们可以做此判断：

var global = typeof window !== "undefined" ? window : global;

我们用一个立刻执行的闭包函数将所有代码包含，来避免污染全局空间，并将global

Der Bedarf an Modularisierung ist ein Produkt der Skalierung. Wenn sich Webseite zu Webanwendung entwickelt, wird die vom Browser verarbeitete Logik immer komplexer und die Stile und Die angezeigten Animationen werden immer komplexer. Je mehr Projekte kommen, desto höher werden die Anforderungen an die Projekte. Dann entstand die Notwendigkeit einer Modularisierung. Die Bedeutung von Modularität:

• Die Wiederverwendung von Komponenten reduziert die Entwicklungs- und Wartungskosten

Es ist bequem, Komponenten einzeln zu entwickeln von Arbeit und Zusammenarbeit

Modularität folgt Standards, um automatisiertes Abhängigkeitsmanagement, Codeoptimierung und Bereitstellung zu erleichtern

JavaScript gilt seit langem als einfach Tatsächlich hat sich die Situation bei der Skriptsprache schon vor langer Zeit geändert. In der neuesten Version des Dokuments ECMA-262 (ES6) wird betont, dass es sich bei JavaScript um eine handelt eher eine allgemeine Programmiersprache als eine Skriptsprache. Skriptsprachen wie shell werden nicht zur Ausführung komplexer Funktionen verwendet. Sie werden nur zur Durchführung einiger automatisierter Steuerungen verwendet und erfordern keine Modularisierung. Universelle Programmiersprachen (wie Java), die zum Aufbau komplexer Systeme verwendet werden, verfügen im Allgemeinen über Modulimplementierungen.

Vor ES6 war die JS-Sprache nicht modular aufgebaut. So können Sie JS nicht nur im Browser ausführen, sondern auch den Code besser verwalten effektiv? So entstand die CommonJS-Spezifikation, die drei globale Variablen definiert:

(function (global) {
  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.factory = factory;
  }
})(typeof window !== "undefined" ? window : global);

require code> is Wird zur Einführung eines Moduls verwendet

🎜exportsDie Schnittstelle, die das Modul der Außenwelt zugänglich macht, kann von jedem Typ sein🎜

🎜Modul Es ist das Objekt dieses Moduls selbst🎜

🎜Bei Einführung mit require wird die von diesem Modul bereitgestellte Schnittstelle erhalten (exports)🎜🎜Node.js verwendet die CommonJS-Spezifikation: 🎜

//Node.js
var myModule = require('moduleName')

//Seajs
define(function(require,exports,module){
  var myModule = require('moduleName')
})

// Browser global
<script src=&#39;moduleName.js&#39;></script>

🎜Auf der Browserseite, im Gegensatz zu Node.js, das CommonJS intern >, wie man modularisiert, daher gibt es zwei Methoden: CMD und AMD, die Hauptvertreter sind seajs und requirejscode>, sie alle definieren eine globale Funktionsdefinition zum Erstellen eines Moduls: 🎜rrreee🎜 Es ​​ist ersichtlich, dass CMD den Stil von CommonJS vollständig beibehält Code>. Und <code>AMD verwendet eine einfachere Methode der Abhängigkeitsinjektion und Funktionsrückgabe, um Modularität zu erreichen. Abgesehen von den unterschiedlichen Stilen besteht der größte Unterschied zwischen den beiden in der Art und Weise, wie CMD abhängige Module geladen wird, und Abhängigkeiten werden nur geladen, wenn require verwendet wird. Und AMD lädt vor, wodurch alle Abhängigkeiten im Voraus geladen werden, wenn das Modul definiert wird. 🎜🎜 Wir müssen ein Modul implementieren, damit es sowohl in der seajs (CMD)-Umgebung als auch in der requirejs (AMD)-Umgebung eingeführt werden kann eingeführt werden. Es wird in Node.js(CommonJS) verwendet. Es kann auch global mit dem script-Tag in einer Umgebung ohne Modularisierung eingeführt werden . 🎜🎜Erstellen Sie zuerst ein Modul🎜rrreee🎜Natürlich kann die Ausgabe von return ein beliebiger Wert, ein Objekt, eine Klasse oder alles andere sein.🎜🎜Erfüllen Sie zunächst Node.js oder ES6 können wir die globalen Variablen module und exports verwenden, um 🎜rrreee🎜 in CMD und AMD > müssen wir eine Factory-Funktion bereitstellen und <code>define übergeben, um das Modul zu definieren, wenn es keine oben erwähnte globale Variable gibt und es eine globale Variable define gibt , wir denken, es ist AMD oder CMD, Sie können factory direkt an define übergeben: 🎜rrreee🎜🎜Hinweis : CMD unterstützt tatsächlich auch die Return-Return-Modul-Schnittstelle, sodass beide austauschbar verwendet werden können. 🎜🎜🎜Dann müssen wir auch die globale Einführung des script-Tags erfüllen. Wir können das Modul auf window platzieren, damit das Modul intern im Browser verwendet werden kann und Node.js Globale Objekte können im Code verwendet werden>, können wir folgendes Urteil fällen: 🎜rrreee🎜Wir verwenden eine Abschlussfunktion, die sofort ausgeführt wird, um alle Codes einzuschließen und eine Verschmutzung des globalen Raums zu vermeiden Übergeben Sie das globale-Objekt. Geben Sie die Abschlussfunktion ein, und es wird schließlich so aussehen: 🎜rrreee🎜🎜 Hinweis: Das Semikolon vor dem Abschluss dient dazu, die Lücken für das vorherige Modul zu füllen Bei vielen Semikolons ist das kein Problem, wenn es aber zu wenige sind, kann sich die Aussage ändern. 🎜🎜🎜Dann können Sie gerne anrufen 🎜rrreee🎜【Ende】🎜🎜🎜Empfohlenes Lernen: 🎜JavaScript Advanced Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie gängige Module mit JS schreiben (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!