es6 模块化

什么是模块化

模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。

而JS中没有包的概念,换来的是 模块。

模块功能主要由两个命令构成:exportimport

  • export命令用于规定模块的对外接口。
  • import命令用于导入其他模块提供的功能。

export

比如我定义一个js文件:hello.js,里面有一个对象:

const util = {
    sum(a,b){
        return a + b;
    }
}

我可以使用export将这个对象导出:

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

当然,也可以简写为:

export const util = {
    sum(a,b){
        return a + b;
    }
}

export不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。

当要导出多个值时,还可以简写。比如我有一个文件:user.js:

var name = "jack"
var age = 21
export {name,age}

省略名称

上面的导出代码中,都明确指定了导出的变量名,这样其它人在导入使用时就必须准确写出变量名,否则就会出错。

因此js提供了default关键字,可以对导出的变量名进行省略

例如:

// 无需声明对象的名字
export default {
    sum(a,b){
        return a + b;
    }
}

这样,当使用者导入时,可以任意起名字

import

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

例如我要使用上面导出的util:

// 导入util
import util from 'hello.js'
// 调用util中的属性
util.sum(1,2)

要批量导入前面导出的name和age: 

import {name, age} from 'user.js'

console.log(name + " , 今年"+ age +"岁了")

但是上面的代码暂时无法测试,因为浏览器目前还不支持ES6 的导入和导出功能。除非借助于工具,把ES6 的语法进行编译降级到ES5,比如Babel-cli工具

我们暂时不做测试,大家了解即可。

posted @ 2020-08-23 17:48  叫我汤先森  阅读(168)  评论(0)    收藏  举报