JS ES6 模块化开发入门
2023-09-11 14:18:27 时间
1. 模块的基本使用
2. 模块延迟解析
3. 作用域在模块中的体现
4. 模块的预解析
5. 模块的具名导出和导入
6. 批量导入 * as name
7. 导出、导入 别名的使用
8. 模块的默认导出
9. 模块的合并导出
视频推荐
1. 模块的基本使用
定义一个js模块
let title = '辰风沐阳'
let url = 'https://www.itqaq.com/index/art/279.html'
function show() {
console.log('this is show method')
}
export { title, url, show }
type="module"
表示使用模块化, ./module/1.js
中的 ./
不能省略
<script type="module">
import { title, url, show } from "./module/1.js"
console.log(title)
console.log(url)
show()
</script>
2. 模块延迟解析
因为模块之间会有依赖关系,所以系统在处理模块时会加载全部模块后才会执行模块
所以模块化js代码放在 button 标签之前,也能找到 button 标签
<script type="module">
console.log(document.querySelector('button'))
</script>
<button>测试</button>
3. 作用域在模块中的体现
模块有自己的独立作用域,在模块中定义的变量只能在模块内部使用
在模块内部可以使用全局作用域的变量,但在外部则不能使用模块内部的变量,只有使用 export
导出才能在外部使用
4. 模块的预解析
无论模块加载多少次,只会在第一次时产生执行
5. 模块的具名导出和导入
具名导出: 顾名思义,就是导出具有名称的成员
let site = 'wwww.itqaq.com'
function show() {
console.log('this is show ')
}
export { site, show }
6. 批量导入 * as name
// 导出的内容
export { site, url }
// 导入
import * as api from './modules/http.js'
console.log(api.url)
console.log(api.site)
7. 导出、导入
别名的使用
import { site as name } from './modules/user.js'
8. 模块的默认导出
export
导出数据时使用 default
代表时默认导出,那么在导入模块时接收的名称可以任意定义
export default function show() {
console.log('this is show ')
}
import api from './modules/show.js'
默认导出本质上是给导出的成员设置了别名 default
,这也是默认导出只能写一个的原因
export { show as default }
接收默认导出的成员,下面两种写法都可以
import user from './modules/show.js';
import { default as user } from './modules/show.js';
具名导出和默认导出的混合使用及其导入
// 导出
export const domain = 'https://www.itqaq.com';
export default function request() {
return new Promise((resolve, reject) => { });
}
// 导入
import request, { domain as url } from './modules/request.js';
9. 模块的合并导出
创建一个模块(merge.js)进行合并导出
import * as user from './modules/user.js';
import * as admin from './modules/admin.js';
export { user, admin }
导入合并后的模块
import * as api from './modules/merge.js';
// 访问方式
// api.user.成员
// api.admin.成员
相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(Progress.js)圆形动画进度条
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS框架_(JQuery.js)上传进度条
- [Node.js] Using ES6 and beyond with Node.js
- Babel6.x 转换ES6
- Web前端 -- 利用Babel来将ES6转化为ES5代码
- [ES6] Generators
- js es6 map weakmap
- js es6 delete
- Node.js 中使用 ES6 中的 import / export 的方法大全
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit js es5 es6新特性 attilax总结
- Atitit js版本es5 es6新特性
- 使用 Babel 将基于 ES6 的 SAP UI5 的代码转译成传统 JavaScript 代码
- ES6学习笔记
- js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)
- JS:ES6(ES2015)新特性之常量、箭头函数、解构赋值
- es6模块化开发
- 【JS高级】ES6_class、promise的简谈与应用_15
- 【JS高级】ES6_箭头函数、for of的简谈与应用_13