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

1. 概述

传统开发问题

命名冲突

文件依赖

模块化进行开发，解决上面两大问题

模块化：单独的功能封装成一个模块文件，模块之间的变量相互隔离，通过特定的接口进行模块间的组装

模块化优势

代码重用

方便维护

2. ES6模块化规范

ES6模块化定义

每个js是一个独立的模块

import关键字：导入模块成员

语法：import 接收名称 from '导入的js文件路径'

export关键字：暴露模块成员

语法（一个模块一个）：export default { 需要暴露的变量、方法属性名}

语法（可写多个）：export var 导出的名称 = 变量名

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

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