ES6模块的导入、导出

模块:一个js文件就是一个模块,模块内部的成员都是相互独立,该文件内部的所有变量,外部无法获取。
模块化有两个核心:导出和导入

ES6 模块是编译时加载(静态加载),在编译时就能确定模块的依赖关系,以及输入和输出的变量。

export

export用于导出,可以输出变量、函数或类(class)

// 输出单个变量
export const title = '大数据可视化平台';

// 输出一组变量(推荐用法)
const author = 'Jack';
const year = 1958;
export {author,year}

//输出函数或类
function foo(content){
    ...
}
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}
export{Person}
//输出函数重命名  
export { foo as newFoo }

import

import用于导入模块,是编译阶段执行的(代码运行之前)

import命令具有提升效果,会提升到整个模块的头部,首先执行。

foo(); //不报错
import { title, author,year,foo } from '@/utils/index'

import可以使用as关键字重命名。

import { v1 as v2 } from '@/utils/index'

模块的整体导入:用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

import * as moduleObject from '@/utils/index'

export default(默认导出)

一个模块只能有一个默认输出,因此export default命令只能使用一次。

export default function foo() {
  console.log('foo');
}

export default可以和多个export共同使用(不推荐)

const author = 'Jack';
const year = 1958;
export default {author,year}

默认导入
import语句不需要使用大括号,接收名称可以是任意名称

import 接收名称 from '模块路径'

import foo from '@/utils/index'

引申:CommonJS

CommonJS 模块是运行时加载,规定每个模块内部,module变量(对象)代表当前模块。module变量的exports属性(即module.exports)是对外的接口。

Node 采用 CommonJS 模块规范,是服务器端一个具有代表性的实现

export或者module.exports导出

module.exports = {
	test(a, b){
		return a + b
	},
	test1(c, d){
		return c * d
	}
}
//不推荐使用
exports = function(x) {console.log(x)};

require 导入模块
require命令用于加载文件,后缀名默认为.js

let { test, test1 } require('module')

let example = require('./example.js');

注:如果是可以使用ES6的语法环境下,也可以使用import导入

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值