摘要：看到阮一峰大佬的内容里有这么一段目前还是不很理解为什么或者就可以建立一一对应的关系。和的区别之前一直没有考虑过他们之前的区别，今天又仔细研读了一下阮一峰的关于模块的讲解，觉得说的很好。
最近在看vue源码，然后看到了rollup，然后又看到了模块化的概念，所以对模块化的概念进行一个学习和总结。以下就是我的学习成果，如果有什么不对的欢迎指教。
模块化概念模块化存在的意义：开发者希望在开发过程中只需要关注自己的核心业务逻辑，其他的可以直接加载别人写好的模块。但是Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了（借鉴而来）
nodejs一个应用于服务器端编程被提出时，Javascript模块化也因此诞生，CommonJS模块规范被提出。在es6模块之前，CommonJS统一了模块化编程。
下面我要简述一下CommonJS、AMDCMD和ES6 Module
同步加载 CommonJS在CommonJS中有一个全局的方法require()，可以用于加载模块。但是这个方法在浏览器端具有一定的局限性，因为JavaScript是解释性语言，从上而下直接执行。此时的困惑是
后来我得到的答案：
最后我的笔记：
CommonJS是一种同步加载的方式，在服务器端模块是存在本地的，这样读取时间很快，需要等待时间很短，可以是同步加载，但是在浏览器端，依赖的模块是存放在服务器端的，读取的时间依赖网速，如果网速不好的话，需要等待很久。javascript就会报错了，所以在浏览器端需要异步加载的方式
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://www.ucloud.cn/yun/109618.html
摘要：下面列举了游戏开发中常见的岗位以及两条常见的协作开发的流水线其实学习游戏引擎，前期对于任何岗位来说路线都是相似的，基本上就是一个熟悉基本操作理解基本概念拓展专业知识的过程。当然这不是绝对的，任何引擎的开始阶段和大成阶段都是相似的。 这是【游戏开发那些事】第51篇原创 前言：游戏引擎，表面...
摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐 以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...
摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐 以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...
摘要：本文将详细解析深度神经网络识别图形图像的基本原理。卷积神经网络与图像理解卷积神经网络通常被用来张量形式的输入，例如一张彩色图象对应三个二维矩阵，分别表示在三个颜色通道的像素强度。 本文将详细解析深度神经网络识别图形图像的基本原理。针对卷积神经网络，本文将详细探讨网络 中每一层在图像识别中的原理和作用，例如卷积层(convolutional layer)，采样层(pooling layer)，...
阅读 643·2023-04-25 20:18
阅读 1898·2021-11-22 13:54
阅读 2330·2021-09-26 09:55
阅读 3490·2021-09-22 15:28
阅读 2753·2021-09-03 10:34
阅读 1559·2021-07-28 00:15
阅读 1397·2019-08-30 14:25
阅读 1086·2019-08-29 17:16
