【JavaScript】浏览器支持ES6和使用export import语法

TA远方

已于 2023-06-25 21:30:20 修改

阅读量1.7k

点赞数 2

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

于 2022-11-03 20:00:00 首次发布

本文链接：https://blog.csdn.net/zs1028/article/details/127669366

版权

JavaScript编程专栏收录该内容

19 篇文章 1 订阅

订阅专栏

JavaScript在支持ES6前，不像其他编程语言拥有“模块化”这个概念，JavaScript代码中的export import就是模块化的运用，在使用模块化代码前，需要先判断浏览器是否支持ES6以上语法，使用模块化的好处就是方便我们开发者管理和维护项目，复用模块化代码，提高编写效率，减少工作量

支持检查

检查浏览器是否支持ES6语法，

创建一个网页文件，检查浏览器是否支持ES6的代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test ES6</title>
	</head>
	<body>
		<script>
			document.write("检查浏览器是否支持ES6...<hr/>");
			
			try
			{
				new Function("var fun = () => {};");
				document.write("<h1>:)</h1><p>当前浏览器支持ES6!</p>");
			}
			catch (e)
			{
				document.write("<h1>:(</h1><p>不支持ES6!</p> "+e);
			}
		</script>
	</body>
</html>

用浏览器打开看看，如果支持，则浏览效果如下图
在这里插入图片描述

定义模块

准备js模块文件，

没有模块文件的话，就创建一个例如cat.js文件，代码中用 export default 为声明模块化

export default class Cat {
	
	#name = '猫';//私有属性声明
	//对象的构造方法
	constructor(name){
		if(name) #name = name;
	}
}

引用模块

浏览器执行引用模块，

创建一个index.html页面文件，参考代码如下，代码中使用 import 引用模块化文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>index</title>
	</head>
	<body>
		<script>
			//捕捉全局错误信息 当运行出错 会在这里输出错误信息
			window.onerror = function(err,err2) {
				console.error(err);
				console.error(err2);
			}
		</script>
		<!-- <script type="module" src="object.js"></script> -->
		<script type="module">
			import Cat from './cat.js';
			
			window.onload = () => {
				console.log('onload');
				
				let cat = new Cat();
				cat.call();
				
				console.log('cat',cat)
			}
		</script>
	</body>
</html>

引用报错

引用模块遇到的错误，

1.window.onerror报错问题

⚠ 错误信息：
Uncaught SyntaxError: Cannot use import statement outside a module

💡解决方法：
在引用脚本标签<script>需要加上属性type="module"，就能使浏览器正确执行export和import代码

多个模块

如果是想引用多个模块，

会看到别人的代码，同下面这样引用

import { Cat, Foot } from './cat.js';

那么，定义的模块文件cat.js，它的代码是这样写的

export const Foot = 'aaaa';

export class Cat {
	//...
}

发现了吗，为什么没有default关键词

就讲到这里，如阅读后遇到什么不懂的问题，请在结尾处评论留言！ヾ(￣▽￣)Bye_Bye

TA远方

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
5
评论
【JavaScript】浏览器支持ES6和使用export import语法

在使用模块化代码前，需要先判断浏览器是否支持ES6以上语法，使用模块化的好处就是方便我们开发者管理和维护项目，复用模块化代码，提高编写效率，减少工作量。
复制链接

扫一扫