前端模块化-导入导出

1、CommonJs实现导入导出

导出：通过一个对象导出
module.exports = {
  flag : true,
  test(a,b){
    return a + b;
  },
  demo(a,b){
    return a * b
  }
}

导入
let {test,demo,flag} = require('moduleA')
等价于

let _ma = require('moduleA')
let test = _ma.test

 

2、ES的导入导出

1）export的基本使用

export指令用于导出变量，函数或者是类

导出变量

var name = '小明'
var age = 18
var flag = true

//1、导出方式一：
export {
  flag,age 
}

//2、导出方式二
export var num1 = 1000;
export var height = 1.88

导出函数和类

export function mul(num1,num2) {
  return num1 * num2
}

export class Person {
  run(){
    console.log("在快乐的奔跑....");
  }
}

2）export default的使用

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名

这个时候就可以使用export default

export default function(){
    console.log("default function")
}

使用
import myFun from './info.js'  //myFun是自己对导出的函数取的名字
myFun()

【注意】 export在一个模块中，不能同时存在多个

3）import的使用

import指令用于导入模块中的内容

import {age,name,height} from "./info.js"

可以通过*导入一个模块中所有导出的变量,通常会给这个*起一个别名

import * as info from "./info.js"

console.log(info.flag)