js-JavaScript（es6）模块化

模块化: 将代码拆分成独立的块，然后再把这些块使用模块模式连接起来实现不同的功能。ps:就像小时候玩的拼图一样，不同的拼图组合在一起就可以拼成任意的形状。

模块化的思想: 把逻辑分块、各自封装，相互独立，同时自行决定引入执行那些外部模块以及暴露自身的那些模块。

原始的开发方式，随着项目复杂度提高，代码量越来越多，所需加载的文件也越来越多，这个时候就需要考虑如下几个问题:

1. 命名问题：所有文件的方法都挂载到window/global上，会污染全局环境，并且需要考虑命名冲突问题
2. 依赖问题：script是顺序加载的，如果各个文件文件有依赖，就得考虑js文件的加载顺序
3. 网络问题：如果js文件过多，所需请求次数就会增多，增加加载时间

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

 

模块化的好处

• 避免命名冲突(减少命名空间污染)
• 更好的分离, 按需加载
• 更高复用性
• 高可维护性

 

CommonJS 主要应用在服务端，如果在浏览器端运行需要借助其他工具（Browserify）。

暴露模块： module.exports = value或者exports.xx = value(exports 是一个导出的对象)

引入模块： require(xx)，如果是第三方模块，xxx 为模块名，如果为自定义模块，xxx 为模块的文件路径。

 

特点

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。

 

CommonJS是一个更偏向于服务器端的规范。NodeJS采用了这个规范。CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成一个对象。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

id是模块名，exports是该模块导出的接口，loaded表示模块是否加载完毕。

以后需要用到这个模块时，就会到exports属性上取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存中取值。

 

 

使用：在 Node 中 安装 uniq 函数。

 

 

npm init
npm install uniq --save

// module.js
let arr = [1, 2, 2, 3, 3];
module.exports = {
  arr,
};

// app.js
let module1 = require("./module.js");
let uniq = require("uniq");

console.log(uniq(module1.arr)); // [1,2,3]

 

Es6模块化：

 

ES6 模块化语法：

① export 命令：用于规定模块的对外接口
② import 命令：用于输入其他模块提供的功能

 

export 暴露方式，3种：

 

1、第一种暴露方式：分别暴露

 

	// 1. 分别暴露, m1.js, m1.js
	export let school = 'gc';

	export function teach() {
    	console.log("m1--我们可以教给你很多东西！");
	};

 

2、第二种暴露方式：统一暴露, m2.js

 

	// 2. 统一暴露, m2.js
	let school = 'gc';

	function findJob() {
    	console.log("m2---我们可以帮助你找工作!!");
	};

	export {school, findJob};

 

3、第三种暴露方式：默认暴露, m3.js

 

	// 3. 默认暴露, m3.js
	export default {
    	school: 'ATLUCA',
    	change: function(){
        	console.log("m3---我们可以改变你!!");
    	}
	}

 

import 导入方式，3种

 

1、第一种导入方式：通用的导入方式

 

	// 1. 通用的导入方式
	// 引入 m1.js 模块内容
	import * as _m1 from "js/m1.js";
	_m1.teach();
	// 引入 m2.js 模块内容
	import * as _m2 from "js/m2.js";
	_m2.findJob();
	console.log(_m2.school);
	// 引入 m3.js
	import * as _m3 from "js/m3.js";
	console.log(_m3);
	_m3.default.change();

 

2、第二种导入方式：解构赋值形式

 

	// 2. 解构赋值形式
	// 引入 m1.js 模块内容
	import {school, teach} from "js/m1.js";
	console.log(school);
	// 引入 m2.js 模块内容
	// (1)如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，
	// (2)为了解决该问题， ES6为提供了重命名的方法。
	// (3)此处的school与m1.js的命名相同，所以此处的school改为gc
	import {school as gc, findJob} from "js/m2.js";
	console.log(findJob);
	// 引入 m3.js 模块内容
	import {default as _m3} from "js/m3.js";
	console.log(_m3);

 

3、第三种导入方式：简便形式, 只针对于默认暴露

 

	// 3. 简便形式, 只针对于默认暴露
	import _m3 from "js/m3.js";
	console.log(_m3);