Dieser Artikel bietet Ihnen eine detaillierte Einführung in die Javascript-Modularisierung. Freunde in Not können darauf verweisen.
Mit der rasanten Entwicklung der Webtechnologie und der zunehmenden Verbesserung der abhängigen Infrastruktur hat sich der Front-End-Bereich schrittweise vom Browser zum Server (Node.js) und Desktop erweitert ( Auf PCs, Android, iOS und sogar auf Geräten des Internets der Dinge (IoT) ist JavaScript der Kernbestandteil dieser Anwendungen. Da ihre Größe und Komplexität exponentiell zunehmen, werden auch ihre Software-Engineering-Systeme etabliert (kollaborative Entwicklung, Unit-Tests, Anforderungen usw.). Fehlermanagement etc.) wird der Bedarf an modularer Programmierung immer dringlicher.
JavaScripts Unterstützung für modulare Programmierung hat sich noch nicht zum Standard entwickelt, und es ist eine Zeit lang schwierig, diese wichtige Aufgabe zu übernehmen, und die Krieger haben alle Hindernisse überwunden und sind von der Brandrodung auf die Landwirtschaft übergegangen zu zukunftsweisenden modularen Lösungen;
Modulare Programmierung besteht darin, Funktionen durch die Kombination einiger __relativ unabhängiger und wiederverwendbarer Module__ zu realisieren . Die beiden Kernteile sind __define module__ und __introduce module__;
Beim Definieren eines Moduls wird die Ausführungslogik innerhalb jedes Moduls von außen nicht wahrgenommen Daten;
Laden Sie beim Einführen eines Moduls den einzuführenden Code synchron/asynchron, führen Sie ihn aus und erhalten Sie seine bereitgestellten Methoden und Daten;
Obwohl JavaScript auf Sprachebene keine modulare Lösung bietet, kann es seine __objektorientierten__ Sprachfunktionen sowie __Designmuster_ _Blessing nutzen und eine einfache modulare Architektur realisieren Verwenden Sie den Singleton-Modus, um eine Modularisierung zu erreichen, die das Modul besser kapseln und nur einen Teil der Informationen an den Stellen verfügbar machen kann, an denen das Modul verwendet werden muss.
// Define a module var moduleA = (function ($, doc) { var methodA = function() {}; var dataA = {}; return { methodA: methodA, dataA: dataA }; })(jQuery, document); // Use a module var result = moduleA.mehodA();
Intuitiv, indem die Funktion zur sofortigen Ausführung (IIFE) verwendet wird Abhängigkeiten deklarieren und Daten exportieren unterscheidet sich nicht wesentlich von der aktuellen modularen Lösung, unterscheidet sich jedoch wesentlich und weist einige wichtige Funktionen auf, die nicht erfüllt werden können Abhängigkeiten müssen nicht automatisch eingeführt werden, d. h. vor der Definition des Moduls muss der abhängige Modulcode manuell eingeführt werden
Wenn ein Modul definiert ist, ist sein Code bereits abgeschlossen Ausführungsprozess und kann nicht bei Bedarf geladen werden;
Wenn ein Modul dateiübergreifend verwendet wird, muss das Modul in eine globale Variable (Fenster) gemountet werden
AMD und CMD teilen die Welt
Off-Topic: Im Laufe der Zeit sind diese beiden modularen Lösungen allmählich aus dem Stadium der Geschichte verschwunden, und die spezifischen Merkmale werden nicht im Detail besprochen;// AMD define(['./a','./b'], function (moduleA, moduleB) { // 依赖前置 moduleA.mehodA(); console.log(moduleB.dataB); // 导出数据 return {}; }); // CMD define(function (requie, exports, module) { // 依赖就近 var moduleA = require('./a'); moduleA.mehodA(); // 按需加载 if (needModuleB) { var moduleB = requie('./b'); moduleB.methodB(); } // 导出数据 exports = {}; });
CommonJS
Im Jahr 2009 veröffentlichte Ty die erste Version von Node.js End-to-End-Szenarien; nach jahrelanger Prüfung und voller Unterstützung für Front-End-Engineering wird CommonJS häufig in
// Core Module const cp = require('child_process'); // Npm Module const axios = require('axios'); // Custom Module const foo = require('./foo'); module.exports = { axios }; exports.foo = foo;
Lesen Sie zuerst das Modul aus dem Cache (require.cache), führen Sie eine Pfadanalyse durch und verarbeiten Sie es dann nach verschiedenen Modultypen: Eingebautes Modul, direkt aus dem Speicher laden
(function (exports, require, module, __filename, __dirname) { var circle = require('./circle.js'); console.log('The area of a circle of radius 4 is ' + circle.area(4)); });
ES Module 是语言层面的模块化方案,由 ES 2015 提出,其规范与 CommonJS 比之 ,导出的值都可以看成是一个具备多个属性或者方法的对象,可以实现互相兼容;但写法上 ES Module 更简洁,与 Python 接近;
import fs from 'fs'; import color from 'color'; import service, { getArticles } from '../service'; export default service; export const getArticles = getArticles;
主要差异在于:
ES Module 会对静态代码分析,即在代码编译时进行模块的加载,在运行时之前就已经确定了依赖关系(可解决循环引用的问题);
ES Module 关键字:import
export
以及独有的 default
关键字,确定默认的导出值;
ES Module 中导入模块的属性或者方法是强绑定的,包括基础类型;
通过一层自执行函数来兼容各种模块化规范的写法,兼容 AMD / CMD / CommonJS 等模块化规范,贴上代码胜过千言万语,需要特别注意的是 ES Module 由于会对静态代码进行分析,故这种运行时的方案无法使用,此时通过 CommonJS 进行兼容;
(function (global, factory) { if (typeof exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && define.amd) { define(factory); } else { this.eventUtil = factory(); } })(this, function (exports) { // Define Module Object.defineProperty(exports, "__esModule", { value: true }); exports.default = 42; });
为了在浏览器环境中运行模块化的代码,需要借助一些模块化打包的工具进行打包( 以 webpack 为例),定义了项目入口之后,会先快速地进行依赖的分析,然后将所有依赖的模块转换成浏览器兼容的对应模块化规范的实现;
从上面的介绍中,我们已经对其规范和实现有了一定的了解;在浏览器中,要实现 CommonJS 规范,只需要实现 module / exports / require / global 这几个属性,由于浏览器中是无法访问文件系统的,因此 require 过程中的文件定位需要改造为加载对应的 JS 片段(webpack 采用的方式为通过函数传参实现依赖的引入)。具体实现可以参考:tiny-browser-require。
webpack 打包出来的代码快照如下,注意看注释中的时序;
(function (modules) { // The module cache var installedModules = {}; // The require function function __webpack_require__(moduleId) {} return __webpack_require__(0); // ---> 0 }) ({ 0: function (module, exports, __webpack_require__) { // Define module A var moduleB = __webpack_require__(1); // ---> 1 }, 1: function (module, exports, __webpack_require__) { // Define module B exports = {}; // ---> 2 } });
实际上,ES Module 的处理同 CommonJS 相差无几,只是在定义模块和引入模块时会去处理 __esModule 标识,从而兼容其在语法上的差异。
1、浏览器环境下,网络资源受到较大的限制,因此打包出来的文件如果体积巨大,对页面性能的损耗极大,因此需要对构建的目标文件进行拆分,同时模块也需要支持动态加载;
webpack 提供了两个方法 require.ensure() 和 import() (推荐使用)进行模块的动态加载,至于其中的原理,跟上面提及的 AMD & CMD 所见略同,import() 执行后返回一个 Promise 对象,其中所做的工作无非也是动态新增 script 标签,然后通过 onload / onerror 事件进一步处理。
2、由于 require 函数是完全自定义的,我们可以在模块化中实现更多的特性,比如通过修改 require.resolve 或 Module._extensions 扩展支持的文件类型,使得 css / .jsx / .vue / 图片等文件也能为模块化所使用;
模块化规范 | 加载方式 | 加载时机 | 运行环境 | 备注 |
---|---|---|---|---|
AMD | 异步 | 运行时 | 浏览器 | |
CMD | 异步 | 运行时 | 浏览器 | |
CommonJS | 同步/异步 | 运行时 | 浏览器 / Node | |
ES Module | 同步/异步 | 编译阶段 | 浏览器 / Node | 通过 import() 实现异步加载 |
相关推荐:
javascript模块化编程(转载),javascript模块化
Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die Javascript-Modularität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!