Bootstrap

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";

2. 解构赋值形式

        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";

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

        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模块之间导入依赖。
选择使用哪种方式取决于你的项目需求、目标浏览器以及是否使用了构建工具或模块加载器。

;