【ES6】模块化

概述

模块功能主要有两个命令,exportimport

一个js文件就是一个模块。

参考视频

【一小时速通JavaScript模块化,涵盖CommonJS与ES6模块化-哔哩哔哩】 https://b23.tv/gZ1uK7V

导出成员

在正常变量、函数前加export关键字。

导入模块

在另一个模块中导入

万能导入
javascript 复制代码
import * as xxx from "xxx.js"

在HTML页面导入

html 复制代码
<script type="module" src="">

模块化的优点

防止命名冲突,每个模块都有自己的命名空间

  • 代码复用,每个模块可以被其他多个模块引用
  • 高维护性,修改一个模块其他引用该模块的地方都改变
  • 确保引入顺序的正确性,使用模块化之后一般都是在自己的中引入所依赖的模块,所以避免了依赖顺序的引入问题
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Point.js"></script>
</head>
<body>
    
</body>
    <script src="run.js"></script>
</html>

引入Point.js,再在run.js中创建实例和执行其他代码。

而通过模块化,可以直接在run.js中导入和使用Point.js中定义的类。

javascript 复制代码
import {Point,ColorPoint} from "./Point.js";

let cp = new ColorPoint(100,100,"red");

console.log(cp);

HTML代码也就可以简化:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
    <script type="module" src="run.js"></script>
</html>

需要注意的是,模块功能貌似需要服务器,可以使用Live Server插件,以本地静态服务器形式运行网页。

相关推荐
CCF_NOI.1 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9495 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_5 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路7 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔8 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang8 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔8 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任8 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas