Es6 export、 import 及 module.exports 、require 的配对使用

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

 

Es6 模块化，常用的  export、 import 及 module.exports 、require 详情参考：https://es6.ruanyifeng.com/#docs/module#import-%E5%91%BD%E4%BB%A4

1、export 英文意思为导出、输出，意思是指将我们封装的模块导出，供其他JS调用，当其他JS调用时，使用 import 引入导出的模块。我们可以使用export 导出一个方法，一个类，异或是一个常量。如下：

export  function common(params) {
  console.log(params)
};

export let commcls=new class{
  constructor(name,sex,age=27){
    this.name=name;
    this.sex=sex;
    this.age=age;
  }
  GetName(){
    return "我的名字是"+ this.name;
  }
  get Money(){
    return "我是属性钱，大家都爱我"
  }
  
};

export  const pi=3.1415926;

上述代码中，既有函数导出，亦有Js类的导出，还有常量的导出。

2、 import 接收

接收的语法有全部接收及部分接收

2.1、

全部接收，使用 * 关键字

import * as common from "../../utils/common.js"

首选i，我们再接收的JS中打印接收到的 common 值

 

 

 common 是个对象，里面有三个属性，common.commoncls 为 class 类，common.common 为函数 function ，pi为常量

因此，在使用时，我们可以通过 common. 的方式进行调用

    onLoad: function (options) {
    console.log(common)
    common.common("大爷的")
    common.commcls.name="陈大六"
    common.commcls.age="27"
    common.commcls.sex="男"
    console.log(common.commcls.name+""+common.commcls.age+common.commcls.sex);
    let result= common.commcls.GetName();
    console.log(result);
    //
    console.log(common.pi)
}

2.2、

部分接收，等价于解构赋值，common 解构为 funtion ，commoncls 解构为 calss 类，pi 解构为 常量

，语法如下：

 import {common,commcls,pi}  from "../../utils/common.js"

使用如下：

  onLoad: function (options) {
    common("大爷的")
    commcls.name="陈大六"
    commcls.age="27"
    commcls.sex="男"
    console.log(commcls.name+""+commcls.age+commcls.sex);
    let result= commcls.GetName();
    console.log(result);
    //
    console.log(pi)
  },

三：module.exports 、require 的配对使用

module.exports 导出的是对象，对象采用键值对的方式。

module.exports = {
  Bird: new class {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }

    jiao(){
      console.log("叽叽喳喳")
    }
  },
  Pi:3.1415926,
  GetData:  (a,b)=>{
    console.log(a)
    console.log(b)
  }
}

上述module.exports 导出的结果为： Bird 为 class 类，pi 为常量 const ，Getdata() 为 箭头函数 function 

require 接收也和import一致，分为部分接收及全部接收

// 解构赋值-部分接收
let {Bird, Pi} = require("../../utils/base.js")
//全部接收 整体为一个对象
let baseData = require("../../utils/base.js")

测试如下：

  onLoad: function (options) {
    console.log(Pi)
    console.log(baseData);
  },

输出

 

 

 @天才卧龙的博客