可能是最详细的UMD模块入门指南
学习UMD
介绍
这个仓库记录了一些关于javascript UMD模块规范的demo，对我学习UMD规范有了很大帮助，希望也能帮助到你。
回顾
之前也写了几篇关于javascript模块的博客，链接如下：
近几天准备总结一下javascript模块的知识点，所以建了这个Git仓库，如果能帮助到您，麻烦点个star哦，非常感谢！
这篇博客主要说下自己关于UMD的一点认知和思考，从实现一个简单的UMD模块，再到实现一个有依赖关系的UMD模块，整个过程加深了我对UMD模块的理解。
什么是UMD
所谓UMD (Universal Module Definition)，就是一种javascript通用模块定义规范，让你的模块能在javascript所有运行环境中发挥作用。
简单UMD模块的实现
实现一个UMD模块，就要考虑现有的主流javascript模块规范了，如CommonJS, AMD, CMD等。那么如何才能同时满足这几种规范呢？
首先要想到，模块最终是要导出一个对象，函数，或者变量。
而不同的模块规范，关于模块导出这部分的定义是完全不一样的。
因此，我们需要一种过渡机制。
首先，我们需要一个factory，也就是工厂函数，它只负责返回你需要导出的内容（对象，函数，变量等）。
我们从导出一个简单的对象开始。
function factory() {
return {
name: '我是一个umd模块'
}
}
全局对象挂载属性
假设不考虑CommonJS, AMD, CMD，仅仅将这个模块作为全局对象的一个属性应该怎么写呢？
(function(root, factory) {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
我们把factory写成一个匿名函数，利用IIFE（立即执行函数）去执行工厂函数，返回的对象赋值给root.umdModule，这里的root就是指向全局对象this，其值可能是window或者global，视运行环境而定。
打开效果页面链接（要看源码的话，点开Git仓库），观察Network的文件加载顺序，可以看到，原则就是依赖先行。
再进一步，兼容AMD规范
要兼容AMD也简单，判断一下环境，是否满足AMD规范。如果满足，则使用require.js提供的define函数定义模块。
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// 如果环境中有define函数，并且define函数具备amd属性，则可以判断当前环境满足AMD规范
console.log('是AMD模块规范，如require.js')
define(factory)
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
打开效果页面链接，可以看到，原则是调用者先加载，所依赖的模块后加载。
起飞，直接UMD
同理，接着判断当前环境是否满足CommonJS或CMD规范，分别使用相应的模块定义方法进行模块定义。
(function(root, factory) {
if (typeof module === 'object' && typeof module.exports === 'object') {
console.log('是commonjs模块规范，nodejs环境')
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(factory)
} else if (typeof define === 'function' && define.cmd) {
console.log('是CMD模块规范，如sea.js')
define(function(require, exports, module) {
module.exports = factory()
})
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
最终，使用require.js, sea.js, nodejs或全局对象挂载属性等方式都能完美地使用umd-module.js这个模块，实现了大一统。
给个sea.js调用UMD的效果页面链接，sea.js调用UMD模块
而nodejs调用UMD模块需要执行node命令，
node umd-simple-used-by-nodejs
效果如下：
有依赖关系的UMD模块
当然，我们不能止步于此，模块会被调用，当然也会调用其他模块。因此我们还需要实现一个有依赖关系的UMD模块，来验证UMD规范的可行性。
全局对象挂载属性
这个简单，在html中你的模块前引入所依赖的模块即可。umd-module-depended和umd-module都是UMD模块，后者依赖前者。
<!DOCTYPE html>
<html>
<head>
<title>Test UMD</title>
<!-- 依赖放前面 -->
<script src="assets/js/umd-dep/umd-module-depended.js"></script>
<script src="assets/js/umd-dep/umd-module.js"></script>
<script src="assets/js/umd-dep/umd-global.js"></script>
</head>
<body>
<h1>测试UMD模块</h1>
<h2></h2>
<p id="content"></p>
<p id="content2"></p>
</body>
</html>
点开效果页面链接，看得更清楚明白！
兼容AMD规范
我们先在入口文件umd-main-requirejs.js中，定义好模块路径，方便调用。
require.config({
baseUrl: "./assets/js/umd-dep/",
paths: {
umd: "umd-module",
depModule: "umd-module-depended"
}
});
被依赖的模块umd-module-depended，只需要简单实现UMD规范即可。
而调用者umd-module，则需要做一些处理。按照require.js的规范来即可， define时，指定依赖的模块depModule，而匿名工厂函数需要在参数上接收依赖的模块depModule。
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(['depModule'], factory)
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory(root.depModule);
}
}(this, function(depModule) {
console.log('我调用了依赖模块', depModule)
// ...省略了一些代码，去代码仓库看吧
return {
name: '我自己是一个umd模块'
}
}))
打开效果页面链接，看得更清楚明白！
UMD依赖写法
同理，各种规范要求你怎么写模块依赖，你就怎么写就行。
(function(root, factory) {
if (typeof module === 'object' && typeof module.exports === 'object') {
console.log('是commonjs模块规范，nodejs环境')
var depModule = require('./umd-module-depended')
module.exports = factory(depModule);
} else if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(['depModule'], factory)
} else if (typeof define === 'function' && define.cmd) {
console.log('是CMD模块规范，如sea.js')
define(function(require, exports, module) {
var depModule = require('depModule')
module.exports = factory(depModule)
})
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory(root.depModule);
}
}(this, function(depModule) {
console.log('我调用了依赖模块', depModule)
// ...省略了一些代码，去代码仓库看吧
return {
name: '我自己是一个umd模块'
}
}))
给个sea.js调用的示例链接。
而nodejs调用也是通过命令行测试，
node umd-dep-used-by-nodejs
效果如下：
总结
以上实现了简单的UMD模块，也验证了UMD模块间存在依赖关系时的可行性。虽然本文是以简单对象导出为例，但足以作为我们深入UMD规范的起点，加油！
最后厚着脸皮求个star，点亮我吧
扫一扫下方小程序二维码或搜索Tusi博客，即刻阅读最新文章！
可能是最详细的UMD模块入门指南的更多相关文章
- 这可能是最详细的 iOS 学习入门指南（含书目/文档/学习资料）
1 零基础小白如何进行 iOS 系统学习 首先,学习目标要明确: 其次,有了目标,要培养兴趣,经常给自己一些正面的反馈,比如对自己的进步进行鼓励,在前期小步快走: 再次,学技术最重要的一点就是多动手. ...
- Nginx开发HTTP模块入门
Nginx开发HTTP模块入门 我们以一个最简单的Hello World模块为例,学习Nginx的模块编写.假设我们的模块在nginx配置文件中的指令名称为hello_world,那我们就可以在ngi ...
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
- 【02】AMD、CMD、UMD 模块的写法
AMD.CMD.UMD 模块的写法 简介 最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长.虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面.开发新手们会 ...
- 详细的Hadoop的入门教程-完全分布模式Fully-Distributed Operation
1. 前面在伪分布模式下已经创建了一台机器,为了统一命名,hostname更名为hadoop01.然后再克隆2台机器:hadoop02. hadoop03:将第一台机器hadoop01上的伪分布停止, ...
- Request模块入门学习
使用指令npm install --save request来安装模块,然后使用var request = require('request')完成引用. 对于GET请求,主要是获取目的url中数据. ...
- UMD 模块 vs CJS 模块
UMD 模块 vs CJS 模块 使用方式 UMD, window 全局注册后,直接使用 <!DOCTYPE html> <html lang="zh-Hans" ...
- yii2实战教程之新手入门指南-简单博客管理系统
作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...
随机推荐
- JS中原始值和引用值分析
JS中变量中两种类型的值:原始值,引用值 原始值是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. var x = 1; //1就是一个原始值,变量x中存放的就是原始 ...
- Cesium案例解析(二)——ImageryLayers影像图层
目录 1. 概述 2. 实例 2.1. ImageryLayers.html 2.2. ImageryLayers.js 2.2.1. 代码 2.2.2. 解析 3. 结果 1. 概述 Cesium支 ...
- Java 打印Word文档
本文介绍如何在Java程序中通过物理打印机和虚拟打印机来打印Word文档的方法.文中使用了类库Spire.Doc for Java,可通过官网下载jar文件并导入程序或者直接通过maven仓库安装导入 ...
- c++-变量，this指针，全局函数，成员函数，自定义数组类
区分变量属于哪个对象 c++对象管理模型初探 C++类对象中的成员变量和成员函数是分开存储的,C中内存四区仍然有效 C++编译器对普通成员函数的内部处理(隐藏this指针) this指针解决函数形参和 ...
- 升鲜宝V2.0_生鲜配送管理系统_杭州生鲜配送行业，升鲜宝使用教程 客户管理 第二章
1.新增客户 (1)新增客户有两种方式,单个添加和批量添加,客户的结构可以是独立的,也可以是父子结构(比如杭州升鲜宝科技有限公司下有西湖区部门,滨江区部门,余杭区部门等多个分部,就可以建立父子结构,这 ...
- QT--TCP网络编程(客户端/服务器)
QT -----TCP网络编程 1.主要流程 1.客户端 创建QTcpSocket对象 连接到服务器 --connectToHost() 发送数据 ---write() 读取数据 ---readA ...
- 4.Redux学习4----react-redux
react-redux是配合redux一起使用的,其中核心组件是Provider Provider是store的提供器,用Provider则store就无需直接引入组件内,而且还可以将一个store公 ...
- DataGridView重新加载数据后，选中上次选中的行。
public int SelecedRow;//记录当前鼠标点中的行索引(用于解决用户获取看板数据,刷新数据后,当前选中行回到默认行) private void dataGridView1_CellC ...
- CAS与ABA问题产生和优雅解决
本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...
- CAD怎么算面积?这种方法你要知道
在CAD中,打开可能都是用过CAD制图软件,这是一个比较强大的绘图软件,可以绘制出各种类型的CAD图纸文件,还可以将绘制好的图纸面积进行测量.那CAD怎么算面积?其实计算面积的方法有很多中,下面给大家 ...