ES6 模块化语法

目录

[ES6 模块化语法](#ES6 模块化语法)

分别暴露

统一暴露

​编辑

默认暴露

[ES6 模块化引入方式](#ES6 模块化引入方式)


ES6****模块化语法

模块功能主要由两个命令构成:export 和 import

⚫ export 命令用于规定模块的对外接口(哪些数据需要暴露,就在数据前面加上关键字即可)

⚫ import 命令用于输入其他模块提供的功能(一个模块想用另一个模块的功能的时候使用)

分别暴露

统一暴露

默认暴露

export default{....}后面跟上你要暴露的数据,可以是任意类型

想要使用里面你的属性和方法就要加上default

ES6 模块化引入方式

  1. 通用的导入方式

引入 m1.js 模块内容

import * as m1 from "./src/js/m1.js";

//引入 m2.js 模块内容

import * as m2 from "./src/js/m2.js";

//引入 m3.js

import * as m3 from "./src/js/m3.js";

  1. 解构赋值形式

import {school, teach} from "./src/js/m1.js";

import {school as guigu, findJob} from "./src/js/m2.js";

import {default as m3} from "./src/js/m3.js";

  1. 简便形式 针对默认暴露

import m3 from "./src/js/m3.js";

console.log(m3);

总结

在js中<script src=""></script>和使用import有什么区别

在JavaScript中,<script src=""></script> 和 import 语句都是用于引入外部代码的方式,但它们有一些关键的区别,主要涉及到使用场景、语法、模块系统以及兼容性等方面。

<script src=""></script>

使用场景:

通常用于在HTML文件中直接引入外部的JavaScript文件。

适用于传统的脚本加载方式,也可以用于模块化的脚本(如果使用了合适的模块加载器,比如RequireJS)。

语法:

直接在HTML的<head>或<body>标签内使用<script src="path/to/your/script.js"></script>。

模块系统:

默认不支持ES6模块系统(除非指定了type="module")。

如果要使用ES6模块,可以在<script>标签中添加type="module"属性,例如<script type="module" src="path/to/your/module.js"></script>。

兼容性:

广泛兼容所有现代浏览器。

import

使用场景:

主要用于在JavaScript模块中导入其他模块或功能。

适用于ES6模块系统。

语法:

在JavaScript文件内部使用import语句,例如import { functionName } from 'module-name';或import * as moduleName from 'module-name';。

模块系统:

是ES6模块系统的一部分,支持静态导入(编译时解析依赖)。

可以在同一个文件内多次使用import语句来导入不同的模块或功能。

支持默认导出和命名导出。

兼容性:

需要现代浏览器支持ES6模块,或者通过构建工具(如Webpack、Rollup)和Babel等转译器来兼容旧版浏览器。

区别总结

加载方式:<script src=""></script>是在HTML中直接加载外部脚本,而import是在JavaScript模块内部导入其他模块。

模块系统:<script>标签默认不支持ES6模块,但可以通过添加type="module"来使用ES6模块;import是ES6模块系统的核心特性。

兼容性:<script>标签在所有现代浏览器中都得到广泛支持;import需要现代浏览器支持ES6模块,或者通过构建工具和转译器来兼容旧版浏览器。

使用场景:<script>标签更适合在HTML中加载脚本,而import更适合在JavaScript模块之间导入依赖。

选择使用哪种方式取决于你的项目需求、目标浏览器以及是否使用了构建工具或模块加载器。

相关推荐
竣子好逑1 小时前
记错:NaN 不等于 NaN
开发语言·javascript·ecmascript
苹果电脑的鑫鑫2 小时前
uni-app获取到的数据如何保留两位小数
java·前端·uni-app
一回生二回熟2 小时前
uniapp中父组件调用子组件方法
前端·vue.js·uni-app
堕落年代2 小时前
Uniapp自动调整元素高度
前端·javascript·uni-app
zhangxueyi2 小时前
详解HTML5语言
前端·html5
GIS好难学2 小时前
《Vue零基础入门教程》第十一课:事件绑定指令
前端·javascript·vue.js
Seveny072 小时前
diff算法
前端·javascript·vue.js
tester Jeffky2 小时前
深入理解CSS盒模型及其属性
前端·css
A_cot2 小时前
Vue 项目开发常用知识点
前端·javascript·vue.js·前端框架·js
z_y_j2299704382 小时前
Vue基本语法
前端·javascript·vue.js