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

    输出

     @天才卧龙的博客

  • 相关阅读:
    failed to push some refs to 'git@github.com:laniu/liuna.git'报错原因
    ECMAScript和JavaScript的关系
    js面试总结
    第16章 脚本化css
    代理模式
    SQL
    VS
    Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
    SQL
    C#
  • 原文地址:https://www.cnblogs.com/chenwolong/p/export.html
Copyright © 2020-2023  润新知