首页 > 其他分享> 文章详细

ES6模块化

2022-01-05 23:32:21 阅读：156 来源： 互联网

标签：ES6 name 模块化 js export 模块 import m1

1、什么是模块化？

模块化是指将一个大的程序文件，拆分成许多个小的文件，然后将小文件组合起来。

2、模块化的好处：

（1）防止命名冲突

（2）代码复用

（3）高维护性

3、模块化语法：

模块功能主要有两个命令构成：export和import

export命令用于规定模块的对外接口

import命令用于输入其他模块提供的功能

4、举例：

1、使用export命令导出模块：

方式一、(分别暴露)

//m1.js
export let name="hbm"   //导出name变量
export function work(){   //也可以导出一个函数
   console.log('程序媛!')
}

方式二、（统一暴露）

//m2.js
 let name="hbm"   //导出name变量
 function work(){   //也可以导出一个函数
   console.log('程序媛!')
}
export {name,work};  //使用对象的简化写法统一暴露

方式三：默认暴露

//m3.js
 export default name="hbm"

2、使用imprt导入模块：

方式一：通用方式,如

import  * as  m1 from 'm1.js'  //* 是指将m1文件中所有暴露的数据都存到m1模块中
                               //as 是给这个模块起别名，此处为m1

方式二：解构赋值的形式，如:

import {name,work} from 'm1.js' 

//如果存在同名，我们可以通过通过as 给模块起别名，避免命名冲突

如：imprt {name as hbmya,work} from 'm2.js'

方式三：简便形式，仅针对默认暴露,如：

import  m3 from 'm3.js'

6、后记：

如有错误，麻烦大家帮忙指出！如果有帮助到您，那真是太棒啦！

标签：ES6,name,模块化,js,export,模块,import,m1
来源： https://blog.csdn.net/hbmern/article/details/122334079

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