js 模块之 import/export require/exports

概念

将大程序拆分成小文件.

优点

各个功能模块简单明了，体积变小，模块可以复用。

区别

浏览器：es6提出的import/export 、静态加载、严格模式、只能处于代码顶层

服务器: require/ exports、运行时加载、默认不开启严格模式，可在任意位置

语法：

// util.js
module.exports = {
clone(){
},
debounde(){
},
defaultUserName:'admin'
}

const {clone,debounce,defaultUserName} = require('util');
// 运行时加载，require('util') 会执行utils文件，返回一个对象（module.exports对象的拷贝值）
// 所以无法实现按需加载，实际整个require文件都被加载
// 所以后续此utils.js变动，无法映射到引用该模块的文件

// util.js
const clone = () => {};
const debounce = () => {};
const DefalutUserName = 'admin';
const sort = () => {}
export {clone,debounce,sort as anotherSortName}
export default DefalultUserName // 默认导出，最多只能有一个默认导出

import DefaultUserName, {clone,debounce} from 'util' // 按需静态加载
// import * as Utils from 'util' // 整体加载，使用时即为Utils.clone()
// import {anotherSortName} from 'utils' // 别名
// if(){
  import DefaultUserName from 'utils'  // 语法错误只能位于顶层，因为是静态加载
}
// 静态加载，在代码分析阶段，就会解析出所需要加载的引用。比如上面就只加载clone,debounce,并不会加载sort函数
// webpack的树抖其实就是居于此，在代码分析时，如果一个文件暴露的接口没有被引用，且这个接口没有副作用，就可以在webpack打包时去掉这部分代码，实现代码打包变小。（（usedExports:true配合sideEffects：none）
// 由于是接口的引用，所以utils变时，引用该接口的文件也会变

扩展

import() 运行时加载

适用场景：路由动态加载组件

import(componentName).then((resolve,reject) => {
console.log('success loading'); 
resolve()} 
)
// import() 返回一个Promise