【ES6】模块化

export default 一个js文件只导出一个

创建一个Box.js文件

export default	class Box{     //export default 进行暴露
	play(){
  	console.log("play");
  }
}

//只有前面带class的时候才起名字，当默认暴露的时候不需要名字 如：

export default{     //export default 进行暴露
	play(){
  	console.log("play");
  }
}

在html中

<script type="module">   //必须开启type="module"
  	import 自定义名字(Box) from "js文件路径";
		var b = new Box();
		b.play();   //这样就可以调用到js文件中的play方法
 </script>

        模块化加载是具有延时性的 当页面数据全部加载完后，才开始执行

export 一个js文件导出多个

创建一个Util.js文件

export var obj = {
	a:1,
  b:2.
  c:function(){
  	console.log(this.a+this.b)
  }
}

export function abc(){
   cosloe.log("abc");
}

export var arr=[1,2,3,4]

在html中

<script type="module">   //必须开启type="module"
  	import {obj,abc,arr} from "文件路径";  //类似于解构赋值，但又不是解构赋值
		console.log(obj);
		abc();
		console.log(arr);   //这样就会将js中的三个单独输出出来
 </script>

//当html中的script中有重名的时候，就需要使用as将引入的对象名进行起别名
	import {obj,abc,arr as arr2} from "文件路径";    //这样输出arr2才会将js中的数组输出出来

继承（extends）

import Aox from "路径"      //必须书写继承的那个路径
export default class Box extends Aox{  //这就表示Box继承于Aox
  	constructor (_name,_age){  //构造函数
      	super(_name);   //只要想在Aox的基础上添加自己独有的属性，就必须先进行super（） 表示先将自己的父亲运行一遍
    		this.age = _age
    }  //这就是继承中重写constructor构造函数
  
  	run(){
    	//Aox中也有一个run方法，该方法就是从那边继承过来的，而在Aox中，run方法的作用只是输出名字name
      //现在我还想输出age，就需要在以前run方法的基础上重写run方法
      super.play();   //意思就是将原先的run函数先执行一遍，然后在书写现在这个run独有的功能
      console.log(this.age);
    }
}

注意：

在自己定义的方法中，super（）可以放在上面先执行，也可以放在方法最底下最后执行；

但在constructor构造函数中，必须放在构造函数中的第一句先执行！！！！