export

export有两种导出模式，export 和export default(一个模块中只能有一个default)

导出变量

export 后边可以是一个变量声明表达式或者是一个{}里边包含变量名，但是不能直接输出一个变量，
export default 后边可以直接跟一个常量或者变量，但是不能跟声明表达式

export var a = 1 //正确

const age = 100
export { age } //正确

export age //错误

export default age //正确

export default 50 //正确

export default var name='abc ' //错误



复制代码

导出函数

export和export都可以直接导出函数声明语句，但是export后边不能跟匿名函数，如果直接导出函数名export 需要用{}包裹

//正确
 export default function test () {
  console.log('test function')
}
   //正确
 export  function test2 () {
  console.log('test function')
}
//错误
 export  function  () {
  console.log('test function')
}
 //正确
 export default function  () {
  console.log('test function')
}

function test3(){
 console.log('test3 function')
}

//正确
expor {test3}
//正确
export default test3
错误
export  test3


复制代码

使用 as别名导出

let a = 100

export {a as age }

复制代码

import

• 对于使用export default 导出的，倒入时不需要使用{},且名字可以任意定义
• 对于使用export 导出的，必须使用{}倒入，且名字必须一致
• 可以使用通配符* 方式全部导入 (import * as obj from ‘../a.js’)

//对于export default 导出的

import myFn from './a.js'

//对于使用export 导出的

import {test1,test2} from './a.js'



复制代码

按需加载

采用回调函数的方式，所有的引入直接在回调中

   document.onclick = function() {
      import('./a.js').then(data => {
        console.log(data)
      })
    }
复制代码

总结

这种模块化写法到底有什么优点呢，我们为什么要用呢？

• 防止作用域污染
• 提高代码的复用性
• 维护成本降低