示例
逻辑说明:
test4.html
中引用了外部js文件 test4index.js
test4index.js
中调用了 test4util.js
中的模块(变量 函数 类)
HTML文件:test4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="test4index.js" type="module"></script>
</head>
<body>
</body>
</html>
<script src="test4index.js" type="module"></script>
引入外部js时中一定要写 type="module"
否则会报错
js文件:test4index.js
//es6 中的模块 当前的模块中引入其他模块中的 变量 函数 类
//使用 import 引入其他模块导出的内容
import{stat,method1,method2,pointa} from './test4util.js'//引入test4util.js
//调用test4util.js中的 变量 函数 类
console.log(stat)
method1();
method2('我是一个路径');
let p=new pointa(1,2);
console.log(p.toString())
当前的模块中引入其他模块中的 变量 函数 类 使用
import 引入
其他模块导出的内容
引入起了别名的 变量 函数 类时,import中只能通过别名应用
import中引用别的js文件中的变量 函数 类时,也可以通过as
关键字起别名 (import{method1 as 别名})
js文件:test4util.js
//es6
//模块中可以定义变量 函数 类
let stat='test4util let stat';
function method1(){
console.log('test4util method1 空参方法');
}
function method2(src){
console.log('test4util method2 有参方法 src='+src);
}
class pointa{
constructor(x,y){
this.x=x;
this.y=y;
console.log('test4uti 有参构造方法');
}
toString(){
return '('+this.x+','+this.y+')';
}
}
//模块中定义的 变量 函数 类 都需要导出 (export)
export{stat,method1,method2,pointa}
模块中定义的 变量 函数 类 都需要
导出 (关键字export) 后才能被别的js文件引用
导出时可以起别名 用 as
关键字 (exprot{stat as 别名})这时,在别的js文件中引用时,只能通过别名进行引用
引入和导出所有内容可以使用 *
作为通配符(import * export * )
运行HTML文件后 控制台显示结果:
扩展
//输出一个快速的方法目录
export default function help(){
console.log('stat,method1,method2,pointa');
}
default关键字修饰的导出的内容,在import时,可以随便起名,不要求必须与export的名字一样(在一个js文件中,default关键字定义的属性,只能有一个)
import aaa from '路径';
aaa();
通过aaa引入help(),调用aaa()相当于调用help();