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.exportsexports
  • 模块成员导入: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
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页