ES6中的模块化

历史上,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。
其他语言如java、python等都具备这项功能,唯独Javascript没有,在ES6之前,要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS。

ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;
模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。

export

在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。
第一种:分别暴露

export let msg = "Hello Module";

export const showMsg = function () {
    console.log("你好");
}

第二种:统一暴露(不想暴露模块变量名称可以通过as定义别名)

let message = "Hello Module";

const sayHello = function () {
    console.log("Hi !");
}

export { message as msg, sayHello };

第三种:默认暴露(一个模块只能有一个默认导出,导入的名称可以和导出的名称不一致)

let name="张三";

export default {
    name
}

除此之外,还可以混合导出

let name = "张三";

export default {
    name
}

export const myFun = function () {
    console.log("myFun");
}

import

第一种:通用导入方式


    // 引入 m1.js 模块内容
    import * as m1 from "./m1.js";
    // 引入 m2.js 模块内容
    import * as m2 from "./m2.js";
    // 引入 m3.js 模块内容
    import * as m3 from "./m3.js";

第二种:解构赋值形式(有名称重复的话可以是用as定义别名)


    import { msg, showMsg } from './m1.js';
    import { msg as hello, sayHello } from './m2.js';
    import { default as m3 } from './m3.js';

第三种:简便形式 (只针对默认暴露)


    import m3 from './m3.js';

同样支持混合导入


    import m4, { myFun } from './m4.js';

Original: https://www.cnblogs.com/lm66/p/15411204.html
Author: Liming_Code
Title: ES6中的模块化

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/575989/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • NO.6 HTML+CSS 笔记

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    数据库 2023年6月14日
    067
  • Linux–>shell

    shell是什么 Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序。 用户可以用Shell来启动,挂起,停止,编写一些程序。 S…

    数据库 2023年6月14日
    096
  • Win10系统链接蓝牙设备

    进入设备界面,删除已有蓝牙,如果蓝牙耳机已经链接其他设备,先断开链接 点击添加蓝牙或其他设备 Original: https://www.cnblogs.com/itcaimeng…

    数据库 2023年6月11日
    081
  • C/C++内存泄漏检测方法

    内存泄漏 检测代码 使用链表记录每个malloc返回的指针,释放时从链表中查找并删除找到对应指针的节点。 最终输出链表,该链表记录了所有没有释放的动态内存。 #include #i…

    数据库 2023年6月14日
    071
  • [LeetCode]1. 两数之和

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个…

    数据库 2023年6月9日
    083
  • IPFS 集群部署

    IPFS 和 IPFS-Cluster 默认的端⼝:IPFS: 4001 – 与其他节点通信端⼝ 5001 – API server 8080 – Gateway server I…

    数据库 2023年6月9日
    075
  • 2022-08-20 数据库连接池

    每次去初始化一个连接池,连接池中会有很多个连接等待被使用,使用完连接之后,不需要关闭连接,只需要把连接还回到连接池,还回到连接池的操作不需要我们手动控制。 数据库连接池负责分配、管…

    数据库 2023年6月14日
    079
  • Queue

    队列( Queue)是一种经常使用的集合。 Queue实际上是实现了一个先进先出(FIFO:First In First Out)的有序表 Queue接口常用的实现类是 Linke…

    数据库 2023年6月9日
    084
  • The user specified as a definer(‘mysql.infochema’@”localhost’) does not exist

    最近将之前用的 mysql5.5 升级到了 mysql8.0,第一天还能正常使用,几天没用后,登录发现报错:The user specified as a definer (&#8…

    数据库 2023年6月6日
    077
  • 【黄啊码】MySQL入门—4、掌握这些数据筛选技能比你学python还有用-1

    大家好!我是黄啊码,今天没继续select * 了吧,如果还继续,那接下来的课程先别学,回去好好把之前的课程重复复习一遍,学明白了我们再会?废话不多说,学今天的课程之前我们先来说说…

    数据库 2023年6月16日
    071
  • MySQL隐式转换的坑

    MySQL以以下规则描述比较操作如何进行转换: 两个参数至少有一个是 NULL 时,比较的结果也是 NULL,例外是使用 实际使用中经研究发现字符串和数字比较时,优先把字符串转换为…

    数据库 2023年6月9日
    059
  • 695.岛屿的最大面积

    695.岛屿的最大面积 给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合,这里的「相邻」要求两个 1 必须在 水平或者竖直…

    数据库 2023年6月16日
    067
  • 0x03MySQL的SQL基础

    0x03MySQL的SQL基础1.SQL介绍结构化的查询语言,关系型数据库中用的一类语言。SQL标准 89 92 99 03MySQL 2.SQL类常用型2.1 mysql自带的功…

    数据库 2023年6月9日
    077
  • PHP array_count_values()

    array_count_values array_count_values() 函数用于统计数组中所有值出现的次数。 本函数返回一个数组,其元素的键名是原数组的值,键值是该值在原数…

    数据库 2023年6月14日
    066
  • 详解在Linux中安装配置MySQL

    最近在整理自己私人服务器上的各种阿猫阿狗,正好就顺手详细记录一下清理之后重装的步骤,今天先写点数据库的内容,关于在 Linux中安装配置 MySQL 安装环境 CentOS7 + …

    数据库 2023年6月11日
    0107
  • 容器化 | 使用 Alpine 构建 Redis 镜像

    上一期我们介绍了几种常见的构建镜像方式,并给出了功能对比、决策树等作为选型参考。本期我们将演示如何使用 Alpine 构建一个 Redis 镜像。 Alpine 系统使用 apk …

    数据库 2023年5月24日
    087
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球