Loading

前端模块化-导入导出

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)
posted @   青岑  阅读(228)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示