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

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

    支持检查

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

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

    定义模块

    准备js模块文件，

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    引用模块

    浏览器执行引用模块，

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

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>indextitle>
	head>
	<body>
		<script>
			//捕捉全局错误信息 当运行出错 会在这里输出错误信息
			window.onerror = function(err,err2) {
				console.error(err);
				console.error(err2);
			}
		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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    引用报错

    引用模块遇到的错误，

    1.window.onerror报错问题

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

    💡解决方法：
    在引用脚本标签