模块化ES6 Module

在ES6之前没有模块化，为了解决问题，提出了CommonJS，AMD，CMD；ES6模块化汲取CommonJS和AMD的 优点，语法简洁，支持异步加载，未来可以成为浏览器和服务器通用的模块化解决方案。

ES6中模块的定义：ES6新增了两个关键字： export 和 import 。 export 用于把模块里的内容暴露出来， import 用 于引入模块提供的功能

模块化语法

•   1. 面向过程

•  2. 面向对象

•  3. 函数式编程

• 4. 模块化语法
• 5. 组件化编程   (html + css + js)

模块化语法

1. 引入 JS 的时候, 需要配置一个 type 值为 module

2. 页面必须以服务器的形式打开, 目前可以借助 live server

导出语法1

export default 要导出的内容(每个文件只能有一个默认导出)

导出语法2

 export 定义变量 = 值(每个文件可以有多个这种导出)

导入语法1

export 变量名 from '文件.js'    这种导入方式对应的是导出语法1

导入语法2

export {导出的内容1, 导出的内容2, ...} from '文件.js'   这种导入方式对应的是导出语法2

导出方法一

console.log('我是当前整个项目的一个小模块')
const fn = () =>{
  console.log('我是conma')
}

const arr = ['汽车',1,2,3]

//当前js 文件内部的内容 ，是一个独立的作用域
//export default '你需要导出的内容，当前为默认导出，一个文件只能有一个'
const obj = {
  fn,
  arr,
}

export default obj;

导出方法二

console.log('我是当前整个项目的一个小模块')
export const fn = () =>{
  console.log('我是bbbbbbbb')
}
export const arr = ['汽车',1,2,3]

导入方法 一二

console.log('我是index')

//第一种
// import comAobj from './comA.js';
// console.log(comAobj)

//第二种
import {fn,arr} from "./comB.js"


console.log(fn)
console.log(arr)

注意：可以使用 export default 命令，为模块指定默认输出，一个模块只能有一个默认输出，所以 export default 只 能使用一次。

ES6模块运行机制：ES6模块是动态引用，如果使用 import 从一个模块加载变量(即 import foo from 'foo' )，变量不 会被缓存，而是成为一个指向被加载模块的引用。等脚本执行时，根据只读引用，到被加载的那个模块中去取值。