随着 Web 技术的蓬勃发展和依赖的基础设施日益完善,前端领域逐渐从浏览器扩展至服务端(Node.js),桌面端(PC、Android、iOS),乃至于物联网设备(IoT),其中 JavaScript 承载着这些应用程序的核心部分,随着其规模化和复杂度的成倍增长,其软件工程体系也随之建立起来(协同开发、单元测试、需求和缺陷管理等),模块化编程的需求日益迫切。JavaScript 对模块化编程的支持尚未形成规范,难以堪此重任;一时间,江湖侠士挺身而出,一路披荆斩棘,从刀耕火种过渡到面向未来的模块化方案; 模块化编程就是通过组合一些__相对独立可复用的模块__来进行功能的实现,其最核心的两部分是__定义模块__和__引入模块__; 尽管 JavaScript 语言层面并未提供模块化的解决方案,但利用其可__面向对象__的语言特性,外加__设计模式__加持,能够实现一些简单的模块化的架构;经典的一个案例是利用单例模式模式去实现模块化,可以对模块进行较好的封装,只暴露部分信息给需要使用模块的地方; - // 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();
复制代码直观来看,通过立即执行函数(IIFE)来声明依赖以及导出数据,这与当下的模块化方案并无巨大的差异,可本质上却有千差万别,无法满足的一些重要的特性; - 定义模块时,声明的依赖不是强制自动引入的,即在定义该模块之前,必须手动引入依赖的模块代码;
- 定义模块时,其代码就已经完成执行过程,无法实现按需加载;
- 跨文件使用模块时,需要将模块挂载到全局变量(window)上;
AMD 和 CMD 最具代表的两个作品分别对应 require.js 和 sea.js;其主要区别在于依赖声明和依赖加载的时机,其中 require.js 默认在声明时执行, sea.js 推崇懒加载和按需使用;另外值得一提的是,CMD 规范的写法和 CommonJS 极为相近,只需稍作修改,就能在 CommonJS 中使用。参考下面的 Case 更有助于理解; - // 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 作为其中最核心的特性之一,适用于服务端下的场景;历年来的考察和时间的洗礼,以及前端工程化对其的充分支持,CommonJS 被广泛运用于 Node.js 和浏览器; - // 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;
复制代码 规范- module (Object): 模块本身
- exports (*): 模块的导出部分,即暴露出来的内容
- require (Function): 加载模块的函数,获得目标模块的导出值(基础类型为复制,引用类型为浅拷贝),可以加载内置模块、npm 模块和自定义模块
实现1、模块定义
默认任意 .node .js .json 文件都是符合规范的模块;
2、引入模块
首先从缓存(require.cache)优先读取模块,如果未命中缓存,则进行路径分析,然后按照不同类型的模块处理:
- 内置模块,直接从内存加载;
- 外部模块,首先进行文件寻址定位,然后进行编译和执行,最终得到对应的导出值;
其中在编译的过程中,Node对获取的JavaScript文件内容进行了头尾包装,结果如下:
- (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));
- });
复制代码 特性总结- 同步执行模块声明和引入逻辑,分析一些复杂的依赖引用(如循环依赖)时需注意;
- 缓存机制,性能更优,同时限制了内存占用;
- Module 模块可供改造的灵活度高,可以实现一些定制需求(如热更新、任意文件类型模块支持);
|