12.（ECMAScript）es6完全解读（11）

最新推荐文章于 2024-04-28 13:29:07 发布
最新推荐文章于 2024-04-28 13:29:07 发布
阅读量298 收藏
点赞数
分类专栏： # ECMScript 文章标签： es6 js 模块化 发展 Mudule 规范 历史发展 导入导出 export as import from 使用 export default
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/113825063
版权

文章目录

1. 重点提炼

  • 模块化Module
  • 模块化规范
  • es6模块化介绍与总结

2. 模块化Module的发展

技术的诞生是为了解决某个问题，模块化也是。 随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多。在js模块化诞生之前，开发者面临很多问题:

  • 全局变量污染：各个文件的变量都是挂载到window对象上，污染全局变量。
  • 变量重名：不同文件中的变量如果重名，后面的会覆盖前面的，造成程序运行错误。
  • 文件依赖顺序：多个文件之间存在依赖关系，需要保证一定加载顺序问题严重。

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程， 有多种属性，分别反映其内部特性。百度百科中，模块化的定义是： 模块化是一种处理复杂系统分解为更好的可管理模块的方式。 简单的说，把一个复杂的东西分解成多个甚至多层次的组成部分，以一种良好的机制管理起来，就可以认为是模块化。而对于软件开发来说，函数（过程）就是最常见也是最基本的模块之一。

我觉得用乐高积木来比喻模块化再好不过了。每个积木都是固定的颜色形状，想要组合积木必须使用积木凸起和凹陷的部分进行连接，最后多个积木累积成你想要的形状。

模块化其实是一种规范，一种约束，这种约束会大大提升开发效率。将每个js文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。 按照js模块化的设想，一个个模块按照其依赖关系组合，最终插入到主程序中。

模块化的发展 =>

无模块化–>CommonJS规范–>AMD规范–>CMD规范–>ES6模块化

  1. CommonJS规范 Node中模块化规范

    Commonjs的诞生给js模块化发展有了重要的启发，Commonjs非常受欢迎， 但是局限性很明显：Commonjs基于Node原生api在服务端可以实现模块同步加载， 但是仅仅局限于服务端，客户端如果同步加载依赖的话时间消耗非常大，所以需要一个 在客户端上基于Commonjs但是对于加载模块做改进的方案，于是AMD规范诞生了。

  2. AMD规范

    异步模块定义, 允许指定回调函数，AMD是 RequireJS在推广过程中对模块定义的规范化产出。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后（前置依赖），这个回调函数才会运行。

  3. CMD规范

    同样是受到Commonjs的启发，国内（阿里）诞生了一个CMD（Common Module Definition）规范。该规范借鉴了Commonjs的规范与AMD规范，在两者基础上做了改进。

    CMD是 SeaJS在推广过程中对模块定义的规范化产出。

    AMD推崇依赖前置、提前执行 CMD推崇依赖就近、延迟执行。

  4. ES6模块化

    到了2015年，ES6规范中，终于将模块化纳入JavaScript标准，从此js模块化被官方扶正，也是未来js的标准。 在ES6中，我们可以使用 import关键字引入模块，通过 exprot关键字导出模块，功能较之于前几个方案更为强大，也是我们所推崇的， 但是由于ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。


3. 模块化规范

  • CommonJS：Node.js（服务端）
  • AMD：require.js（框架 —— 异步模块定义）
  • CMD：sea.js（框架——阿里推出的）
  • ES6（js中）

4. export

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

即·通过export关键字来导出模块，通过import关键字导入，导入导出对应的变量名称是完全一样的。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

  1. 导出变量或者常量

      export const name = 'hello'
  export let addr = 'BeiJing City'
  export var list = [1, 2, 3]

    或

      const name = 'hello'
  let addr = 'BeiJing City'
  var list = [1, 2, 3]
  export {
      name,
      addr,
      list
  }

  2. 导出函数

      export function say(content) {
      console.log(content)
  }
  export function run() {
      console.log('run')
  }

    或

      const say = (content) => {
      console.log(content)
  }
  let run = () => {
      console.log('run')
  }
  export {
      say,
      run
  }

  3. 导出 Object

      export ({
      code: 0,
      message: 'success'
  })

    或

      let data = {
      code: 0,
      message: 'success'
  }
  export {
      data
  }

  4. 导出 Class

     class Test {
      constructor() {
          this.id = 2
      }
  }
  export {
      Test
  }

    或

      export class Test {
      constructor() {
          this.id = 2
      }
  }

5. as

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

  const name = 'hello'
  let addr = 'BeiJing City'
  var list = [1, 2, 3]
  export {
      name as cname,
      addr as caddr,
      list
  }

6. export default

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

  const name = 'hello'
  let addr = 'BeiJing City'
  var list = [1, 2, 3]
  export {
      name as cname,
      addr as caddr
  }
  export default list

7. import

使用export命令定义了模块的对外接口以后，其他 JS文件就可以通过import命令加载这个模块。

  1. 直接导入

    假设导出模块 A 是这样的：

      const name = 'hello'
  let addr = 'BeiJing City'
  var list = [1, 2, 3]
  export {
      name as cname,
      addr as caddr
  }
  export default list

    则导入：

      import list, {
      cname,
      caddr
  } from A

  2. 修改导入名称

      import list, {
      cname as name,
      caddr
  } from A

  3. 批量导入

      import list, * as mod from A
  console.log(list)
  console.log(mod.cname)
  console.log(mod.caddr)

8. code演示

es-demo\src\module.js

export const a = 5

es-demo\src\1-27.js

import {a} from './module'
console.log(a)

5

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.26
Branch： branch02

commit description：a3.26（模块化Module——导入与导出）

tag：a3.26


import {aa} from './module'
console.log(aa)

undefined

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.27
Branch： branch02

commit description：a3.27（模块化Module——导入一个与导出不匹配的元素）

tag：a3.27


es-demo\src\module.js

export const a = 5
export const b = 'QACC'

es-demo\src\1-27.js

import {a,b} from './module'
console.log(a,b)

5 “QACC”

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.28
Branch： branch02

commit description：a3.28（模块化Module——导入导出多个变量）

tag：a3.28


导入导出函数和对象，注意导出对象的格式有所不同。

export const a = 5
export const b = 'QACC'
export const sum = (x, y) => x + y
const obj = {
    name: 'es'
}
export {obj}

import {
    a,
    b,
    sum,
    obj
} from './module'
console.log(a,b)
console.log(sum(2, 5))
console.log(obj)

image-20201127125615018

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.29
Branch： branch02

commit description：a3.29（模块化Module——导入导出函数和对象）

tag：a3.29


以上导出实际定义了很多个模块，用了很多个export导出会很麻烦，实际可以统一地导出。

es-demo\src\module.js

const a = 5
const b = 'QACC'
const sum = (x, y) => x + y
const obj = {
    name: 'es'
}

export {
    a,
    b,
    sum,
    obj
}

import {
    a,
    b,
    sum,
    obj
} from './module'
console.log(a,b)
console.log(sum(2, 5))
console.log(obj)

image-20201127125615018

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.30
Branch： branch02

commit description：a3.30（模块化Module——统一导出）

tag：a3.30


定义一个类，导出并导入。

实际上在es上的各种结构都可以导入导出。

es-demo\src\module.js

const a = 5
const b = 'QACC'
const sum = (x, y) => x + y
const obj = {
    name: 'es'
}

class People {
    constructor(name) {
        this.name = name
    }
    showName() {
        console.log(this.name)
    }
}

export {
    a,
    b,
    sum,
    obj,
    People
}

es-demo\src\1-27.js

import {
    a,
    b,
    sum,
    obj,
    People
} from './module'
console.log(a,b)
console.log(sum(2, 5))
console.log(obj)
let p = new People('lisi')
p.showName()

image-20201127130454873

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.31
Branch： branch02

commit description：a3.31（模块化Module——类导出并导入）

tag：a3.31


但是有的时候可能有这样的问题，导出的时候，名字都是起好的，导入的时候想重命名，即起别名。

注意：如果起了别名，原来的名字就不能被使用了。

import {
    a as aa,
    b,
    sum,
    obj,
    People
} from './module'
console.log(a,aa,b)
console.log(sum(2, 5))
console.log(obj)
let p = new People('lisi')
p.showName()

image-20201127130759129

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.32
Branch： branch02

commit description：a3.32（模块化Module——如果起了别名，原来的名字就不能被使用了）

tag：a3.32


import {
    a as aa,
    b,
    sum,
    obj,
    People
} from './module'
console.log(aa,b)
console.log(sum(2, 5))
console.log(obj)
let p = new People('lisi')
p.showName()

image-20201127130454873

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.33
Branch： branch02

commit description：a3.33（模块化Module——如果起了别名，就直接使用别名即可）

tag：a3.33


综上实际上甭管导入什么，都必须得知道导出的元素名是什么！

有时导入别人定义好的模块，但模块中的代码逻辑非常复杂，但是作为使用者肯定想快速上手，不去阅读他的源码或者文档。

=> 利用export default导出，导入的时候名字随意取即可。

es-demo\src\module.js

const a = 5
export default a

es-demo\src\1-27.js

import aa from './module'
console.log(aa)

5

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.34
Branch： branch02

commit description：a3.34（模块化Module——export default）

tag：a3.34


const a = 5
export default a
const b = 'QACC'
export default b

报错，因为在每一个模块只能有一个export default。实际很好理解，默认值只能有一个，多了的话，没法区分了。

image-20201127132701908

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.35
Branch： branch02

commit description：a3.35（模块化Module——每一个模块只能有一个export default）

tag：a3.35


export default必须先定义后导出，这点与export不一样。

export default const a = 5 // 错误

image-20201127133041991

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.36
Branch： branch02

commit description：a3.36（模块化Module——export default必须先定义后导出）

tag：a3.36


es-demo\src\module.js

function sum(x, y) {
    return x + y
}
export default sum

es-demo\src\1-27.js

import add from './module'
console.log(add(4, 5))

9

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.37
Branch： branch02

commit description：a3.37（模块化Module——export default导出函数）

tag：a3.37


同一个模块可以有export和export default同时存在 =>

export对应导入需要加{}，而export default直接导入即可

es-demo\src\module.js

function sum(x, y) {
    return x + y
}
export default sum

export const str = 'abc'

es-demo\src\1-27.js

import add, {str} from './module'
console.log(add(4, 5), str)

9 “abc”

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.38
Branch： branch02

commit description：a3.38（模块化Module——export和export default同时存在）

tag：a3.38


一般情况下，会把多种数据放在一个对象中，通过export default导出 =>

es-demo\src\module.js

const a = 5
const b = 'abc'
const sum = (x, y) => x + y
const obj = {
    name: 'es'
}
class People {
    constructor(name) {
        this.name = name
    }
    showName() {
        console.log(this.name)
    }
}
export default {
    a,
    b,
    sum,
    obj,
    People
}

es-demo\src\1-27.js

import mod from './module'
console.log(mod.a)
console.log(mod.b)
console.log(mod.obj)
console.log(mod.sum(7, 8))

image-20201127134046823

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.39
Branch： branch02

commit description：a3.39（模块化Module——export default统一导出）

tag：a3.39


假如一个文件需要导入了很多属性，利用通配符*即可完成全部导入。

import * as mod from './module'
console.log(mod)
console.log(mod.default.a)
console.log(mod.default.b)
console.log(mod.default.sum(8, 9))

image-20201127134307929

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.40
Branch： branch02

commit description：a3.40（模块化Module——export default利用通配符统一导出）

tag：a3.40


9. es6 导入导出关键字总结

  • export
  • import
  • as
  • export default
  • from



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript 2021(ES12)新特性简介，21年Java面经分享
m0_63102527的博客
12-03 162
怎么处理呢？我们知道私有方法是可以在方法内部调用的，那么只需要创建一个公有方法，然后在这个公有方法中调用私有方法即可，如下所示： class Student { #getAge() { console.log(“永远18岁”) } getPublicAge(){ this.#getAge(); } } student= new Stude 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》 【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开
es6 阮一峰
02-07
《ES6 阮一峰》是一本详细解读ECMAScript 6（也称为ES2015）标准的中文指南，由知名前端开发者阮一峰编写。这本书以PDF格式提供，适合读者在线阅读或下载后离线学习，并且允许在文档上做笔记，为学习过程提供了便利...
ECMAScript 2021(ES12)新特性简介
程序那些事
09-22 9029
简介 ES12是ECMA协会在2021年6月发行的一个版本，因为是ECMAScript的第十二个版本，所以也称为ES12. ES12发行到现在已经有一个月了，那么ES12有些什么新特性和不一样的地方呢？一起来看看吧。 基本上ES12引入了replaceAll方法用于对String进行操作，Promise.any用于对Promise进行组合操作，AggregateError用于表示多个错误的集合，新的逻辑操作符??=, &&=, ||=，弱引用WeakRef，FinalizationRegis
ES6简介
m0_45659764的博客
07-02 1712
ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的语法规范ES6实际上是一个泛指，泛指ES2015及后续的版本ES6中新增的用于声明变量的关键字 注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性 在我们for循环的时候，如果使用var来声明变量，即使已经循环完了，在for循环的外面还是能访问得到这个计数的变量，如果使用了let（即使let是在for的括号里而不是在{}里，它依然和for的块级作用域绑定），就不能在for循环的
ECMAScript 2024 (ES12)的新特性总结
最新发布
2401_84411018的博客
04-28 895
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。252?开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。[外链图片转存中…(img-B8EcGs2s-1714282129964)][外链图片转存中…(img-DTB4ewxk-1714282129964)]
【ECMAScript】继承深入、call_apply、圣杯模式、模块化
小管打天下的博客
05-04 265
一个构造函数的原型属性，是这个构造函数所有实例化出来的对象的公共祖先，所有构造函数构造出来的对象，都继承于它的原型 2. 原型 -> 继承 ⭐ 原型链继承 -> 存在引用值共享的问题借用构造函数 -> 父类原型方法无法获取（覆盖了）组合继承(伪经典继承) -> 上面两个同时使用，会出现构造函数执行两次的情况寄生组合继承（经典继承）: YUI圣杯模式es6 class 继承拷贝继承 -> 不常用，知道有就行问：原型链继承存在的问题：引用值共享的问题，如何解决？为什么？⭐答：借用构造函数解决，-> 会出
ECMAScript 2021 (ES12)的新特性总结
江咏之
11-09 1856
快速通道：ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13新特性大全专栏：ECMAScript 新特性汇总ECMAScript 2021 最终功能集于今年的3 月 9 日确定，2021 年6 月 22 日，第 121 届 Ecma 国际 宣布 ECMAScript 2021（ES12）成为事实的 ECMAScript 标准，并被写入 ECMA-262 第 12 版。先纵览下 ES2021 的新功能，看看现在这些特性在你工作中有没有用到吧：String.prototype.replac.
ECMAScript 6入门 高清版.pdf
03-26
编辑推荐 √ 横跨ES2015/2016/2017新标，抢占JavaScript制高点 √ 由千万级名博、布道引领无数前端入行的...√ 来自BAT一线实践，精彩案例透彻解读新标|保留语法 √ 新标首著，凝结多年研究心得，剖析ES理解应用难题
ES6标准入门（第二版）完整版
03-22
《ES6标准入门（第2版）》是国内仅有的一本 ES6 教程，在前版基础上增补了大量内容——对标准进行了彻底的解读，所有新增的语法知识（包括即将发布的 ES7）都给予了详细介绍，并且紧扣业界开发实践，给出了大量简洁...
ES6标准入门第三版阮一峰
05-29
《ES6标准入门第三版》是阮一峰先生编著的一本深入解析JavaScript新特性的重要教程，特别是针对ECMAScript 6（ES6）这一版本的详细解读。ES6，全称ECMAScript 2015，是JavaScript语言的一个重大升级，引入了大量的新...
shopping_cart:ES6购物车项目
03-24
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要版本更新，引入了许多新特性，如箭头函数、类、解构赋值、模块化等，极大地提升了开发效率和代码质量。 【描述分析】：“购物车”一词表明项目的核心功能是...
ECMAScript中文最新(ECMA262)
12-30
ECMAScript2021中文最新,ECMAScript2021中文文档，第1-6章，持续更新，喜欢请star。git地址https://github.com/fangniyima/ECMAScript-notes
ECMScript新特性学习总结笔记Word版本内含链接
07-21
欢迎来到ES6！JavaScript的新版本离我们越来越近，我们将通过每周一节的系列课程一起探索 ECMAScript 6新世界。ES6中包含了许多新的语言特性，它们将使JS变得更加强大，更富表现力。在接下 来的几周内，我们将一一深入了解它们。但在我们开始详细学习之前，我认为十分有必要花几分钟讲解一 下ES6到底是什么，以及你可以从中学到什么！
ECMAScript
详情请看注释
12-03 3016
ECMAScript是JavaScript的核心，规定了JS的语法规范 ECMAScript 常量 12 // 整数类型常量 1.2 // 浮点数类型常量 "hello world" // 字符串类型常量 'Hi' // 字...
ECMAScript扩展 -12 【图片的预加载与懒加载】
Yesterday_Tomorrow的博客
11-20 185
一.图片预加载 (1).多张图片 通过实例化Image对象 调用onload方法来实现(onload之后) var oDiv = document.getElementsByClassName('div')[0], img = ['https://zza.jpg', 'https://zzb.jpg']; img.forEach(function(elem){ var oImg = new Image(); oImg.src = elem;
ECMAScript-12 【继承深入-call-apply-圣杯模式-模块化-常见继承方式】
Yesterday_Tomorrow的博客
11-15 212
一.继承深入 (1).继承概念 function Person(){ } Person.prototype.name='Lucy'; var p=new Person(); p的name属性是继承于Pearson的，一个构造函数的原型属性是他这个构造函数构造出来的所有对象的公共祖先 (2).继承原型 Professor.prototype={ name:'ZZa', tSkill:'JAVA' } function Professor(){} var professo
深入理解ES6之解构
zhangzixue_的博客
06-12 119
变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码，我们经常会遇到在各种场合需要获取对象中的值的场景，舒服一点的是获取单个属性，很多时候，要获取的是接口中的各个对象，在ES5中，我们不得不如上文一样，将同一行代码复制多遍 数组 let s = [1,2,3,4]; let a = s[0]; let b = s[2]; ...
ES6 第一天
ILove_bugs的博客
10-26 395
let和const命令 ES6 新增了let命令，用来声明变量。 ES6新增了const命令用来声明一个只读的常量。 2.1 let命令 2.1.1 基础用法 2.1.2 let命令特点【重点】 let不存在变量提升与暂时性死区 代码案例： <script> //var有变量提升 console.log(age); var age = 20; ​ //let不存在变量提升 ...
jwps.es6.js
08-22
jwps.es6.js是一个文件名，其中的“jwps”可能是指某个特定的项目或公司的简称，而“es6”则是指JavaScript的ECMAScript 6规范，也称为ES6或ES2015。这个文件可能是该项目或公司使用ES6编写的JavaScript文件。 ES6是JavaScript的一种较新的规范，自2015年发布以来逐渐成为标准，并在各大现代浏览器中得到广泛支持。它引入了一些新的语法和功能，以增强JavaScript的表达能力和可读性。 该文件可能包含了使用ES6规范编写的一些代码。ES6引入了许多新的语言功能，如箭头函数、解构赋值、模板字符串、类、模块化等。这些功能使得开发者可以更简洁、更灵活地编写JavaScript代码。 使用ES6编写的代码可以更易读、易维护，并提供了更多的开发功能。许多新的语法和功能能够简化开发过程，并提供更强大的编程能力。因此，使用ES6编写的代码可以提高开发效率，减少代码量，并充分利用JavaScript的强大功能。 总结而言，jwps.es6.js可能是一个使用ES6规范编写的JavaScript文件，它包含了一些用于特定项目或公司的代码。这些代码可能是根据ES6规范编写的，使用了一些新的语法和功能，以提高开发效率和代码的可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值