模块的导入导出、引入、使用、export、exports、default、require、import、module、as

news/2024/7/11 1:07:22 标签: javascript, 前端, vue.js, node.js, es6

文章目录

  • 前言
  • 1、多个export导出
  • 2、export default导出
  • 3、单个export导出一
  • 4、单个export导出二
  • 5、module.exports导出
  • 6、exports第一种导出
  • 7、exports第二种导出
  • 8、混合导出


前言

export/import: 只支持es6的导出引入
module.exports/exports: 只支持node的导出
require: 支持nodees6的引入


1、多个export导出

导出

javascript">export class Modulea {
  constructor(params) {
    console.log(params);
  }
}

export class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

export class Modulec {
  constructor(params) {
    console.log(params);
  }
}

第一种引入方式

javascript">import { Modulea, Moduleb, Modulec } from "@/assets/js/export.js";

new Modulea("模块A");
new Moduleb("模块B");
new Modulec("模块C");

第二种引入方式

javascript">import * as exporta from "@/assets/js/export.js";

new exporta.Modulea("模块A");
new exporta.Moduleb("模块B");
new exporta.Modulec("模块C");

2、export default导出

导出

javascript">class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

export default class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

引入

javascript">import ExportDefault from "@/assets/js/export.js";

let exportDefault = new ExportDefault("模块A");
exportDefault.newB("模块B");
exportDefault.newC("模块C");

3、单个export导出一

不使用default,引入方式同第一种。


导出

javascript">class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }
  
  newB(params) {
    new Moduleb(params);
  }
  
  newC(params) {
    new Modulec(params)
  }
}

export {
  Modulea,
  Moduleb,
  Modulec
}

4、单个export导出二

使用default。


导出

javascript">class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

export default {
  Modulea,
  Moduleb,
  Modulec
}

引入

javascript">import ExportDefault from "@/assets/js/export.js";

new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

5、module.exports导出

导出

javascript">class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

module.exports = {
  Modulea,
  Moduleb,
  Modulec
}

引入

javascript">let ExportDefault = require("@/assets/js/export.js");

new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

6、exports第一种导出

导出

javascript">class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

exports.ES = {
  Modulea,
  Moduleb,
  Modulec
}

引入

javascript">let ExportDefault = require("@/assets/js/export.js");

new ExportDefault.ES.Modulea("模块A");
new ExportDefault.ES.Moduleb("模块B");
new ExportDefault.ES.Modulec("模块C");

7、exports第二种导出

导出

javascript">class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

exports.Modulea = Modulea;
exports.Moduleb = Moduleb;
exports.Modulec = Modulec;

引入

javascript">let ExportDefault = require("@/assets/js/export.js");

new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

8、混合导出

导出

javascript">function add(a, b) {
  return a + b;
}

function dist(a, b) {
  return a - b;
}

export { dist };

export default add;

引入

javascript">import add, { dist } from "@/assets/js/export.js";

console.log(add(1, 5));
console.log(dist(7, 1));

http://www.niftyadmin.cn/n/242294.html

相关文章

使用华为云免费资源训练Paddle UIE模型

一、创建虚拟环境 好习惯,首先创建单独的运行环境 conda create -n uie python3.10.9 conda activate uie 二、安装paddle框架及paddlenlp 2.1 参考官方文档安装paddle 开始使用_飞桨-源于产业实践的开源深度学习平台 首先查看自己服务器cuda版本,…

将一个列表的数据复制到另一个列表

1 问题 将一个列表的数据复制到另一个 2 方法 代码清代 import copy a [1,2,3,4,[a,b]] b a c a[:] d copy.copy(a) e copy.deepcopy(a) a.append(5) a[4].append(c) print(a,b) print(b,d) print(c,c) print(d,d) print(e,e) 3 结语 利用import函数调用copy将列表中的数据…

2023年3月青少年软件编程(Python) 等级考试试卷(一级)

一、单选题(共25题&#xff0c;共50分) 1. 在启动IDLE后&#xff0c;看到下列哪一个提示字符&#xff0c;表明已经进入Python Shell交互模式&#xff1f;&#xff08;B &#xff09;&#xff08;2分&#xff09; A.<<< B.>>> C.^^^ D.》》》 2. 某同…

jdk-FuteureForkJoin框架源码学习

背景 日常的计算任务大部分都是串行来执行&#xff0c;但是如果一个复杂的任务需要进行拆分为多个小任务&#xff0c;那么以往是自行写一个递归或者循环计算等算法来实现&#xff0c;随着这类需求的提升&#xff0c;java7中引入了ForkJoin框架来支持这类计算&#xff0c;可以比…

进程,线程,协程【笔记】【个人理解】

由于简历上写了一个有关协程的项目&#xff0c;结果面试的时候疯狂被问协程&#xff08;然而我不太懂呜呜呜&#xff09;&#xff0c;直接就被问烂了… 下面再次捋一捋进程、线程、协程。 &#xff08;以下是个人理解&#xff0c;欢迎指正。&#xff09; 问题展开&#xff1a…

光伏太阳能直流浪涌保护器应用方案

由于用于光伏装置的直流电涌保护设备必须设计为完全暴露在阳光下&#xff0c;因此它们极易受到雷电的影响。光伏阵列的容量与其暴露的表面积直接相关&#xff0c;因此闪电事件的潜在影响随着系统规模的增加而增加。在照明频繁发生的情况下&#xff0c;未受保护的光伏系统可能会…

VOC数据格式介绍

我们经常需要使用自己通过标注工具&#xff08;如LabelImg、LabelMe等&#xff09;生成的数据集或者一些开源数据集进行目标检测模型的训练&#xff0c;这些自定义数据集格式多样且不具有一致性&#xff0c;而目标检测的数据格式相比于其他任务又复杂很多&#xff0c;因此&…

基于GPT的人工智能进化历程:从ChatGPT到AutoGPT

近年来&#xff0c;随着人工智能技术的快速发展&#xff0c;越来越多的自然语言处理技术被应用到了实际生活中。其中&#xff0c;GPT模型就是自然语言处理技术中的一种重要模型&#xff0c;它可以用于许多任务&#xff0c;例如&#xff1a;文本生成、问答系统、语言翻译等。而在…