js模块化

182 阅读1分钟

一 Common.js

1.1基本语法:

定义暴露模块 : exports

exports.xxx = value
module.exports = value

引入模块 : require

var module = require('模块名/模块相对路径')

1.2原理

在使用exports.xxx 暴露模块时,module相当于exports对象;使用module.exports 暴露模块时,module相当于module.exports。

解析(已exports为例)

require其实是一个函数,返回值是一个对象,值为“导出文件”的exports对象;

moduleexports指向同一个引用(引用地址相同);

实现CommonJS规范的本质就是对象的引用赋值(浅拷贝本质)。

1.3 本质

在Node中真正用于导出的其实根本不是exports,而是module.exportsexports只是module上的一个对象

exports也可以导出是因为module对象的exports属性是exports对象的一个引用;等价于module.exports = exports = main中的bar(CommonJS内部封装);真正导出的模块内容的核心其实是module.exports,只是为了实现CommonJS的规范,刚好module.exports对exports对象使用的是同一个引用而已

所有无论exports怎么改,都不会影响最终的导出结果;但是这样的形式module.exports = { xxx },会在堆内存中新开辟出一块内存空间,会生成一个新的对象,用它取代之前的exports对象的导出,那么也就意味着require导入的对象是新的对象;

二 ES6

2.1基本语法

定义暴露模块 : export

暴露一个对象:

export default 对象

暴露多个:

//分别
export var xxx = value1
export let yyy = value2
//统一
var xxx = value1
let yyy = value2
export {xxx, yyy}

引入使用模块 : import

default模块:

import xxx  from '模块路径/模块名'

其它模块

import {xxx, yyy} from '模块路径/模块名'
import * as module1 from '模块路径/模块名'