模块化导入和导出

模块化概述

模块化就是将独立的一个功能封装到一个模块（文件）中，模块和模块之间是相互独立、相互隔离。
模块和模块之间虽然是相互独立的，但一个模块可以通过特定的接口公开自己的内部成员，以便让其它的模块可以使用或者访问自己的内部成员

模块化规范

浏览器端的模块化

1…AMD(Asynchronous Module Definition,异步模块定义)
代表产品为：Require.js
2…CMD(Common Module Definition,通用模块定义)
代表产品为：Sea.js

服务器端的模块化

服务器端的模块化规范是使用 CommonJS 规范：

• 使用 require 引入其他模块或者包
• 使用 exports 或者 module.exports 导出模块成员
• 一个文件就是一个模块，都拥有独立的作用域

ES6模块化

ES6模块化规范中定义：

• 每一个 js 文件都是独立的模块
• 导入模块成员使用 import 关键字
• 暴露模块成员使用 export 关键字

默认导出和默认导入

1.默认导出

let num = 10;
let name = '张三;

function show() {
  console.log('1111111111111')
}
//属性名和属性值一样，可以只写一个
export default {
  num,
  name,
  show
}

2.默认导入

import m1 from './test.js'

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default，否则会报错
另外，如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

按需导入和导出

1.按需导出

export let num = 998;
export let myName = "jack";
export function fn = function() { 
					 console.log("fn") 
				 }

2.按需导入

 import { num,fn as printFn ,myName } from "./test.js"

3.同时导入默认导出的成员以及按需导入的成员

 import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

直接导入并执行代码

 import "./test2.js";

test2.js

for (let i = 0; i < 3; i++) {
  console.log(i)
}

上面的知识简单的总结，另外具体的可以参考这篇

传送门