526互联

JavaScript中的module.export

发布时间 2023-07-04 20:16:16作者: unuliha

module

JavaScript一直没有模块（module）体系，无法将一个大工程拆分成互相依赖的小文件，再用简单的方法将它们拼装起来。ES6在语言规格的层面上实现了模块功能，成为浏览器和服务器通用的模块解决方案。

  // ES6 模块
  import { stat,exists,readFile } from 'fs'

ES6模块设计的思想是尽量静态化，使得编译时就能确定模块的依赖关系，以及输入输出的变量。ES6编译时可以完成模块加载，比CommonJS的“运行时加载”的效率更高，但是也导致ES6模块本身无法被引用，因为它不是对象。

module.export

模块功能主要由两个功能构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。 该文件内部的所有变量，外部无法获取。如果希望外部能够获取模块内部的某个变量，就必须用export关键字输出该变量。

  // 推荐写法
  var a = 1;
  var b = 2;
  var c = 3;
  export {a,b,c}

export导出可以更改名字

// c可以被导出两次  
export {a as a1,b as b2,c as c3, c as c4}

export不能导出值，只能导出接口，function和class一样

  //错误写法1
  var a = 1;
  export a;

  //错误写法2
  export 1;

  // 正确写法1
  export var a = 1;
  
  // 正确写法2
  var a = 1;
  export {a};

  // 正确写法3
  var n = 2;
  export {n as m}

export输出的接口和其对应的值是动态绑定关系，可以通过接口实时拿到接口内部的值

// foo的值会实时更改
export var foo = 'bar';
setTimeout(()=> foo = 'baz',500)

export命令可以出现在模块的任何位置，只要位于模块顶层就行，即不能出现在块级作用域内

function foo() {
  export default 'bar' //SyntaxError
}

foo()