可能是最详细的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 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...
随机推荐
- 微信团队分享:极致优化,iOS版微信编译速度3倍提升的实践总结
1.引言 岁月真是个养猪场,这几年,人胖了,微信代码也翻了. 记得 14 年转岗来微信时,用自己笔记本编译微信工程才十来分钟.如今用公司配的 17 年款 27-inch iMac 编译要接近半小时:偶 ...
- Instrument API介绍
1. Instrumentation介绍 JVMTI(JVM Tool Interface)是 Java 虚拟机所提供的 native 编程接口,是 JVMPI(Java Virtual Machi ...
- Linux下监控用户操作轨迹
在实际工作当中,都会碰到误删除.误修改配置文件等事件.如果没有堡垒机,要在linux系统上查看到底谁对配置文件做了误操作,特别是遇到删库跑路的事件,当然可以通过history来查看历史命令记录,但如果 ...
- IJKPlayerView设置Header播放视频的方法
播放b站视频连接的实测图 https://github.com/Rukey7/IjkPlayerView 使用库的连接 在用这个库播放b站视频连接的时候总是播放不了 检查了一下是因为b站视频连接需要验 ...
- Microsemi Libero使用技巧——FPGA全局网络的设置
前言 刚开始做Microsemi FPGA+SoC开发时,会用到几个ARM专用的IP Core,功能一复杂起来,就会遇到某些信号如rst_n不能分配到指定的引脚上的情况,IO类型为CLKBUF,并不是 ...
- MIT-6.824 操作系统 汇总
MIT-6.828-JOS-环境搭建 ELF文件格式 lab1:C, Assembly, Tools, and Bootstrapping lab2:Memory management lab3:Us ...
- Supermap/Cesium 开发心得----飞天动线的实现
在实际开发中,我遇到这样的问题,只给了两地点的坐标,要求会出从A地到B地的在天上飞的那种动态线 本质上动线的效果就是构造实体Entity中的polyline来实现,设置好材质,颜色和运动频率 具体实现 ...
- 2.Redux学习2----redux-thunk
UI组件:只展示UI,不处理业务逻辑,又称傻瓜组件,因为只需要展示UI,没有状态,我们通常用函数组件(无状态组件)作为UI组件 容器父组件:只处理业务逻辑,不展示UI,又称聪明组件 redux-thu ...
- SQL Server 2012 官方版 / SQL Server 2012下载
SQL Server是微软的一款专业免费的关系数据库管理工具, 是一个全面的数据库平台,使用集成的商业智能 (BI)工具提供了企业级的数据管理服务,SQL Server 数据库引擎为关系型数据和结构化 ...
- Android微信九宫格图片展示控件
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/214 Android微信九宫格图片展示控件 半年前,公司产 ...