JavaScript 模块化
模块化的优势
1.防止命名冲突 每个es模块都有独立的私有作用域
2.代码复用
3.高维护性
ES6的模块化
依赖模块需要编译打包处理，比如ES6->ES5
ES6模块化的设计思想使尽量静态化，使得编译时就能确定模块的依赖关系，以及输入输出的变量。
模块功能主要由两个命令构成
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
ES Module 模块说明
- 我们只需要给script标签加上一个属性type=module，那么该script就是一个es模块
- 每个es模块都有独立的私有作用域
<script type="module" scr="请求的模块路径必须是支持跨域的"> const a = '111' console.log(a) </script> <script type="module"> const a = '222' console.log(a) </script> /* 输出111 输出222 */ - es模块是通过跨域的方式请求外部js模块，所以请求的该js模块必须是支持跨域的
<script type="module" scr="请求的模块路径必须是支持跨域的"></script> - es模块的script脚本会相对与普通的script脚本会延迟执行
<script type="module"> console.log('我是ESM script') </script> <script> console.log('我是普通script') </script> /* 输出我是普通script 我是ESM script */ export命令
分别暴露和统一暴露使等价的，优先考虑统一暴露，可以很清楚输出了哪些变量
//分别暴露 export let name = "ranan"; export let fun = function(){
}; //统一暴露 let name = "ranan"; let fun = function(){
}; export {
name,fun}; //注意{}不是对象的意思是特定的语法 //默认暴露 这里的{}，是一个对象 export default {
name : "ranan" , fun : function(){
} } export不支持直接导出变量和值,下面是错误的
所谓变量，其实只有在声明时的一瞬间有，声明过后，不管是单独使用，还是作为实参传递，它都是作为一个表达式，而不是变量。
const name = 'aaa' export name // 导出变量 export 'aaa' // 导出值 import命令
//通用引入 将所有输出的变量放在m1对象中，采用m1.xx的方式使用 import * as m1 from './xxx' /* 统一暴露或分别暴露,这里的{}也是特定语法 并且{ }内的变量名称需要和export导出的变量名称相同 */ import {
name,fun} from './xxx' //默认暴露的写法，必须要写别名,因为default是关键字 import {
default as data} from "path" //简便形式 针对默认暴露 import data from "path" console.log(data) //输出{name : "ranan" ,fun : functio(){}} 说明
- 可以单独把引入写在一个js里面，然后引入该js，注意script标签需要添加
type=module“属性 - 如果引入npm包
import x from '包名' - 在一个文件或模块中，export、import 可以有多个，export default 仅有一个
- import 导入的路径可以是绝对路径、相对路径和完整的链接，但不可以省略
./和后缀
动态import加载
实现懒加载/按需加载,使用import()函数，返回值是promise对象,pormise返回的成功值就是暴露的对象。
import(path).then(data => data.xx)
as关键字 重命名
一般情况下，export输出的变量就是本来的名字，但是可以使用as 关键字进行重命名
export {
name as n1,fun as n2,fun as n3} 同一个变量可以用不同的名字进行输出
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/200353.html原文链接：https://javaforall.net
