ES6 中的模块化输出

2021-12-20 16:00:57 阅读：159 来源： 互联网

标签：ES6 console log laowang 输出模块化 myName js export

在之前的 javascript 中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类
库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至 ES6 带来了模块化，才让
javascript 第一次支持了 module。ES6 的模块化分为导出（export）与导入（import）两个模块。

export 的用法:

在 ES6 中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果
你希望外部可以读取模块当中的内容，就必须使用 export 来对其进行暴露（输出）。先来看个例
子，来对一个变量进行模块化。我们先来创建一个 test.js 文件，来对这一个变量进行输出：

export let myName="laowang";

然后可以创建一个 index.js 文件，以 import 的形式将这个变量进行引入:

import {myName} from "./test.js";
console.log(myName);//laowang

⭐ 如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

{
let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"！今年"+myAge+"岁了" }
export {
myName,
myAge,
myfn
}

接收的代码调整为：

import {myfn,myAge,myName} from "./test.js";
console.log(myfn()); //我是 laowang！今年 90 岁了
console.log(myAge); //90
console.log(myName); //laowang

⭐如果你不想暴露模块当中的变量名字，可以通过 as 来进行操作：

{
let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"！今年"+myAge+"岁了" }
export {
myName as name,
myAge as age,
myfn as fn
}

接收的代码调整为：

import {fn,age,name} from "./test.js";
console.log(fn()); //我是 laowang！今年 90 岁了
console.log(age); //90
console.log(name); //laowang

⭐也可以直接导入整个模块，将上面的接收代码修改为：

import * as info from "./test.js"; //通过*[通配符]来批量接收，as 来指定接收的名字
console.log(info.fn()); //我是 laowang！今年 90 岁了
console.log(info.age); //90
console.log(info.name); //laowang

⭐默认导出（default export）
一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

导出

export default function(){
return "默认导出一个方法" }

引入

import myFn from "./test.js"; //注意这里默认导出不需要用{}。
console.log(myFn()); //默认导出一个方法

⭐可以将所有需要导出的变量放入一个对象中，然后通过 default export 进行导出

导出

export default {
myFn(){
return "默认导出一个方法"
},
myName:"laowang"
}

引入

import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 laowang

⭐同样也支持混合导出

导出

export default function(){
return "默认导出一个方法" }
export var myName="laowang";

引入

import myFn,{myName} from "./test.js";
console.log(myFn(),myName); //默认导出一个方法 laowang

⭐重命名 export 和 import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6 为提供
了重命名的方法，当你在导入名称时可以这样做：

test1.js

export let myName="我来自 test1.js";

test2.js

export let myName="我来自 test2.js"

index.js

import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我来自 test1.js
console.log(name2);//我来自 test1.js

标签：ES6,console,log,laowang,输出,模块化,myName,js,export
来源： https://blog.csdn.net/ikEason_/article/details/122042941

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6 中的模块化输出

export 的用法: