JS模块化

梦里梦外; 2023-07-10 08:24 6阅读 0赞

# 简介 #

js目前的主流模块化有CommonJS、AMD、CMD（阿里员工开发，但已经卖给国外，只需要做了解）、ES6规范。

## CommonJS ##

首先是用在服务器端（Node）的规范，后来也可以用在浏览器端，但是需要提前打包编译（使用Browserify）。

**基本语法**  
暴露模块：

module.exports = value
    exports.xxx = value

注意暴露的模块是一个对象。

引入模块：`require(xxx)`  
注意引入自定义模块时“xxx”为模块文件路径，引入第三方模块时“xxx”为模块名

## AMD ##

Asynchronous Module Definition，即异步模块加载机制。专门用于浏览器端的模块化规范，模块的加载是异步的。

**基本语法**  
暴露模块：

//定义没有依赖的模块
    define(function(){ 
    	return 模块
    })
    //定义有依赖的模块
    define(['module1', 'module2'], function(m1, m2){ 
    	return 模块
    })

引入模块（需要下载require.js）：  
main.js:

requirejs.config({ 
    	baseUrl: 'js/lib' //基本路径
    	paths: {  //配置路径
    		module1: './module1'
    	}
    });
    requirejs(['module1'], function(m1){ 
    	m1.fun();
    })

然后在页面文件中引入requirejs，并指定js主文件的入口

## CMD ##

专门用于浏览器端的模块化规范，模块的加载是异步的。模块使用时才会加载执行。

AMD依赖前置，可以方便知道依赖了哪些模块，然后马上加载 , 在加载完成后, 就会执行该模块;  
而CMD推崇就近依赖，把模块变为字符串解析一遍, 找到依赖了哪些模块, 在加载模块完成后, 不立刻执行, 而是等到require后再执行;

**基本语法**  
暴露模块：

//定义没有依赖的模块
    define(function(require, exports, module){ 
    	exports.xxx = value;
    	module.exports = value
    })
    //定义有依赖的模块
    define(function(require, exports, module){ 
    	//引入模块1（同步）
    	var module1 = require('./module1')
    	//引入模块2（异步）
    	require.async('module2', function(m2){ 
    		
    	})
    	//暴露模块
    	exports.xxx = value
    })

引入模块（需要下载sea.js）：

define(function(require){ 
    	var module1 = require('./module1')
    	module1.fun();
    })

然后在页面文件中引入sea.js，使用全局对象seajs的use方法使用模块

## ES6规范 ##

依赖模块需要编译打包处理。使用Babel将ES6语法转义为ES5代码（此时包含CommonJS语法），使用Browserify编译打包js。  
**基本语法**  
暴露模块：

//暴露一般模块
    export xxx
    //暴露默认模块
    export default function(){ 
    }

引入模块：

//引入一般模块
    import { fun1, fun2} form './module1'
    //引入模块的默认暴露
    import module2 from './module2'

在此仅做一个记录。如需了解详细可[观看视频][Link 1]

[Link 1]: https://ke.qq.com/course/270677?taid=1864453893398869