模块的导入导出、引入、使用、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));

你可能感兴趣的:(web,Vue,JavaScript,javascript,前端,vue.js,node.js,es6)