模块化简介
为什么模块化
随着前端代码越来越简单，咱们迫切希望解决以下几个问题
- 全局变量净化（多人单干）
- 抽出公共代码（封装）
- 缩小申请次数（缩小script标签）
一个好的模块化计划，必须要能解决依赖问题以及加载程序问题
模块式历史
IIFE： 应用自执行函数来编写模块化，特点：在一个独自的函数作用域中执行代码，防止变量抵触
如何解决依赖，能够让一个依赖裸露到windows上，而后当做参数传入到另外一个须要此依赖的匿名函数里
如何解决加载程序呢，这个有两个计划，要么用defer，等全副加载完再运行，要么程序的摆放script标签，
(function(){
return {
data:[]
}
})()AMD： 应用requireJS 来编写模块化，特点：提前执行，前置依赖。
define('./index.js',function(code){
// code 就是index.js 返回的内容
})CMD： 应用seaJS 来编写模块化，特点：提早执行，就近依赖。
define(function(require, exports, module) {
var indexCode = require('./index.js');
});CommonJS： nodejs 中自带的模块化。
var fs = require('fs');UMD：兼容AMD，CommonJS 模块化语法。
UMD的实现很简略：
- 先判断是否反对Node.js模块格局（exports是否存在），存在则应用Node.js模块格局。
- 再判断是否反对AMD（define是否存在），存在则应用AMD形式加载模块。
- 前两个都不存在，则将模块公开到全局（window或global
ES Modules： ES6 引入的模块化，反对import 来引入另一个 js 。
import a from 'a';commonjs
用法
Node 利用由模块组成，采纳 CommonJS 模块标准。每个文件就是一个模块，有本人的作用域。在一个文件外面定义的变量、函数、类，都是公有的，对其余文件不可见
裸露模块：module.exports=value 或者 exports.xxx = value
引入模块 require(xxx)
特点
- 所有代码都运行在模块作用域，不会净化全局作用域。
- 模块能够屡次加载，然而只会在第一次加载时运行一次，而后运行后果就被缓存了，当前再加载，就间接读取缓存后果。要想让模块再次运行，必须革除缓存。
- 模块加载的程序，依照其在代码中呈现的程序。
commonjs的繁难实现
commonjs本质就是一个立刻执行函数，包裹住被执行的文件，让文件外面的内容通过module的exports属性裸露进去
let path = require('path');
let fs = require('fs');
let vm = require('vm')
function Module(id){
this.id = id;
this.exports = {};
}
Module.wrapper = [
"(function(exports,module,req,__firname,__dirname){", // 为什么在文件里能够用module require 的起因
"})"
]
Module._extensions = {
'.js'(module){ // 如何解决模块
let fileContent = fs.readFileSync(module.id);
// 给读取进去的文件内容 增加自执行函数
let script = Module.wrapper[0] + fileContent + Module.wrapper[1];
let fn = vm.runInThisContext(script);
fn.call(module.exports,module.exports,module,req)
},
'.json'(module){
// 在json中只须要将 后果赋予给exports 对象上即可
let fileContent = fs.readFileSync(module.id);
module.exports = JSON.parse(fileContent)
}
}
// 解析文件的绝对路径 能够尝试增加后缀
Module.resolveFilename = function(filePath){
... 解析绝对路径
}
Module.prototype.load = function(){ // 是真正加载模块的办法
//this指代的就是以后的模块
let extension = path.extname(this.id);
Module._extensions[extension](this);
return this.exports; // 特地留神这里返回的是module.exports
}
Module._cache = {};
Module.load = function(filePath){ // ./a
let absPath = this.resolveFilename(filePath);
// 如果缓存有这个模块，间接把这个模块的module.exoports;
if(Module._cache[absPath]) return Module._cache[absPath].exports;
let module = new Module(absPath); // module.id module.exports;
Module._cache[absPath] = module; // 把文件和模块对应上
return module.load();
}
function req(filePath){
return Module.load(filePath)
}从实现还是能够看出一些货色的
1、模块外面的this就是module.exports
2、require返回的是module的exports属性（一个对象），这个属性在执行立刻执行函数（模块里代码)的时候会被赋值，所以咱们能够有这么几种写法 module.exports = value（这里不要了解为扭转返回值地址，指向一个新对象，而应该了解为扭转module的属性，具体起因看谬误的写法）
module.exports.a = value（不扭转原返回对象，只是加个属性）
exports.a = value （因为exports也作为参数传到立刻执行函数里了，exports是齐全等于module.exports的）
然而这种写法是错的
exports = value 因为这是间接扭转传入函数的参数对象（不是增加属性），里面的对象不会受影响（函数参数值传递）
3、缓存指的是在同一个js里require屡次只采纳第一次后果
commonjs与ems（es6 module）区别
两个差别
- CommonJS 模块输入的是一个值的拷贝，一旦输入一个值，模块外部的变动就影响不到这个值（援用类型还是能改的），ES6 模块输入的是值的援用。
- CommonJS 模块是运行时加载，ES6 模块是编译时输入接口,有read-only个性
浏览器中执行commonjs
首先，commonjs是同步加载的，浏览器外面加载会比较慢，js会阻塞dom,导致白屏
所以浏览器外面能够用esm，script标签外面加type=module，这个会默认开启defer，在dom加载完且script下载完当前才会执行
如果非要在浏览器外面加载commonjs模块呢，因为浏览器没有node环境，也就是没有module,require,exprots这些变量的实现，所以如果能有工具增加了这些实现，是能够让浏览器运行commonjs模块标准的代码的
browserify就是这么一个工具
原理很简略，获取到每个模块的依赖关系，生成一个以 id 为键的模块依赖字典，模块3依赖模块1，模块1依赖模块2，而后包装每个模块（传入依赖字典以及本人实现的 export 和 require 函数），生成用于执行的 js
{
1:[
function(require,module,exports){
var t = require("./mo2.js");
exports.write = function(){
document.write("test1");
t.write2();
}
},
{"./mo2.js":2}
],
2:[
function(require,module,exports){
exports.write2 = function(){
document.write("=2=");
}
},
{}
],
3:[
function(require,module,exports){
var mo = require("./mo.js");
mo.write();
},
{"./mo.js":1}
]}参考
1.浏览器加载 CommonJS 模块的原理与实现
2.commonjs与ems的差别
3.commonjs与ems差别
4.前端模块化详解
5.UMD
6.script标签 defer async type=module
7.browserify 运行原理剖析
发表回复