Debbl/JS模块化.md

## JS模块化.md

      
    Raw
  

              JS模块化.md
            
          
    CommonJS 模块化

导出


导出的是对象的引入，指向同一个对象
exports={} 是错误的


module.exports = {};
exports.name = name;
// 重点 最终导出的一定的是 module.exports
exports = {} // 这个导出是错误的，exports 指向了其他的对象，无法修改 module.epxorts 所指向的对象
// 源码中
module.exports = {};
exports = module.exports;
导入


require 是一个函数，可以自动添加一些后缀名（分情况）
如果是文件夹，会自动找 index.js
node_modules 中的模块会一层层的向上找 node_modules 文件夹中的模块


const {} = require('');
指向同一个对象演示


foo.js

const info = {
  name: 'foo',
  age: 18,
};
setTimeout(()  => {
  info.name = 'foo1';
}, 1000);
module.exports = info;

bar.js

const foo = require('./foo.js');
console.log(foo.name); // foo
setTimeout(() => {
  console.log(foo.name); // foo1
}, 3000);
模块加载过程


模块在被第一次引入时，模块中的js代码会被运行一次
模块被多次引入时，会缓存，最终只加载（运行）一次
如果有循环引入，采用深度优先算法

CommonJS 的缺点

CommonJS 加载模块是同步的


同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行
这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快

浏览器中不适用


浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行
那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作
即在浏览器中通常不使用 CommonJS 规范

ES Module

特点


使用 import 和 export 关键字
编译期的静态分析，加入了动态引入的方式
采用 ES Module 将自动使用严格模式 "use strict";
HTML 引入的 script 标签需要添加 type="module"

导出


export


在语句声明语句之前添加 export
export {} 这里的 {} 里面不是一个对象，是 export 固定的语法
导出时起别名
export {
  name as Aname,
  age as Aage
}


导入


import


import {} from '模块地址' 这里的 {} 里面也不是对象
起别名 import { name as Aname } from '模块地址'
import * as moduleA from '模块地址' 整个模块
默认导出 dafault 只能有一个
export default name;


import() 函数


import 加载一个函数必须放在文件前面，这是因为ES Module在被JS引擎解析时，就必须知道它的依赖关系，无法放在 if 等语句中，但我们可以使用 import() 函数来动态的来加载某一个模块,返回的结果是一个 Promise。

import.mata ES 11


里面有一些信息 url

导入和导出结合使用

export { name as Aname } from 'foo.js';