ES6模块语法标准 - 模块化、导入、暴露

文章目录

• • • 1. 概述
    • 2. ES6模块化规范
    • • 2.1 暴露某个模块的成员变量、方法(默认、自定义)
      • 2.2 运行某个模块的内容 - 不需暴露方法
    • 3. 导入 - import只有js文件才可以简写后缀名

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';