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);
  },

輸出

 

 

 @天才卧龍的博客