ES6中class和模块

ES6的模块化分为导出export ,导入import两个模块,以及输入和输出的变量,ES6的模块化是自动开启严格模式,模块中科院导入和导出各种类型的变量,函数,对象,字符串,数字,类等。

export与import的实例:
在模块1中定义一个父类Animal,然后导出在模块2导入模块1,编写一个自雷Dog继承Animal,在Dog类中添加构造方法传入name和age参数,添加sayHello打招呼的方法,在index.html中导入模块2,创建模块2的Dog类实例,调用sayHello输出结构(如以下代码块):

Mouble1.js

//定义一个父类
let Animal = class Animal{
	constructor(){
		
	}
}
//导出
export{
	Animal
}

Mouble2.js

//子类,继承模块1
import{Animal}from "./Mouble1.js";
let Dog = class Dog extends Animal{
	constructor(name,age){
		super();
		this.name=name;
		this.age=age;
	}
	sayHello(){//添加一个sayHello打招呼方法
		alert("My name is "+ this.name +"! I'm" + this.age + "years odl.");
	}
	
}
//导出
export{
	Dog
}

index.html代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<script type="module">
				//导入Mouble2.js
				import {Dog} from "./js/Mouble2.js"
				let hello = new Dog("小王",18);
				hello.sayHello();//输出打招呼的方法
		</script>
	</body>
</html>

export default 用法

let show1 = function(){
	console.log("show1");
}
export default show1;
export let show2 = function(){
	console.log("show2");
}
export let show3 = function(){
	console.log("show3");
}

以上是定义了三个方法直接导出然后在index2.html里面调用那个默认的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="mouble">
			import {show2,show3} from "./js/Mouble3.js";
			

			import show1 from "./js/Mouble3.js";
			show1();
		</script>
	</body>
</html>

export与import可以在同一模块使用,复合使用export与import,也可以导出全部。

你可能感兴趣的:(ES6,es6/es7,es6,javascript)