> 文章列表 > 模块的导入导出、引入、使用、export、exports、default、require、import、module、as

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

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

文章目录

  • 前言
  • 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导出

导出

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

第一种引入方式

import { Modulea, Moduleb, Modulec } from "@/assets/js/export.js";new Modulea("模块A");
new Moduleb("模块B");
new Modulec("模块C");

第二种引入方式

import * as exporta from "@/assets/js/export.js";new exporta.Modulea("模块A");
new exporta.Moduleb("模块B");
new exporta.Modulec("模块C");

2、export default导出

导出

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

引入

import ExportDefault from "@/assets/js/export.js";let exportDefault = new ExportDefault("模块A");
exportDefault.newB("模块B");
exportDefault.newC("模块C");

3、单个export导出一

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


导出

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。


导出

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
}

引入

import ExportDefault from "@/assets/js/export.js";new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

5、module.exports导出

导出

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
}

引入

let ExportDefault = require("@/assets/js/export.js");new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

6、exports第一种导出

导出

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
}

引入

let ExportDefault = require("@/assets/js/export.js");new ExportDefault.ES.Modulea("模块A");
new ExportDefault.ES.Moduleb("模块B");
new ExportDefault.ES.Modulec("模块C");

7、exports第二种导出

导出

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;

引入

let ExportDefault = require("@/assets/js/export.js");new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

8、混合导出

导出

function add(a, b) {return a + b;
}function dist(a, b) {return a - b;
}export { dist };export default add;

引入

import add, { dist } from "@/assets/js/export.js";console.log(add(1, 5));
console.log(dist(7, 1));