javascript之模块加载方案
前言
主要学习一下四种模块加载规范:
- AMD
- CMD
- CommonJS
- ES6 模块
历史
require.js
requirejs 为全局添加了 define 函数,你只要按照这种约定的方式书写这个模块即可。
define(function () {
//Do setup work here
return {
color: "black",
size: "unisize"
}
});
//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
以上示例代码来源于require.js官网
demo代码详见 https://github.com/BillyQin/jsModule/tree/master/requireJs
AMD
require.js 为全局添加了define 函数,按照这种约定方式写即可。
这个约定方式就是AMD(The Asyncchronous Module Definition)
所以AMD规范就是定义了怎么写define函数。只要按照这个规范来写模块和依赖,require.js就能正确解析。
sea.js
demo代码详见 https://github.com/BillyQin/jsModule/tree/master/seaJs
CMD
同样的道理,CMD就是Sea.js对模块定义对规范化产出。
所以CMD的内容就是描述该如何定义模块,如何引入模块,如何导出模块。只要按照这个规范来写模块和依赖,sea.js就能正确解析。
AMD 和 CMD
- AMD 推崇依赖前置,
CMD推崇依赖就近
- 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。
- AMD 是将需要使用的模块先加载完再执行代码
- CMD 是在 require 的时候才去加载模块文件,加载完再接着执行。
CommonJS
AMD 和 CMD 都是用于浏览器的模块规范,而在服务端(node),则采用CommonJS。
CommonJS和sea.js一样,require的时候才去加载模块文件,加载完再接着执行。
demo代码详见 https://github.com/BillyQin/jsModule/tree/master/commonJs
为什么浏览器中不支持 CommonJS 语法呢?
这是因为浏览器环境中并没有 module、 exports、 require 等环境变量。
ES6
es6定义了新的模块加载方案。
// 导出
const addr = 'China'
const year = 2018
export { addr, year }
// 导入
import { addr, year } from './index.js'
和require.js(AMD)一致,将需要使用的模块加载完再执行代码。
ES6 和 CommonJS的差异
CommonJS模块输出值的拷贝, ES6输出值的引用。 CommonJS模块输出值的拷贝, 也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
CommonJS是运行时加载,ES6是编译时输出接口。 CommonJS加载的是一个对象,就是module.exports属性。该对象只有在脚本运行完成后才会生成。而es6模块不是对象,对外接口只是一种静态定义,在代码静态解析阶段就会生成。
Babel
在浏览器不支持es6的时候,如果要使用es6的语法,一般都会在项目里加入babel。
// es6
let firstName = 'Michael';
const lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
转换后
Object.defineProperty(exports, "__esModule", {
value: true
});
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
exports.firstName = firstName;
exports.lastName = lastName;
exports.year = year;
webpack
Babel 只是把 ES6 模块语法转为 CommonJS 模块语法,而浏览器不支持CommonJs。这时候webpack出动。
浏览器不支持CommonJs的本质是因为浏览器环境中并没有 module、 exports、 require 等环境变量。 webpack 打包后的文件之所以在浏览器中能运行,就是靠模拟了这些变量的行为。
webpack怎么模拟呢?
// commonJs
let multiply = require('./multiply')
console.log('加载 square 模块')
let square = function (num) {
return multiply.multiply(num, num)
}
module.exports = {
square: square
}
模拟后:
// 包裹一层,注入这些变量
function(module, exports, require) {
console.log('加载了 square 模块');
var multiply = require("./multiply");
module.exports = {
square: function(num) {
return multiply.multiply(num, num);
}
};
}
整个CommonJs项目改写后
// 自执行函数
(function(modules){
// 存储已加载的模块
var installModules = {}
// 关键的require方法
function require(moduleName) {
if (installModules.moduleName) {
return installModules.moduleName.exports
}
var module = installModules[moduleName] = {
exports: {}
}
modules[moduleName](module, module.exports, require);
return module.exports;
}
return require('main')
})({
'main': function(module, exports, require) {
var addModule = require("./add");
console.log(addModule.add(1, 1))
var squareModule = require("./square");
console.log(squareModule.square(3));
},
'./add': function(module, exports, require) {
console.log('加载 add 模块')
var add = function (x, y) {
return x + y
}
module.exports = {
add: add
}
},
'./multiply': function(module, exports, require) {
console.log('加载 multiply 模块')
var multiply = function (x, y) {
return x * y
}
module.exports = {
multiply: multiply
}
},
'./square': function(module, exports, require) {
console.log('加载 square 模块')
var multiply = require('./multiply')
var square = function (num) {
return multiply.multiply(num, num)
}
module.exports = {
square: square
}
}
})
参考
javascript之模块加载方案的更多相关文章
- ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export
1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...
- javascript 异步模块加载 简易实现
在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...
- JavaScript AMD 模块加载器原理与实现
关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...
- [JavaScript] 前端模块加载简单实现(require)
模块加载的简单实现 (function(win) { var baseUrl; var paths; var script_cache = {}; var script_queue = []; var ...
- requirejs解决异步模块加载方案
他首先会遍历enableRegistry取出其中定义的模块,并且将没有加载成功的模块标识注入noLoads数组,如果过期了这里就会报错 如果上述没问题还会做循环依赖的判断,主要逻辑在breakCycl ...
- 关于javascript模块加载技术的一些思考
前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...
- ES6模块加载
两种加载方式 加载方式 规范 命令 特点 运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案 非语言层面的标准 只能在运行时确定模块的依赖关系及输入/输 ...
- 关于前端JS模块加载器实现的一些细节
最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘. 本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术 ...
- 小矮人Javascript模块加载器
https://github.com/miniflycn/webkit-dwarf 短小精悍的webkit浏览器Javascript模块加载器 Why 我们有许多仅基于webkit浏览器开发的应用 无 ...
随机推荐
- Python 之列表操作
# len(list)列表元素个数 # max(list)返回列表元素最大值 # min(list)返回列表元素最小值 # list(seq)将元组转换为列表 # list.append(obj)在列 ...
- 内网jenkins如何配置gitlab自动拉取代码打包
在全局工具配置中添加git安装目录的配置 http://10.2.1.92:8080/jenkins/configureTools/git1.8.3.1/usr/bin/git 打开系统设置配置git ...
- PHP 设计模式--基础
设计模式的宗旨就是:重用. 在面向对象中,类是用于生成对象的代码模版,而设计模式是用于解决共性问题的代码模版. 遵循这样的模板,我们可以设快速地设计出优秀的代码. 注意,设计模式只是模板,不是具体的代 ...
- MATLAB仿真学习笔记(一)
一.Simulink概述 1.特点 simulink是对动态系统进行建模.仿真和综合分析的图形化软件,可以处理线性和非线性.离散.连续和混合系统,也可以处理单任务和多任务系统,并支持多种采样频率的系统 ...
- yum插件
参考文章: http://www.linuxfly.org/post/297/ [root@dnstest07.tbc /home/ahao.mah] #rpm -qa |grep yum yum-p ...
- MySQL-----一对多
一对多: 用户表和部门表 用户: 用户id 用户名 部门 1 George 1 2 Elizabeth 1 3 Bruce 2 4 Catherine 3 部门: 部门id 部门名称 1 CEO ...
- Django - 日志工作中常用配置
工作中常用配置 # 日志配置 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") LOGGING = { 'version': 1, # 保留 ...
- PAT 1108 Finding Average
The basic task is simple: given N real numbers, you are supposed to calculate their average. But wha ...
- NYIST 760 See LCS again
See LCS again时间限制:1000 ms | 内存限制:65535 KB难度:3 描述There are A, B two sequences, the number of elements ...
- 暑假集训D16总结
考试 日常爆炸= = T1 一看就是个树规,然而不会写方程= = T2 一看就是个分块,然而不会分= = T3 终于有点头绪,推了两个小时的30分部分分情况,然后打挂了= = 我玩个鬼啊 其实听完,觉 ...