js 模块化规范

为啥要需要模块化开发？

在ES6之前，JavaScript并未提供一种原生的、语言级别的模块化组织模式，而是将模块化的方法交由开发者来实现。因此出现了很多种JavaScript模块化的实现方式，比如，CommonJS、AMD、CMD等

Es6规范

1.默认导出export-default.js整体导出只能用一次:

默认导出：export default 默认导出成员

例如：

  let a =10
  let c = 20
  let d = 30
  function show(){}
  export default{
    a,c,show
  }

默认导入：import 接收名称 from ‘模板标识符’

例如：

  import m1 from './m1.js'  //JS文件相对路径
  console.log(m1)
  {a:10,c:20,show:[Function:show]}

2.按需导出与按需导入：

按需导出：

export let s1 = 10

按需导入：

import { s1 } from './moud.js'

as为导出变量重新命名

 // 例如：导入
  let a =10
  let c = 20
  let d = 30
  function show(){}
  export default{
    a,c,show
  }
  export let s1 = 30
  export let s2 = 20
  export function say() { }
  //例如：导出
  import m1,{s1,s2 as ss2,say} from './m1.js'   //JS文件相对路径
  console.log(m1)
  console.log(s1)
  console.log(ss2)
  console.log(say)

import()

import() 函数 是动态加载的，对标 nodejs 中的 require() 。

import() 返回一个 Promise 对象。

两者比较

import...from 是静态的，import()函数 是动态的
import ... from 命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行。所以，下面的代码会报错。

// 报错
if(x === 2) {
  import MyModual from './myModual'
}
上面代码中，引擎处理 import 语句是在编译时，这时不会去分析或执行 if 语句，所以 import 语句放在 if 代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import 和 export 命令只能在模块的顶层，不能在代码块之中（比如，在 if 代码块之中，或在函数之中）。

在 nodejs 中，require 是运行时加载模块，import 命令无法取代 require 的动态加载功能。
const path = '.' + fileName;
const myModual = require(path);
所以，import() 函数就这样被提出来了。

import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import() 函数与所加载的模块没有静态连接关系，这点也是与 import...from 语句不相同。

import() 函数类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

import() Tips

//import() 函数加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
  // ...
})

//import 函数也可以用在 async 函数之中。
async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

commonJS规范

  //nodejs遵循的模块化规范：
  //导出：
  module.exports=function(x){console.log(x);};
  //导入：
   var example = require('./example.js'); 

AMD规范

  //早期的异步模块化规范：
  define(['package/lib'],function(lib){
  functionfoo(){
  lib.log('hello world!');
  }
  return{foo:foo};
  });