正文

es6模块(代码片段)

liangtao999  liangtao999  2023-05-06  687

关键词：

概述

在 ES6 前，实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库，和基于 CMD 规范的模块化库）。

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 的模块化分为导出（export） @与导入（import）两个模块。

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

export 与 import

基本用法

模块导入导出各种类型的变量，如字符串，数值，函数，类。

导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
不仅能导出声明还能导出引用（例如函数）。
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。

/*-----export [test.js]-----*/
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 [xxx.js]-----*/
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!

建议使用大括号指定所要输出的一组变量写在文档尾部，明确导出的接口。

函数与类都需要有对应的名称，导出文档尾部也避免了无对应名称。

as 的用法

export 命令导出的接口名称，须和模块内部的变量有一一对应关系。

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

/*-----export [test.js]-----*/
let myName = "Tom";
export  myName as exportName 
 
/*-----import [xxx.js]-----*/
import  exportName  from "./test.js";
console.log(exportName);// Tom

使用 as 重新定义导出的接口名称，隐藏模块内部的变量
/*-----export [test1.js]-----*/
let myName = "Tom";
export  myName 
/*-----export [test2.js]-----*/
let myName = "Jerry";
export  myName 
/*-----import [xxx.js]-----*/
import  myName as name1  from "./test1.js";
import  myName as name2  from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

不同模块导出接口名称命名重复，使用 as 重新定义变量名。

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

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";

es6模块exportimport(代码片段)

概述在ES6前，实现模块化使用的是RequireJS或者seaJS（分别是基于AMD规范的模块化库，和基于CMD规范的模块化库）。ES6引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6的模块化分为... 查看详情

es6模块(代码片段)

<scripttype="module">//引渠模块export.jsimportstudentfrom"./export.js";console.log(student)console.log(student.getInfo())</script>模块export.jsexportdefaultname:"jack",age:11,getInfo()return`姓查看详情

es6模块化(代码片段)

在es6出来之前，javascript还不支持模块化，想要实现模块化，只能用requrie.js（国外）和seajs（国内）之类相关的库。随着大前端的工作越来越繁杂，系统越来越庞大，更好的分工使其模块化就显得很重要。在复习之前有一个很重... 查看详情

es6模块化规范(代码片段)

ES6模块化规范ES6在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口import命令用于输入... 查看详情

javascriptjavascript模块es6（es2015）(代码片段)

查看详情

如何让node运行es6模块文件，及其原理(代码片段)

如何让node运行es6模块文件，及其原理最新版的node支持最新版ECMAScript几乎所有特性，但有一个特性却一直到现在都还没有支持，那就是从ES2015开始定义的模块化机制。而现在我们很多项目都是用es6的模块化规范来写代码的，包括... 查看详情

es6模块化-babel转换es6(代码片段)

模块化-babel转换ES6<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>模块化-babel转换ES6</title></head><body><scriptsrc="src/js/app.js"type="modul 查看详情

js模块导入导出规范-commonjs|es6-规范案例(代码片段)

...rts、exports和export、exportdefault总体上区分两大规范 CommonJS模块规范和ES6模块规范require:node和es6都支持的引入export/import:只有es6支持的导出引入module.exports/exports:只有node支持的导出Node里面的模块系统遵循的是CommonJS规范。CommonJS定... 查看详情

es6模块化(代码片段)

1.什么是模块化传统非模块化开发有如下的缺点：命名冲突文件依赖模块化规范：CommonJS模块化规范ES6模块化规范2.ES5模块化规范每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，... 查看详情

深入理解es6之《用模块封装代码》(代码片段)

什么是模块模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码在模块的顶部this的值是undefined其模块不支持html风格的代码注释除非用default关键字，否则不能用这个语法导出匿名函数或类任何未显示导出的变量、... 查看详情

es6模块的使用示例(代码片段)

1、整体文件结构：2、profile.jsvarfirstName=‘Michael‘;varlastName=‘Jackson‘;varyear=2019;functiontest1()console.log("thisistest1");functiontest2()console.log("thisistest2");exportdefaultfirstName,lastName, 查看详情

es6特性之模块modules(代码片段)

ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层... 查看详情

es6模块化(代码片段)

...2、按需导出/导入2.1、按需导出2.2、按需导入3、直接运行模块中的代码3.1、需要运行的代码文件3.2、运行代码的文件1、默认导出/导入1.1、默认导出letn1=10;letn2=20;functionshow();exportdefault n1, show;//一个.js文件中不能有两个//expor... 查看详情

markdown使用es6箭头功能清理vue模块(代码片段)

查看详情

es6系列_16之模块化操作(代码片段)

ES6的模块化操作主要包括两个方面。（1）export:负责进行模块化，也是模块的输出。（2）import:负责把模块引，也是模块的引入操作。export的用法：export可以让我们把变量，函数，对象进行模块化，提供外部调用接口，让外部进... 查看详情

es6模块化(代码片段)

模块化<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>模块化</title></head><body><divid="ad"></div><div></div><scrip 查看详情

es6从入门到精通#23：es6的模块化实现（完结）(代码片段)

...从入门到精通系列（全23讲）学习笔记。ES6modulees6模块功能主要有两个命令构成export和import。export：用于规定模块的对外接口import：用于输入其他模块提供的功能一个模块就是一个独立的文件我们新建一个module文... 查看详情

es6导入导出import|export|exportdefault-使用案例(代码片段)

总体上区分两大规范 CommonJS模块规范和ES6模块规范require:node和es6都支持的引入export/import:只有es6支持的导出引入module.exports/exports:只有node支持的导出Node里面的模块系统遵循的是CommonJS规范。CommonJS定义的模块分为:模块标识(module)... 查看详情