一、模块化开发
-
定义:具有相同属性和行为的事物的集合
-
在前端中,将一些属性比较类似和行为比较类似的内容放在同一个
js
文件里面,把这个js
文件称为模块 -
目的:为了每个
js
文件只关注与自身有关的事情,让每个js
文件各行其职 -
模块化:指的就是遵守
commonjs
规范,解决不同js
模块之间相互调用问题 -
CommonJS:
A.js
文件中调用另一个B.js
文件,一定要在A.js
中引入B.js
require("B.js");
- 另一个被调用的
js
,也就是B.js
一定要对外提供接口。
module.exports=B;
B.js
var b = "Hello,I'm module B.";
module.exports = b;//暴露一个接口,与b对接。这个接口既可以是函数,也可以是对象,甚至是数组。
A.js
var _b = require("./B.js");//实际过程中应当是B.js相对于A.js的路径,这比使用绝对路径去获取要规范得多//此时_b获得了B.js的接口,这个接口指向B.js中的变量bconsole.log( _b );//"Hello,I'm module B.";
-
模块间相互调用,协同工作,实现某特定功能。
-
AMD规范:
Async Module Define
异步模块声明 -
CMD规范:
Common Module Define
公共模块声明 -
模块化的核心价值:模块化最核心的价值在于解决不同文件之间的分工和调用问题,即依赖关系。
-
requireJS
和SeaJS
都是在前端实现模块化,相当于一个前端的js
模块化加载器,和webpack
不一样,webpack
是通过nodejs
将文件打包的。
二 、 ES6模块和 CommonJS 模块有哪些差异?
CommonJS
模块是运行时加载,ES6
模块是编译时输出接口。
2.CommonJS
模块输出的是一个值的拷贝,ES6
模块输出的是值的引用。ES6
模块自动采用严格模式,无论模块头部是否写了"use strict";
require
可以做动态加载,import
语句做不到,import
语句必须位于顶层作用域中。ES6
模块的输入变量是只读的,不能对其进行重新赋值。- 当使用
require
命令加载某个模块时,就会运行整个模块的代码。 - 当使用
require
命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS
模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。