第一节：JS模块化历史、CommonJs详解、AMD和CMD规范知悉

一. JS模块化历史

1. 什么是模块化？

(1) 到底什么是模块化、模块化开发呢？

 事实上模块化开发最终的目的是将程序划分成一个个小的结构；

 这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；

 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；

 也可以通过某种方式，导入另外结构中的变量、函数、对象等；

(2) 上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；

(3). 无论你多么喜欢JavaScript，以及它现在发展的有多好，它都有很多的缺陷：

 比如var定义的变量作用域问题；

 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；

 比如JavaScript没有模块化的问题；

(4). Brendan Eich 本人也多次承认过JavaScript设计之初的缺陷，但是随着JavaScript的发展以及标准化，存在的缺陷问题基本都得到了完善。

2. 模块化的历史

(1).在网页开发的早期， Brendan Eich 开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的： 这个时候我们只需要讲JavaScript代码写到<script>标签中即可； 并没有必要放到多个文件中来编写；甚至流行：通常来说 JavaScript 程序的长度只有一行。

(2).但是随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：

 ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染；

 SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现；

 包括Node的实现，JavaScript编写复杂的后端程序，没有模块化是致命的硬伤；

(3).所以，模块化已经是JavaScript一个非常迫切的需求：

 但是JavaScript本身，直到ES6（2015）才推出了自己的模块化方案；

 在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等；

3. 没有模块化带来的问题

  早期没有模块化带来了很多的问题：比如命名冲突的问题,当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）, 即：将函数包裹一下，然后立即执行，但也带来了 新的问题：

(1).我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；

(2).代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；

(3).在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；

代码分享：

模块1

/* let mouduleA = function () {
	let name = "ypf";
	let age = 18;
	return {
		name,
		age,
	};
}; */

// 包裹起来，立即执行，就成了立即执行函数
let mouduleA = (function () {
	let name = "ypf";
	let age = 18;
	return {
		name,
		age,
	};
})();

模块2

// 包裹起来，立即执行，就成了立即执行函数
let mouduleB = (function () {
	let name = "ypf2";
	let age = 20;
	return {
		name,
		age,
	};
})();

调用

(function () {
	if (mouduleA.name == "ypf") {
		console.log(mouduleB.name, mouduleB.age);
	}
})();

 

二. CommonJs详解

1. 简介

(1). CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。

   A.Node是CommonJS在服务器端一个具有代表性的实现；

   B.Browserify是CommonJS在浏览器中的一种实现；

   C.webpack打包工具具备对CommonJS的支持和转换；

(2).Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：

   A .在Node中每一个js文件都是一个单独的模块；

   B. 这个模块中包括CommonJS规范的核心变量：exports、module.exports、require；

   C. 我们可以使用这些变量来方便的进行模块化开发；

2. 基本用法

 (1). exports和module.exports可以负责对模块中的内容进行导出；【推荐直接使用module.export】

 (2). require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

导出模块

/* 
    模块导出
*/

const myName = "ypf";
const myAge = 18;
function sum(num1, num2) {
	return num1 + num2;
}

// 导出方案一：module.exports
module.exports = {
	myName,
	myAge,
	sum,
};

导入模块

/* 
    模块导入
*/

const data = require("./111.js");
console.log(data.myName);
console.log(data.myAge);
console.log(data.sum(10, 20));

console.log("---------------------------------");

// 解构
const { myName, myAge, sum } = require("./111.js");
console.log(myName);
console.log(myAge);
console.log(sum(10, 20));

3. module.exports和export的关系

(1). 内部原理

   CommonJS中是没有module.exports的概念的；但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；所以在Node中真正用于导出的其实根本不是exports，而是module.exports；因为module才是导出的真正实现者；最终进行导出的一定是  module.exports={xxxx}

(2). 二者关系

   因为module对象的exports属性是exports对象的一个引用；也就是说 module.exports = exports = require(xx)后的对象 【重点】

(3). 使用exports导出

剖析下面三种情况

/* 
    使用exports导出
*/

// 内部源码（最终能导出的一定是module.exports）
/* 
    module.exports = {};
    exports = module.exports;
 */

const myName = "ypf";
const myAge = 18;
function sum(num1, num2) {
	return num1 + num2;
}

// 写法1：可以导出
/* 
    exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出。
    剖析：根据上述的内部源码，module.exports和exports指向同一个内存空间，所以通过给exports对象添加属性的方式，可以实现导出, 因为内存空间不变，最终是通过module.exports导出
*/

exports.myName = myName;
exports.myAge = myAge;
exports.sum = sum;

// 写法2: 导出失败
/* 
    剖析：将一个对象赋值给exports，相当于开辟了一个新的内存空间，exports指向这个新的空间, 与module.exports断了联系，所以不能导出
*/
exports = {
	myName,
	myAge,
	sum,
};

// 写法3： 导出失败
/* 
    剖析：最终导出的一定是module.exports导出，但这里把module.exports = {};赋值空对象了，所以导出失败
*/
exports.myName = myName;
exports.myAge = myAge;
exports.sum = sum;
module.exports = {};

导入代码同上 

4. require详解

require(X) 分三类：

(1). X是一个Node核心模块，比如path、http, 直接返回核心模块，并且停止查找

(2). X是以 ./ 或 ../ 或 /（根目录）开头的

  第一步：将X当做一个文件在对应的目录下查找；

    1.如果有后缀名，按照后缀名的格式查找对应的文件

    2.如果没有后缀名，会按照如下顺序：

        1> 直接查找文件X

        2> 查找X.js文件

        3> 查找X.json文件

        4> 查找X.node文件

  第二步：没有找到对应的文件，将X作为一个目录

        查找目录下面的index文件

        1> 查找X/index.js文件

        2> 查找X/index.json文件

        3> 查找X/index.node文件

        如果没有找到，那么报错：not found

(3) 直接是一个X（没有路径），并且X不是一个核心模块，则去npm下载的包中查找

代码分享：


// 情况一: 核心模块
{
	const path = require("path");
	const fs = require("fs");
	fs.writeFile("./test2.txt", "lmr111111111", err => {
		if (err != null) {
			console.log(err);
			return;
		}
		console.log("文件内容写入成功");
	});
}

// 情况二: 路径 ./ ../ /
{
	const abc = require("./abc");
	console.log(abc);
}

// 情况三: X不是路径也不是核心模块 (这里不下载演示了)
// {
// 	const axios = require("axios");
// }

5. 模块加载过程

结论一：模块在被第一次引入时，模块中的js代码会被运行一次

结论二：模块被多次引入时，会缓存，最终只加载（运行）一次

    为什么只会加载运行一次呢？

    这是因为每个模块对象module都有一个属性：loaded为false表示还没有加载，为true表示已经加载；

结论三：如果有循环引入，那么加载顺序是什么？ 

    如果出现右图模块的引用关系，那么加载顺序是什么呢？

    这个其实是一种数据结构：图结构；

    图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS, breadth first search）；

    Node采用的是深度优先算法：main -> aaa -> ccc -> ddd -> eee ->bbb

 

6. commonjs的缺点

(1).CommonJS加载模块是同步的

    同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；

    这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快；

(2).如果将它应用于浏览器呢？

    浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行；

    那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作；

(3).所以在浏览器中，我们通常不使用CommonJS规范：

    当然在webpack中使用CommonJS是另外一回事；

    因为它会将我们的代码转成浏览器可以直接执行的代码；

 

三. AMD规范【了解】

1. 简介

 AMD主要是应用于浏览器的一种模块化规范：

 AMD是Asynchronous Module Definition（异步模块定义）的缩写；它采用的是异步加载模块；事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了；

 AMD实现的比较常用的库是require.js和curl.js；

2. 应用

   data-main属性的作用是在加载完src的文件后会加载执行该文件

   require.js的使用：引用代码如下

   <script src="./lib/require.js" data-main="./index.js"></script>

导出代码

define(function() {
  const name = "why"
  const age = 18
  function sum(num1, num2) {
    return num1 + num2
  }

  return {
    name,
    age,
    sum
  }
})

导入代码

require.config({
	baseUrl: "",
	paths: {
		foo: "./src/foo",
	},
});

// 或者
// require.config({
//   paths: {
//     foo: "./foo",
//     bar: "./bar"
//   }
// })

require(["foo"], function (foo) {
	console.log("main:", foo);
});

 

四. CMD规范【了解】

1. 简介

    CMD规范也是应用于浏览器的一种模块化规范：

    CMD 是Common Module Definition（通用模块定义）的缩写；它也采用了异步加载模块，但是它将CommonJS的优点吸收了过来； 但是目前CMD使用也非常少了；

    CMD也有自己比较优秀的实现方案：SeaJS

2. 应用

导出代码

define(function(require, exports, module) {
  const name = "why"
  const age = 18
  function sum(num1, num2) {
    return num1 + num2
  }

  // exports.name = name
  // exports.age = age

  module.exports = {
    name,
    age,
    sum
  }
});

导入代码

define(function(require, exports, module) {
  const foo = require("./foo")
  console.log("main:", foo)
})

 

 

 

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
 
posted @ 2022-04-11 16:47  Yaopengfei  阅读(288)  评论(1)  编辑  收藏  举报