es6模块

简介: es6模块

模块


什么是模块

模块分为导入import和导出export两个模块

Es6模块自动开启严格模式,不管你有没有在模块头部加上use strict

模块可以导入和导出各种类型的值

每一个模块只加载一次(是单列的),若再去加载同目录下同文件,直接从内存中读取


模块的作用

每一个模块内声明的变量都是局部变量,不会污染全局变量


export,import用法

导出的函数声明与类声明必须要有名称(export default命令另外考虑)

不仅能导出声明还能导出引用(例如函数)

export命令可以出现在模块的任何位置,但必须处于模块顶层。

import命令会提升到整个模块的头部首先执行

导入的变量名,须和导出的接口名称相同,即顺序可以不一致。

let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!


import 命令的特点

只读属性:不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。

import {a} from "./xxx.js"
a = {}; // error
import {a} from "./xxx.js"
a.foo = "hello"; // a = { foo : 'hello' }


单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。

import { a } "./xxx.js";
import { a } "./xxx.js";
// 相当于 import { a } "./xxx.js";
import { a } from "./xxx.js";
import { b } from "./xxx.js";
// 相当于 import { a, b } from "./xxx.js";


静态执行特性:import 是静态执行,所以不能使用表达式和变量。

import { "f" + "oo" } from "methods";
// error
let module = "methods";
import { foo } from module;
// error
if (true) {
  import { foo } from "method1";
} else {
  import { foo } from "method2";
}
// error


as的用法

作用 : 使用 as 重新定义导出的接口名称,隐藏模块内部的变量


例:

//a.js 
let Myname='xiaohong'
export {Myname}
//b.js 
let Myname='xiaoming'
export {Myname}
//c.js
import {Myname as name1} from './a.js'
//用name1 替换a.js中的Myname
import {Myname as name2} from './b.js'
//用name2 替换b.js中的Myname


export default 命令

在一个文件或模块中,export、import 可以有多个,export default 仅有一个。

export default 中的 default 是对应的导出接口变量。

通过 export 方式导出,在导入时要加{ },export default 则不需要。

export default 向外暴露的成员,可以使用任意变量来接收。

var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error"; 
// error,default 已经是对应的导出变量,不能跟着变量声明语句
import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收


复合使用

export 与 import 可以在同一模块使用,使用特点:


可以将导出接口改名,包括 default。

复合使用 export 与 import ,也可以导出全部,当前模块导出的接口会覆盖继承导出的。

export { foo, bar } from "methods";
// 约等于下面两段语句,不过上面导入导出方式该模块没有导入 foo 与 bar
import { foo, bar } from "methods";
export { foo, bar };
/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from "methods";
// 将 foo 转导成 default
export { foo as default } from "methods";
// 将 default 转导成 foo
export { default as foo } from "methods";
/* ------- 特点 2 --------*/
export * from "methods";
相关文章
|
2月前
|
JavaScript 前端开发 编译器
将 CommonJS 模块转换为 ES6 模块
【10月更文挑战第11天】 将 CommonJS 模块转换为 ES6 模块有三种主要方法:手动修改代码、使用工具(如 Babel)自动转换和逐步迁移。手动修改涉及导出和导入方式的转换,确保名称和结构一致;使用工具可自动化这一过程;逐步迁移适用于大型项目,先在新模块中使用 ES6 语法,再逐步替换旧模块。转换过程中需注意兼容性、代码逻辑调整和充分测试。
184 58
|
12天前
|
JavaScript 前端开发 开发者
ES6模块系统
ES6 模块系统是 JavaScript 发展中的一个重要里程碑,它为开发者提供了更强大、更灵活和更高效的编程方式。你在使用模块系统时,是否遇到过一些具体的问题或有一些独特的见解呢?
20 1
|
3月前
|
JavaScript
es6模块中使用commonjs定义的库
es6模块中使用commonjs定义的库
|
7月前
|
前端开发 JavaScript
前端最常见的es6,es7,es8方法
【4月更文挑战第3天】 前端最常见的es6,es7,es8方法
69 5
|
7月前
|
JSON 前端开发 数据格式
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
125 0
|
7月前
|
前端开发 JavaScript Java
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
106 0
|
JavaScript 前端开发
模块化开发:CommonJS、AMD 和 ES6 Modules 的区别与使用方式
在前端开发中,模块化开发是一种重要的编程方法,它可以帮助我们更好地组织和管理代码,提高代码的可维护性和复用性。在JavaScript中,有多种模块化开发的标准,包括CommonJS、AMD和ES6 Modules。让我们逐一了解它们的区别和使用方式:
210 0
|
前端开发 JavaScript
模块打包中CommonJS与ES6 Module的导入与导出问题详解
文章全面解析了CommonJS模块系统的模块定义、导出、导入的操作和注意事项。同时,它也简要地提到了ES6 Module的相关概念,包括命名导出、默认导出、命名导入、默认导入、混合导入和复合写法。
506 0
|
JavaScript 前端开发 编译器
CommonJS与ES6 Module的本质区别
文章主要讨论了CommonJS和ES6 Module两种JavaScript模块系统的核心区别,包括动态与静态解决依赖方式,值拷贝与动态映射,以及如何处理循环依赖的问题。
232 0
|
机器学习/深度学习 边缘计算 运维
es学习笔记2-es组件
es学习笔记2-es组件
175 0