es6 依赖循环_ES6模块化

模块化概述

在传统前端开发中并没有模块化这样的开发规范，因此传统的开发模式面临着两个主要问题：

1. 命名冲突问题（多个JS文件之间如果存在同名的变量，则会发生变量覆盖问题）
2. 文件依赖问题（JS文件之间无法实现相互的引用）

为了解决上述的问题，我们于是提出了模块化的开发方案。

什么是模块化？

模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间是相互隔离的，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

这样做的好处是：

• 方便了代码的重用
• 提高开发效率
• 方便后期的维护

浏览器端模块化规范

1. AMD规范 Require.js（https://requirejs.org/）
2. CMD规范 Sea.js（https://github.com/seajs/seajs）

上面两种规范已经过时了，这里不做介绍，感兴趣的可以自己点开看下。

服务器端 的模块化规范

Node中的CommonJS规范，模块分为单文件模块与包。

• 模块成员导出：module.exports和exports
• 模块成员导入：require('模块标识符')

统一的模块化规范——ES6模块化

在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些模块化标准还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准，例如：

• AMD和CMD适用于浏览器端的JavaScript模块化
• CommonJS适用于服务器端的JavaScript模块化

因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务端器端通用的模块化开发规范。

ES6模块化规范中定义：

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

Node中的ES6模块化规范

Node中默认支持CommonJS模块化规范，对ES6的模块化规范支持并不是很好，需要结合babel第三方插件在Node中体验ES6新特性。

配置如下：

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2. npm isntall --save @babel/polyfill
3. 项目根目录中创建babel.config.js文件，然后加入以下代码：

const presets = [
    [
        "@babel/env", {
            targets:{//装换完后的代码支持的浏览器
                edge: "17",
                firefox: "60", 
                chrome: "67", 
                safari: "11.1"
            }
        }
    ]
];
module.exports = {presets}

4. 在命令行中通过npx babel-node index.js执行index.js文件

ES6模块化的基本语法

• 默认导入&& 默认导出
  • 默认导入语法：import 接受名称 from '模块标识符'
  • 默认导出语法：export default 默认导出的成员
  • 注意：每个模块中，只允许使用唯一一次export default，否则会报错！

//当前文件模块为m.js
//定义私有成员a和b
let a = 10
let b = 20

//外界访问不到变量c,因为他没有被暴露出去
let d = 30

function show() {}

//将本模块中的私有变量暴露出去，供其他模块使用
export default {
    a,
    b,
    show
}

//导入模块成员
import m from './m.js'
console.log(m) //{ a:10, b:20, show:[Function:show] }

• 按需导入&& 按需导出
  • 按需导入语法：import { s } from '模块标识符'
  • 按需导出语法：export let s = 10
  • 注意：每个模块中，可以使用多次按需导出

//当前文件模块为m.js
//向外按需导出变量a
export let a1 = 'aaa'
//向外按需导出变量b
export let b1 = 'bbb'
//向外按需导出方法say
export function say = function() {}

//导入模块成员
import m, { a1, b1 as c1 , say } from './m.js'
console.log(m) //{ a:10, b:20, show:[Function:show] }
console.log(a1) //打印出 aaa
console.log(b1) //打印出 bbb
      //  使用 as 后  console.log(c1) //打印出 bbb     b1的别名c1
console.log(say) //打印出 [function: say]

• 直接导入并执行模块代码：有时候，我们只想单纯的执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

//当前文件模块为b.js
//在当前的模块中执行一个for循环
for(let i = 0; i < 3; i++){
    console.log(i)
}

//直接导入并执行模块代码
import './b.js'
//运行后会打印出0 1 2