ES6模块化
模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。
好处:
- 防止命名冲突
- 代码复用
- 高维护性
ES6的模块化
模块功能主要由两个命令构成:export 和 import
export(出口) --- 暴露
import(进口) --- 引入
export暴露
1.分别暴露
定义对象前加上export
export let name = 'Tom'
export function play(){
console.log("玩")
}
2.统一暴露
先定义完所有数据,再统一暴露
let name = 'Tom'
function play(){
console.log("玩")
}
export {name,play}
3.默认暴露
将所有数据都写在 default 这个对象中
export default{
name: 'Tom',
play: function(){
console.log("玩")
}
}
import引入
1.通用引入
三种暴露方式均可引入
import * as m from 'url'
// *: 代表引入该模块中所有暴露的数据
// as(起一个别名)
// as 后紧跟的 m 就是别名,m 就代表引入的这个模块。
// url: 引入模块的地址
// 如果引入的模块 是 默认暴露的
m.default.xxx
// 那么 m 里会有一个default对象,这个对象里面保存默认暴露的所有数据
2.解构赋值形式
三种暴露方式均可引入
import {name, play} from 'url'
// name 和 play 是某个模块中事先定义并暴露的数据
// {name, play} 表示引入该模块中暴露的 name 和 play,并用同名的变量保存
// name = name play = play
// 因为会用同名变量保存引入的参数,所以很可能导致命名冲突
import {name as n, play} from 'url'
// 可以用 as 取别名,这样 n 就代表 name
// 这时会用 变量n 保存 name
// 如果引入的模块 是 默认暴露的
import {default as m} from 'url'
// m 里封装了所有暴露的数据
3.简便形式
只适用于默认暴露的模块
import m from 'url'
// url为默认暴露的模块,如果不是会报错
// m 里封装了所有暴露的数据
Script标签
用到了模块化import 和 export 的 js 文件要是引入到 html 页面中的话 必须给script加上 type = "module" 这个属性
<script type="module" src="url..."></script>
引入NPM包
ES6:import 变量名 from ('包名') ==> const 变量名 = require('包名')
本文来自博客园,作者:ycccc丶,转载请注明原文链接:https://www.cnblogs.com/imycc/p/16491654.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~