十年河东,十年河西,莫欺少年穷
学无止境,精益求精
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); },
输出