文章目录
1. 概述
模块化进行开发,解决上面两大问题
模块化:单独的功能封装成一个模块文件,模块之间的变量相互隔离,通过特定的接口进行模块间的组装
2. ES6模块化规范
2.1 暴露某个模块的成员变量、方法(默认、自定义)
one.js
var a = 10;
var b =20;
function oneMethod(){
console.log("我是one.js的方法")
}
// 默认导出 - 暴露获取得到是个对象
export default {
a,
b,
oneMethod
}
// 自定义导出 - 暴露的是变量
export var a1 = a;
export var b1 = b;
two.js
import one,{
a1,b1} from "./one.js"
console.log(one);
one.oneMethod();
console.log(a1);
console.log(b1);
demo1.html - 运行此界面打开控制台即可
<script src="./js/two.js" type="module"></script>
<script type="text/javascript" >
</script>
2.2 运行某个模块的内容 - 不需暴露方法
one.js
for(var i = 0; i < 10; i++) {
console.log(i);
}
two.js
import "./one.js"
demo1.html
<!--1. 引入库文件-->
<script src="./js/two.js" type="module"></script>
<script type="text/javascript" >
</script>
3. 导入 - import只有js文件才可以简写后缀名
导入当前目录下list.js包
import list from './list';
//等价于
var list = require('./list');
Vue项目中
// 表示在list目录中有 index.js 或者 当前目录的list.js文件
import list from './list';