Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich die Vorteile der modularen Programmierung vorstellt. Da die Front-End-Funktionen immer komplexer werden, wird der Front-End-Code von Tag zu Tag erweitert, um den Wartungsaufwand zu reduzieren Kosten und Verbesserung der Effizienz des Codes. Wiederverwendbarkeit und Front-End-Modularisierung sind unerlässlich. Ich hoffe, es wird für alle hilfreich sein.
[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]
Da die Frontend-Funktionen immer komplexer werden, wird der Frontend-Code von Tag zu Tag erweitert Um die Wartungskosten zu senken und die Wiederverwendbarkeit des Codes zu verbessern, ist eine Front-End-Modularisierung unerlässlich.
Alle JS-Dateien werden in einem HTML-Code eingeführt, was die folgenden nachteiligen Auswirkungen hat:
Zu viele Anfragen. Erstens müssen wir uns auf mehrere Module verlassen, die mehrere Anfragen senden, was zu zu vielen Anfragen führt
unklare Abhängigkeiten. Wir kennen ihre spezifischen Abhängigkeiten nicht, was bedeutet, dass es leicht zu Fehlern in der Ladesequenz kommt, weil wir die Abhängigkeiten zwischen ihnen nicht verstehen.
Schwer zu pflegen. Die beiden oben genannten Gründe erschweren die Wartung, und es ist sehr wahrscheinlich, dass sich eine Sache auf den gesamten Körper auswirkt und ernsthafte Probleme im Projekt verursacht.
ist im Webpack wie folgt definiert:
Bei der modularen Programmierung zerlegen Entwickler das Programm in diskrete Funktionsblöcke und nennen sie Module. Jedes Modul hat eine kleinere Kontaktfläche als ein komplettes Programm, was die Verifizierung, Fehlerbehebung und Tests zum Kinderspiel macht. Gut geschriebene Module bieten solide Abstraktions- und Kapselungsgrenzen, sodass jedes Modul in der Anwendung ein kohärentes Design und einen klaren Zweck hat.
Module sollten diskrete Funktionsblöcke mit einzelnen Verantwortlichkeiten sein, unabhängig voneinander, mit geringer Kopplung, hoher Kohäsion und Austauschbarkeit.
Das Konzept der Modularität
Modularisierung ist eine Möglichkeit, komplexe Systeme in besser verwaltbare Module zu zerlegen. Sie kann den Systemcode in eine Reihe von Modulen mit einzelnen Verantwortlichkeiten, hoher Entkopplung und Ersetzbarkeit unterteilen Ein Teil des Systems wirkt sich auf andere Teile aus und die Wartbarkeit des Systems wird einfacher zu erreichen sein.
Modularisierung ist eine Divide-and-Conquer-Idee, die eine feinkörnige Kontrolle durch die Zerlegung komplexer Systeme in unabhängige Module erreicht, was für die Wartung und Verwaltung komplexer Systeme sehr vorteilhaft ist. Modularität ist auch der Grundstein der Komponentisierung und eine Voraussetzung für die heutige bunte Frontend-Welt.
Warum Modularisierung erforderlich ist
Der Hauptunterschied zwischen Front-End-Entwicklung und anderen Entwicklungsarbeiten besteht darin, dass das Front-End auf mehrsprachiger und mehrstufiger Codierung und organisatorischer Arbeit basiert. Zweitens ist die Bereitstellung von Front-End erforderlich. Endprodukte basieren auf dem Browser. Die inkrementelle Lademethode wird auf der Browserseite ausgeführt. So organisieren Sie diese fragmentierten Codes und Ressourcen in der Entwicklungsumgebung und stellen sicher, dass sie auf der Browserseite schnell und elegant geladen und aktualisiert werden ein modulares System.
Wartbarkeit. Da Module unabhängig sind, macht ein gut gestaltetes Modul den externen Code weniger von sich selbst abhängig, sodass er unabhängig aktualisiert und verbessert werden kann.
Namespace. Wenn in JavaScript eine Variable außerhalb der Funktion der obersten Ebene deklariert wird, wird sie global verfügbar. Daher kommt es häufig versehentlich zu Namenskonflikten. Durch die Verwendung modularer Entwicklung zur Kapselung von Variablen kann eine Verschmutzung der globalen Umgebung vermieden werden.
Code wiederverwenden. Manchmal kopieren wir gerne Code aus zuvor geschriebenen Projekten in neue Projekte. Dies ist kein Problem, aber eine bessere Möglichkeit besteht darin, die Duplizierung von Codebasen durch Modulreferenzen zu vermeiden. Nach der Aktualisierung des Moduls können wir alle Projekte, die auf das Modul verweisen, gleichzeitig aktualisieren und die Versionsnummer angeben, um die durch API-Änderungen verursachten Probleme zu vermeiden.
1. Der einfachste und gröbste Weg
function fn1(){
// ...
}
function fn2(){
// ...
}Führen Sie Dateien über Skript-Tags ein und rufen Sie verwandte Funktionen auf. Dies erfordert eine manuelle Verwaltung der Abhängigkeitsreihenfolge, was leicht zu Namenskonflikten führen und die Gesamtsituation verunreinigen kann. Mit zunehmender Komplexität des Projekts werden die Wartungskosten immer höher.
2. Verwenden Sie Objekte, um Namespaces zu simulieren. Dies kann das oben genannte globale Verschmutzungsproblem lösen. Mit zunehmender Komplexität des Projekts müssen jedoch immer mehr solcher Objekte verwaltet werden , einen Namen zu wählen ist ein Problem. Das Wichtigste ist, dass auf die internen Eigenschaften weiterhin direkt zugegriffen und diese geändert werden können.
3. Schließung
var module = (function(){
var _count = 0;
var fn1 = function (){
// ...
}
var fn2 = function fn2(){
// ...
}
return {
fn1: fn1,
fn2: fn2
}
})()
module.fn1();
module._count; // undefined这样就拥有独立的词法作用域，内存中只会存在一份 copy。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域，通过 return 暴露出公共接口供外界调用。这其实就是现代模块化实现的基础。
4. 更多
还有基于闭包实现的松耦合拓展、紧耦合拓展、继承、子模块、跨文件共享私有对象、基于 new 构造的各种方式，这种方式在现在看来都不再优雅。
// 松耦合拓展
// 这种方式使得可以在不同的文件中以相同结构共同实现一个功能块，且不用考虑在引入这些文件时候的顺序问题。
// 缺点是没办法重写你的一些属性或者函数，也不能在初始化的时候就是用module的属性。
var module = (function(my){
// ...
return my
})(module || {})
// 紧耦合拓展（没有传默认参数）
// 加载顺序不再自由，但是可以重载
var module = (function(my){
var old = my.someOldFunc
my.someOldFunc = function(){
// 重载方法，依然可通过old调用旧的方法...
}
return my
})(module)历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。
目前实现模块化的规范主要有：
CommonJS
CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。
采用同步加载模块的方式，也就是说只有加载完成，才能执行后面的操作。CommonJS 代表：Node 应用中的模块，通俗的说就是你用 npm 安装的模块。
它使用 require 引用和加载模块，exports 定义和导出模块，module 标识模块。使用 require 时需要去读取并执行该文件，然后返回 exports 导出的内容。
CMD
CMD（Common Module Definition）
CMD是SeaJS在推广过程中生产的对模块定义的规范，在Web浏览器端的模块加载器中，SeaJS与RequireJS并称，SeaJS作者为阿里的玉伯。
CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。
AMD
AMD（Asynchronous Module Definition）
异步模块定义，所谓异步是指模块和模块的依赖可以被异步加载，他们的加载不会影响它后面语句的运行。有效避免了采用同步加载方式中导致的页面假死现象。AMD代表：RequireJS。
AMD一开始是CommonJS规范中的一个草案，全称是Asynchronous Module Definition，即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范，所以一般说AMD也是指RequireJS。
RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
ES6模块
ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以说ES6是编译时加载，不同于CommonJS的运行时加载(实际加载的是一整个对象)，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;。
严格模式主要有以下限制。
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
Sie können fn.caller und fn.arguments nicht verwenden, um den Stapel von Funktionsaufrufen abzurufen
Reservierte Wörter hinzugefügt (z. B. protected, static und interface)
Module müssen den oben genannten Einschränkungen entsprechen.
【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】
Das obige ist der detaillierte Inhalt vonVorteile der modularen Modulprogrammierung (Zusammenfassungsfreigabe). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
