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

学无止境,精益求精

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


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 值

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



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


输出

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