Beispiele für modulares Verständnis in Javascript

Ursprüngliche Ära: Das Skript-Tag führt die Datei javascript ein

-------- html -------
<p id="result"></p>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
-------add.js------
function add(a, b){ return a + b ;}
------ sum.js -----
function sum(n){
   return n + add(1, 2);
}
----- main.js ----
document.getElementById(&#39;result&#39;).innerHTML = sum(3);

Dieser Methode fehlt die Abhängigkeitsanalyse, sie verschmutzt den globalen Variablenraum und muss dies sicherstellen Die Datei wird eingeführt. Die Reihenfolge und Verwaltung sind verwirrend.

Ursprüngliche Ära: Modulobjekte und IIFE-Muster

Durch die Verwendung von Modulobjekten und sofort aufgerufenen Funktionsausdrücken(IIFE) können wir die Umweltverschmutzung auf globale Ebene reduzieren. Bei diesem Ansatz machen wir ein Objekt nur dem globalen Bereich zugänglich. Dieses Objekt enthält alle Methoden und Werte, die wir in unserer Anwendung benötigen.

例如只向全局作用域公开了 App 对象
-------- html -------
<p id="result"></p>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
------- app.js -------
var App = {};
------- add.js -------
(function(){
    App.add = function(a, b){
       return a + b;
   }
})();
------- sum.js -------
(function(){
    App.sum= function(n){
       return App.add(1, 2) + n;
   }
})();
------- main.js -------
(function(app){
   document.getElementById(&#39;result&#39;).innerHTML = app.sum(3);
})(App);

Sie können sehen, dass außer app.js jede andere Datei im IIFE-Format gekapselt ist.

Es besteht immer noch das Problem der fehlenden Abhängigkeitsauflösung und es gibt immer noch eine globale Variable , anstatt alle globalen Variablen loszuwerden

Übergangszeit: CommonJS

CommonJS ist keine JavaScript-Bibliothek. Es handelt sich um eine Normungsorganisation. Es ist wie ECMA oder W3C. ECMA definiert die JavaScript-Sprachspezifikation. W3C definiert JavaScript-Web-APIs wie DOM oder DOM-Ereignisse. Das Ziel von CommonJS besteht darin, einen gemeinsamen Satz von APIs für Webserver, Desktops und Befehlszeilenanwendungen zu definieren.

CommonJS definiert auch eine Modul-API. Da es in einer Serveranwendung keine HTML-Seiten und </script><script>-Tags gibt, ist es sinnvoll, eine klare API für Module bereitzustellen. Module müssen für die Verwendung durch andere Module verfügbar gemacht (**export**) und zugänglich (**import**) sein. Die Syntax des Exportmoduls lautet wie folgt:

---------------- add.js  --------------------
module.exports = function add(a, b){
  return a+b;
}
---------------- sum.js  --------------------
var add = require('./add');
module.exports  = function sum(n){
     return add(1, 2) + n;
}
---------------- main.js  --------------------
var sum = require('./sum');
document.getElementById('result').innerHTML = sum(3);

Obwohl CommonJs das Abhängigkeitsproblem löst, besteht das Problem bei CommonJs darin, dass es synchron ist, wenn var sum = require('./sum');

 sum = require('./sum');时，系统将暂停，直到模块准备(ready)完成，这意味着当所有的模块都加载时，这一行代码将阻塞浏览器进程，
因此，这可能不是为浏览器端应用程序定义模块的最佳方式

Ära der asynchronen Module: AMD

define([‘add’, ‘sum’], function(add, sum){
  document.getElementById.innerHTML = sum(3);
});

define Funktion (oder Schlüsselwort) listet Abhängigkeiten auf und Rückruffunktion als Parameter. Die Parameter der Callback-Funktion sind in derselben Reihenfolge wie die Abhängigkeiten im Array. Dies entspricht dem Importieren eines Moduls. Und die Rückruffunktion gibt einen Wert zurück, nämlich den Wert, den Sie exportiert haben.

CommonJS und AMD lösen die beiden verbleibenden Probleme im Modulmuster: Abhängigkeitsauflösung und Globale Scope-Verschmutzung . Wir müssen uns nur um die Abhängigkeiten jedes Moduls oder jeder Datei kümmern, und Waffen weisen keine globale Verschmutzung mehr auf.

Gute Implementierung von AMD: RequireJS Dependency Injection

RequireJS ist ein JavaScript-Modullader. Es kann Module nach Bedarf asynchron laden. Obwohl RequireJS „require“ in seinem Namen enthält, besteht sein Ziel nicht darin, die „require“-Syntax von CommonJS zu unterstützen. Mit RequireJS können Sie Module im AMD-Stil schreiben.

-------------------- html ----------------------
<p id="result"></p>
<!-- 入口文件 -->
<script data-main="main" src="require.js"></script>
-------------------- main.js ----------------------
define([&#39;sum&#39;], function(sum){
  document.getElementById(&#39;result&#39;).innerHTML = sum(3);
})
-------------------- sum.js ----------------------
define([&#39;add&#39;], function(add)){
   var sum = function(n){
       return add(1,2) + n;
   }
   return sum;
})
-------------------- add.js ----------------------
// add.js
define([], function(){
   var add = function(a, b){
      return a + b;
   };
   return add;
});

Der Browser lädt index.html, der wiederum index.html lädt. Die restlichen Dateien und ihre Abhängigkeiten werden von require.js geladen. require.js

RequireJS und AMD lösen alle Probleme, die wir zuvor hatten. Es bringt jedoch auch einige weniger schwerwiegende Probleme mit sich:

1. AMDs Syntax ist zu redundant. Weil alles in der

-Funktion define

gekapselt ist. 2. Die Abhängigkeitsliste im Array muss mit der Parameterliste der Funktion übereinstimmen. Wenn es viele Abhängigkeiten gibt, ist es schwierig, die Reihenfolge der Abhängigkeiten beizubehalten

3. Unter aktuellen Browsern (HTTP 1.1) führt das Laden vieler kleiner Dateien zu einer Leistungseinbuße

Modulpaketierer: Browserify

Sie können CommonJS-Module im Browser verwenden, den Abhängigkeitsbaum des Codes über Browserify durchlaufen und die Abhängigkeiten im hinzufügen Baum Alle Module sind in einer Datei gepackt.

Anders als RequireJS ist Browserify ein Befehlszeilentool, das auf die NPM-Umgebung angewiesen ist

npm install -g browserify

---------------- html.js  --------------------



---------------- add.js  --------------------
module.exports = function add(a, b){
  return a+b;
}
---------------- sum.js  --------------------
var add = require('./add');
module.exports  = function sum(n){
     return add(1, 2) + n;
}
---------------- main.js  --------------------
var sum = require('./sum');
document.getElementById('result').innerHTML = sum(3);

命令: browserify main.js -o bundle.js

Verwirrte Zeiten: UMD

UMD ist eine Reihe von if/else-Anweisungen, die verwendet werden, um den von der aktuellen Umgebung unterstützten Modulstil zu identifizieren.

// UMD 风格编写的 sum 模块
//sum.umd.js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['add'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('add'));
    } else {
        // Browser globals (root is window)
        root.sum = factory(root.add);
    }
}(this, function (add) {
    //  private methods
    //  exposed public methods
    return function(n) {
      return add(1,2) + n;
    }
}));

Gibt an, ob es sich um ein globales JavaScript-Modul handelt Objekt, CommonJS oder AMD und UMD sind zu umständlich, verursachen viel zusätzlichen Arbeitsaufwand und sind schwer zu warten.

Das helle Zeitalter: ES6-Modulsyntax

ES6 verwendet die Schlüsselwörter

und import zum Importieren und Exportieren von Modulenexport

---------------- main.js ---------------
import sum from './sum';
document.getElementById('result').innerHTML = sum(3);
---------------- sum.js ---------------
import add from './add';
export default function sum(n){
   return  add(1, 2) + n;
};
---------------- add.js ---------------
export default function add(a, b){
   return a + b;
};

Die Syntax des ES6-Moduls ist prägnant. Obwohl sie derzeit nicht von allen Browsern unterstützt wird, können Sie sie mit einigen Tools (babel) konvertieren.

Im Zeitalter der Technik: Webpack

虽然gulp、grunt都号称是工程化开发工具，，但个人感觉他们处理的东西还是比较基础，对于模块依赖打包来说，支持不是非常好，反正我是不喜欢gulp.

Webpack 是一个 模块打包器，就像 Browserify 一样，它会遍历依赖树，然后将其打包到一到多个文件。

它与Browserify 不同之处就是 可以处理 CommonJS 、 AMD 和 ES6 模块，并且 Webpack 还有更多实用的东西，比如 代码分离、加载器、插件

简洁的时代：Rollup

rollup 只会将需要的函数包含到打包文件中，从而显著减少打包文件大小

--------------- add.js -----------------
let add = (a,b) => a + b;
let sub = (a,b) => a - b;
export { add, sub };
--------------- sum.js -----------------
import { add } from './add';
export default (n) => {return add(1, 2) + n};
--------------- main.js ----------------
import sum from './sum';
document.getElementById('result').innerHTML = sum(3);

命令: rollup main.js -o bundle.js
--------------- boundle.js ----------------
// bundle.js
let add = (a,b) => a + b;
var sum = (n) => {return add(1, 2) + n};
document.getElementById("answer").innerHTML = sum(3);

发现 add.js的 sub() 函数并没有包含在这个打包文件中，因为没有引用它。

Das obige ist der detaillierte Inhalt vonBeispiele für modulares Verständnis in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!