js模块化

1.es6 import export

import是静态执行，不能放在if等判断逻辑中

// a.js 自己不能再文件中用default作为变量
export default 'default code'
export const name = 'code'
export function fn() { console.log('fn'); }

const age = 18
export { age }

const s = 'girl'
export { s as sex }

// b.js
import *** from './a.js'               							***为'default code'  ***可以是自定义变量名称
import { name } from './a.js'          							name为'code'
import { name as firstName } from './a.js'          firstName'code'
import { fn } from './a.js'  	         							fn()执行后打印fn
import { age } from './a.js'           							age 18
import { sex } from './a.js'           							sex girl
import * as person from './a.js'										person上有name，age等属性（同时还有default属性）

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

// a.js
export default 1

// b.js
import { default as data } from './a.js'; 					data的值为1

// a.js
const data = 13
export { data as default }

// b.js
import all from './a.js'														all的值为13

import后在访问时会动态更新引入的值

// a.js
let height = 183
setTimeout (() => ++height, 500)
export { height }

// b.js
import { height } from './a.js'
console.log(height)										 打印183
setTimeout(() => {
  console.log(height);
}, 1000)                               1秒后打印184

// c.js
const { height } = require('./a.js')   和上面一样，本质上是因为在webpack环境下，而不是在node环境，如果在node环境下依旧打印1

import 的时候不是值的拷贝，而是沿用了原本对象的内存地址，但是此用法不建议使用

// a.js
let obj = { name: 'zzz' }
setTimeout (() => console.log(obj.name), 500)    // 打印ppp
export { obj }

// b.js
import { obj } from './a.js'
console.log(obj.name);
obj.name = 'ppp'

export和import混用

// a.js
export { testC } from 'my_module'     这里相当于一个中转站，将my_module的值先导入再导出,同时当前模块不能使用testC

// b.js
import { testC } from './a.js'

import()函数 运行时引入，解决异步问题

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}