什么是模块

模块是自动运行在严格模式下并且没有办法退出运行的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. UnicodeDecodeError

    'gbk' codec can't decode byte 0x80 in position xx open文件时,添加参数'encoding='utf-8' 'utf-8' codec can't ...

  2. C# Md5Hash

    /// <summary> /// MD5 32位加密(大写) /// </summary> /// <param name="str">< ...

  3. VirtualBox 共享文件夹设置

    1. 安装VirtualBox的增强功能 2. 设置共享文件夹 参考:VirtualBox主机与虚拟机文件夹共享

  4. Linux常用文件管理命令详解

    cat cat命令用于连接文件并打印到标准输出设备上. 命令语法:cat [参数] [文件名] 参数说明: 参数 说明 -n 由1开始对所有输出的行数进行编号. -b 由1开始对所有输出的行数进行编号 ...

  5. Springboot项目 配置数据库连接属性后,启动项目报错

    Springboot项目 配置数据库连接属性后,启动项目报错,错误如下: 错误原因分析: 1.连接信息配置错误 当使用properties为配置文件时,如图所示,上面的 spring.datasour ...

  6. java-快捷操作

    crtl+c crtl+v crtl+a crtl+x crtl+x剪切 crtl+z撤销 crtl+s保存 alt+f4关闭窗口 完全删除shift+delet widow+r运行程序 window ...

  7. Git 修改历史提交信息 commit message

    修改最近一条提交的消息 git commit --amend 进入vim模式 按字母 o 或者 insert键 开始修改内容 按 esc 推出编辑,最常用的是输入":q"直接退出, ...

  8. Anaconda Navigator卡logo打不开闪退问题处理方案-更换阿里云镜像源

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.打开软件卡logo,点击图标后闪退 最近有同事使用anaconda时出现了卡logo,显示loading applications,点击图标时发 ...

  9. MYSQL5.7详细安装步骤

    0.更换yum源 1.打开 mirrors.aliyun.com,选择centos的系统,点击帮助 2.执行命令:yum install wget -y 3.改变某些文件的名称 mv /etc/yum ...

  10. [bzoj1791][ioi2008]Island 岛屿(基环树、树的直径)

    [bzoj1791][ioi2008]Island 岛屿(基环树.树的直径) bzoj luogu 题意可能会很绕 一句话:基环树的直径. 求直径: 对于环上每一个点记录其向它的子树最长路径为$dp_ ...