什么是模块

模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码

  1. 在模块的顶部this的值是undefined
  2. 其模块不支持html风格的代码注释
    除非用default关键字,否则不能用这个语法导出匿名函数或类

任何未显示导出的变量、函数或类都是模块私有的,无法从模块外部访问

import {identifier1,identifier2} from './example.js'

import大括号表示给定模块导入的绑定,文件必须把文件扩展名也加上扩展名
导入绑定的列表看起来与解构对象很相似,但它不是
当从模块中导入一个绑定时,它就好像使用const定义的一样
不管是在import语句中把一个模块写了多少次,该模块将只招待一次。导入模块的代码执行后,实例化过的模块被保存在内存中,只要另一个import语句引用它就可以重复使用它
export和import的一个重要的限制是它们必须在其它语句和函数之外使用,也就是说不允许出现在if语句中,不能有条件导出或以任何方式动态导出。模块语法存在的一个原因是让js引擎静态确定哪些可以导出,因此只能在模块顶部使用export
export、import都可以用as来重命名导出的函数名
为默认导出值指定标识符指定重命名语法:

function sum(num1, num2) {
return num1 + num2
}
//export default sum
export { sum as default }

看下面这个例子:

export let color = 'red'
export default function (num1, num2) {
return num1 + num2
} import sum,{color} from './example.js'

import 和export 组合使用

export {sum as add } from './example.js'

<script type="module"执行时自动应用defer属性,模块文件开始下载,直到文档被完全解析模块才会执行,模块按照它们出现在html文件中的顺序执行
async属性也可以应用在模块上,async属性会让模块以类似于脚本的方式执行,唯一的区别是在模块执行前,模块中所有的导入资源必须下载下来,这可以确保只有当模块招待所需的所有资源都下载完成后才执行模块,但不能保证是模块的招待时机

浏览器模块说明符解析

  1. 以/开头的解析为以根目录开始
  2. 以./开头的解析为以当前目录开始
  3. 以../开头的解析为从父目录开始

深入理解ES6之《用模块封装代码》的更多相关文章

  1. 《深入理解ES6》笔记——扩展对象的功能性(4)

    变量功能被加强了.函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗? 对象类别 在ES6中,对象分为下面几种叫法.(不需要知道概念) 1.普通对象 2.特异对象 3.标 ...

  2. 深入理解 ES6中的 Reflect

    阅读目录 一:Reflect.get(target, name, receiver) 二:Reflect.set(target,name,value,receiver) 三:Reflect.apply ...

  3. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  4. ES6正则表达式扩展

    前面的话 正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变.然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新.本文将详细介绍ES ...

  5. ES6函数扩展

    前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES ...

  6. ES6数组扩展

    前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...

  7. ES6数字扩展

    前面的话 本文将详细介绍ES6数字扩展 指数运算符 ES2016引入的唯一一个JS语法变化是求幂运算符,它是一种将指数应用于基数的数学运算.JS已有的Math.pow()方法可以执行求幂运算,但它也是 ...

  8. ES6,扩展运算符的用途

    ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点“...”,就是将实现了Iterator 接口的对象 ...

  9. 理解 ES6 Generator-next()方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

随机推荐

  1. Go之Logrus用法入门

    Go之Logrus用法入门 Logrus是Go (golang)的结构化日志程序,完全兼容标准库的API日志程序. Logrus is a structured logger for Go (gola ...

  2. JZ-006-旋转数组的最小数字

    旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. NOTE:给出的所有元素都大于0,若数组 ...

  3. Linux CentOS7.X- 添加用户

    1.创建用户 useradd username 其中,username是要创建用户的用户名(root使用): 2.设置密码 passwd username 其中,username是指定要修改密码的用户 ...

  4. mybatis介绍--基于个人学习JavaWeb的使用

    mybatis介绍 该博文放在javaWeb系列下,目的是记录我们javaWeb阶段所学的知识 @time=2022/3/11/11:52(最近休息玩了两天,今天重新启动生活) 一.mybatis发展 ...

  5. php 23种设计模式 - 责任链模式

    责任链模式 责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行 ...

  6. php 23种设计模型 - 策略模式

    介绍 意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换,用户还不需要知道其具体的实现 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使 ...

  7. 小程序base64图片格式保存至手机相册

    // 保存图片至相册 saveImg() { //获取文件管理器对象 const fs = wx.getFileSystemManager() //文件保存路径 const Imgpath = wx. ...

  8. ACL流策略

    QoS实现工具之MQC-qos设置 作者:上犹日期:2019-10-23 11:30:36 返回目录:设置问题 QoS技术可以对网络中报文进行分类处理,根据优先级提供不同的差分服务,如何实现这种差分服 ...

  9. LGP3726题解

    确实牛逼......这个转化我反正肯定想不到... 考虑 \(a=b\) 的情况.发现出了平局之外都是一半赢一半输.可以得到此时的答案为: \[\frac{2^{a+b}-\sum_{i=0}^{a} ...

  10. 初探 Elasticsearch,学习笔记第一讲

          1. ES 基础   1.1 ES定义   ES=elaticsearch简写, Elasticsearch是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本身扩展 ...