模块化的进修和明白

2019年9月1日 250次阅读 来源: 我是大哥的女朋友

近来在看vue源码，然后看到了rollup，然后又看到了模块化的观点，所以对模块化的观点举行一个进修和总结。以下就是我的进修效果，假如有什么不对的迎接指教。

模块化观点

模块化存在的意义：开辟者愿望在开辟过程当中只须要关注本身的中心营业逻辑，其他的能够直接加载他人写好的模块。然则Javascript不是一种模块化编程言语，在es6之前，它是不支持”类”（class），所以也就没有”模块”（module）了（自创而来）

nodejs一个应用于服务器端编程被提出时，Javascript模块化也因而降生，CommonJS模块范例被提出。在es6模块之前，CommonJS一致了模块化编程。

下面我要简述一下CommonJS、AMDCMD和ES6 Module

同步加载 CommonJS

在CommonJS中有一个全局的要领require()，能够用于加载模块。然则这个要领在浏览器端具有肯定的局限性，由于JavaScript是解释性言语，从上而下直接实行。此时的疑心是

《模块化的进修和明白》

厥后我获得的答案：
《模块化的进修和明白》

末了我的笔记：
CommonJS是一种同步加载的体式格局，在服务器端模块是存在当地的，如许读取时候很快，须要守候时候很短，能够是同步加载，然则在浏览器端，依靠的模块是存放在服务器端的，读取的时候依靠网速，假如网速不好的话，须要守候良久。javascript就会报错了，所以在浏览器端须要异步加载的体式格局

module.exports和exports 模块导出

let num = 0
function add (a, b) {
  return a + b
}
module.exports = {
  num: num,
  add: add
}

exports 和 module.exports的区分:Node为每个模块都供应了一个exports变量，指向module.exports。

以上的写法module.export尝试写成：

// 效果报错
let num = 0
function add (a, b) {
  return a + b
}
exports = {
  num: num,
  add: add
}

第二种写法：

// 效果胜利
let num = 0
function add (a, b) {
  return a + b
}
exports.num = num
exports.add = add

node中，exports指向module.exports。假如直接将一个对象赋值给exports，那末exports本来指向module.exports会被损坏，如许这两种之间就没有联系了，就会报错。假如非要想用exports的话，能够直接给exports增加属性。

require 模块导入

let math = require('./math')

异步加载

  • AMD/RequireJS 异步加载 依靠前置、提早实行
  • CMD/sea.js 异步加载 依靠就近、耽误加载

ES6 Module

import 导入

罕见用法：

// 悉数加载
import * as util from 'xxx'
import AA from 'yyy'
// 按需加载
import { A, B } from 'xxx'

import * as aa from ‘xxx’的语法，会将xxx文件内export的函数整合成一个对象。
import AA from ‘yyy’，引入的是export default的函数

import 在编辑时就实行的，所以：

foo()
import { foo } from 'xxx'

不会报错，由于import { foo } from ‘xxx’在编辑时就实行了，foo()是在运行时才实行。

import()

import敕令是在编辑时就会实行的，所以没法做到放到if代码中或许函数中，

if (a) {
    import { foo } from 'xxx'
}
// 会报句法毛病

import export只能在模块的顶层，不能够在代码块中，如许就没法完成运行时动态加载模块（前提加载）。 => import()的涌现
运用import()能够相似node里的require()，能够动态加载且import()是异步加载。import()加载模块胜利今后，这个模块会作为一个对象当then要领的参数。

import('xxx').then(module => {
    ...
})

export 暴露模块

export 划定的时对外的接口，必需模块内部的变量竖立一一对应关联。看到阮一峰大佬的内容里有这么一段：

《模块化的进修和明白》

现在照样不很明白：为何export var m = 1 或许export function aa (){}就能够竖立一一对应的关联。

CommonJS和ES6 Module的区分

之前一向没有斟酌过他们之前的区分，本日又细致研读了一下阮一峰的es6关于模块的解说，以为说的很好。
ES6的设想头脑是只管的静态化，在编译时就能够肯定模块之间的依靠关联，以及输出和输入的变量
CommonJS、AMD、CMD只能在运行时才能够肯定模块之间的加载关联。

// CommonJS
let { stat, exists, readFile } = require('fs');
// ES6
import { stat, exists, readFile } from 'fs';

第一个和第二的区分：
CommonJS是将fs模块团体加载出来天生一个对象，然后在这个对象读取里找stat, exists, readFile要领，这类就是运行时加载
ES6模块会只在fs中加载stat, exists, readFile这三个要领，不会加载其他要领，这类就是编辑时加载

    原文作者：我是大哥的女朋友
    原文地址: https://segmentfault.com/a/1190000019216621
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞