JavaScript——ES6新增特性模块化

Vez’nan

已于 2022-07-13 19:01:45 修改

阅读量248

点赞数

分类专栏： JavaScript 文章标签： javascript es6 前端

于 2022-07-13 18:44:14 首次发布

本文链接：https://blog.csdn.net/qq_52748669/article/details/125766476

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js代码有3种方式把js脚本应用在页面中

1.行内式：js引擎要去执行的标签的某些（事件）属性中

<button onclick="javascript:console.log(111);var a=20;alert(a)">btn</button>

2.嵌入式

<script>console.log("hello world")</script>

3.导入 src的地址是一个js的路径会加载js编码（jsonp）

<script src="./src/test.js">console.log(123)</script>

//test.js
console.log("马上吃饭")

导入和嵌入一起使用是没有问题的，但只会运行导入的代码

权限：外部JS>内部JS>行内JS

ES6模块化

定义

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
ES6 的模块化分为导出（export） 与导入（import）两个模块。

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

<!--test.js文件中 a=20-->
<script>
import a from './src/test.js'
a=30
console.log(a)//30
</script>

<script>
import a from './src/test.js'
console.log(a)20
</script>

每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

<!-- type="module"  因为js读取外部文件然后编码进来 需要babel软件来解码 -->
<script type="module">
import a from './src/test.js'
console.log(a.fn)
<!--fn(){}-->
console.log(a.a)
<!--20-->
import {b} from './src/test.js'
console.log(b)
<!--fn(){console.log("123")}-->
</script>

//test.js
var a=20;
export var fn=function(){};
export var b=function(){console.log("123")};
export var c=function(){};
export default {a,fn};

export导出

与default关联使用，并且一个js模块中只能有一个export default语句

按需导出可以只导出一个，也可以导出多个

默认导出与"default"联用，可以导出多个值,需要用{}括起来（以对象的形式导出）

//导出字符串
export default "abc"

//导出数字
export default 123

//导出布尔值
export default true

//导出数组
export default [1,2,3]

//导出对象
var obj = {
	name: '张三',
	age: 20
}
export default obj

//导出函数
var func = function() {
	console.log("func函数")
	return 100
}
export default func


//导出类
class People {
	constructor() {
		this.a = 100
	}
	say() {
		console.log("say...")
	}
}
export default People

import导入