把自己的js模块兼容到AMD CMD CommonJS
为了让同一个模块可以运行在前后端,在写作过程中需要考虑兼容前端也实现了模块规范的环境。为了保持前后端的一致性,类库开发者需要将类库代码包装在一个闭包内。以下代码演示如何将hello()方法定义到不同的运行环境中,它能够兼容Node(CommonJS),AMD,CMD以及常见的浏览器环境中:
(function (name, definition) {
//检测上下文环境是否为AMD或CMD
var hasDefine = typeof define === 'function';
//检查上下文环境是否为Node
var hasExports = typeof module !== 'undefined' && module.exports;
if(hasDefine) {
//AMD环境或CMD环境
define(definition);
} else if(hasExports) {
//定义为普通Node模块
module.exports = definition();
} else {
//将模块的执行结果挂在window变量中,在浏览器中this指向window对象
this[name] = definition();
}
})('hello', function () {
var hello = function () {};
return hello;
});
兼容原理和我们平常做浏览器兼容的原理是一样的,无非就是能力检测和怪癖检测。
把自己的js模块兼容到AMD CMD CommonJS的更多相关文章
- JS模块规范:AMD,CMD,CommonJS
浅析JS模块规范 随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. AMD,CMD,CommonJS是目前最常用的三种模块化书写规范. CommonJS CommonJS规范是诞生比 ...
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- 浅析JS模块规范:AMD,CMD,CommonJS
from:https://www.jianshu.com/p/09ffac7a3b2c 随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. 模块化 AMD,CMD,CommonJS ...
- AMD/CMD/CommonJs到底是什么?它们有什么区别?
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...
- FW: AMD, CMD, CommonJS和UMD
javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...
- AMD, CMD, CommonJS和UMD
我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...
- JS模块之AMD, CMD, CommonJS、UMD和ES6模块
CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...
- AMD,CMD.CommonJs和UMD还有es6的模块化对比
CommonJS CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行, ...
- js模块化开发 AMD CMD Commonjs
在es6全面实行开来之前 js实现模块开发方案有: 1.AMD 异步模块开发定义 依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...
随机推荐
- JavaScript构造函数、继承的理解
前两天稍微深入一点点理解了原型和原型链,然后就开始有挺多疑问的: function dog() { this.name = "huahua"; } var cat = new do ...
- 谈谈序列化—实体bean一定要实现Serializable接口?
导读:最近在做项目的过程中,发现一个问题,就是我们最开始的时候,传递参数包括返回类型,都有map类型.但是由于map每次都要匹配key值,很麻烦.所以在之后就将参数传递和返回类型全都改成了实体bean ...
- 关于《Web接口开发与自动化测试--基于Python语言》
关于封面logo 首先,你会被书封上面logo吸引,这么炫酷?双蛇杖?嗯,这是Requests的新logo. 旧的logo是一只乌龟. 新logo是双蛇杖: 看到新logo我首先想到的是 火爆全网页游 ...
- Golang中的坑二
Golang中的坑二 for ...range 最近两周用Golang做项目,编写web服务,两周时间写了大概五千行代码(业务代码加单元测试用例代码).用Go的感觉很爽,编码效率高,运行效率也不错,用 ...
- Android SDK Manager配置
Android SDK Manager就是一个Android软件开发工具包管理器,就像一个桥梁,连通本地和服务器,从服务器下载安卓开发所需工具到本地. 而AVD Manager是一个Android虚拟 ...
- 自动化测试-Selenium家谱介绍
一.自动化测试定义 自动化测试是通工具录制或编写脚本的方式模拟手工测试的过程,通过回放或运行脚本来执行测试用例,从而代替人工对系统的功能进行验证. 二.什么样的项目适合做自动化测试 1.需求明确,不会 ...
- 用Python让单片机“行动”起来——MicroPython实战入门篇
MicroPython以微控制器作为目标,从而使得Python可以用来控制硬件.说到MicroPython,也许有人会感到陌生.而说到和它密切相关的Python,是否会恍然大悟呢?Python属于解释 ...
- 自动刷新 CSS文件
自动刷新 CSS文件 使用任何代码工具码 CSS,都是需要保存后再切换到浏览器按 F5 刷新查看效果,一次又一次,不管这个改动仅是一个小小的颜色.使用 CSSrefresh 后,改动 CSS 文件保存 ...
- eclipse常用快捷设置
1.代码自动提示 在我们忘记方法名或者想偷懒时,代码自动提示很管用.不过Eclipse默认是输入"."后才会出现包或类成员的提示,也就意味着我们必须先输入一个完整的类名,提示才能出 ...
- HTML知识点总结之img、scirpt、link标签
<img>元素 使用<img>可以在网页插入一个图片,但实际上<img>标签并不会在网页中直接插入图像,而是从网页上链接图像. <img>的主要属性 ( ...