ES6和Node中的模块

WARNING

• ES6的模块

  • export
  • import
  • export default
  • import 和 export 的符合语法

• node 的模块

  • exports
  • module.exports

ES6 中一个独立的文件就是一个模块

// a.js
// 一个个导出
export const name = 'xiaoyu'
export const age = 18
export const address = 'beijing'

// 一起导出，结构赋值
const name = 'xiaoyu'
const age = 18
const address = 'beijing'

export {
	name,
	age,
	address
}

重命名后导出

// a.js
function func1 () {}
class B {}
const b = ''

export {
	func1 as f1,
	B as classB,
	b as bStr,
	b as strB
}

TIP

export 导出的是一个对外的接口，而不是具体的值。外部引入的时候通过接口获取值。 export 导出的语句是动态绑定的，输出的是值的引用。

// 错误写法

export 'a' ❌

const name = 'xiaoyu' export name ❌

export 可以出现在当前模块的任何位置，但是不能出现在块级作用域里。编译时加载

export 动态绑定、值的引用

// b.js
export let time = new Date()

setInterval(() => {
	time = new Date()
}, 1000)



// index.js
import { time } from './b'

setInterval(() => {
	console.log(time)
}, 500)

// b.js里的time变化后，index.js 输出time也会变化

import 引入语句, 引入的内容是只读属性，不能进行修改，如果引入的是对象的话，可以对属性进行修改

// c.js
export const name = 'xiaoyu'
export const age = 19
export const info = {
  name: 'infoname'
}

// index.js
import { name as nameprops, age, info } from './c'
console.log(nameprops, age)
info.name = '哈哈' // 不建议修改

import 也可以引入一些全局的变量

// d.js
document.title = '测试title'

// index.js
import './d'

import 有提升的效果，会提升到模块头部首先执行

// e.js
export function getName () {
  console.log('小鱼--')
  return '小于'
}


// index.js
// 先调用，在引入也是可以的，import 会有提升作用
getName()

import { getName } from './e'

import 引入重复的模块，只会执行一次不会重复引入

import { name } from './c'
import { age } from './c'

// 以上引入会合并成一次引入，相当于下面的写法
import { name, age } from './c'

可以使用 * 来引入模块里的所有内容，并赋值给一个变量

// c.js
export const name = 'xiaoyu'
export const age = 19
export const info = {
  name: 'infoname'
}


// index.js
import * as infos from './c'
console.log(infos)
console.log(infos.age, '*引入') // 19

export default 一个模块里只能有一个 default

// f.js
export default function f2() {
  console.log('我是f2')
}

// index.js
import f2 from './f' // f2 为了可读性，也可以写别的名字
console.log(f2())

export default 后面不能跟变量声明语句，注意和 export 的区别

// f.js
// 相当于 把 f2 赋值给了 default 并且导出
export default function f2() {
  console.log('我是f2')
}
/*****************************************/
// f.js
export default '小于'

// index.js
import str from './f'
console.log(str)

一个模块里既有 export 又有 export default

// c.js
export const name = 'xiaoyu'
export const age = 19
export const info = {
  name: 'infoname'
}

let sex = '男'
export default sex


// index.js
import sex, { name, age } from './c'
console.log(sex, name, age)

export 和 import 的复合写法

export { name as nameprops, age } from './c'
export * from './c'
export { name as default } from './a' // a.js 没有把 name default  
export { default as infoSex } from './c'

import() 程序在运行的时候在引入，类似按需加载的效果。

// index.js

let status = 1
if (status) {
  import('./a') // xiaoyu-a
} else {
  import('./c') // xiaoyu-c
}

node 中的模块，用户自定义模块

// b.node.js
exports.name = '小于'
exports.age = 19

// a.node.js
let info = require('./b.node')
console.log(info)

// node ./a.node.js
// { name: '小于', age: 19 }

module.exports

// b.node.js
module.exports = function () {
  console.log('fn-')
}



// a.node.js
let print = require('./b.node')
console.log(print(), 'print')