JavaScript模块化思想之CommonJS、AMD、CMD、UMD
前一篇文章了解了什么是模块,这一篇就简单介绍一下如何定义并加载一个模块。
1 // student.js
2 // 私有变量
3 var a = 123;
4 function add(student) {
5 console.log('Add student:' + student);
6 }
7 // exports对象上的方法和变量是外部可访问的
8 exports.add = add;
1 // 使用require加载student.js模块
2 var student = require('./student.js');
CommonJS加载模块是“同步”的,也就是说,如果我们要调用被调用模块中的公共方法和变量,一定要等被调用模块加载完毕后才可以。用于服务端的NodeJS就采用的CommonJS来管理模块。但是在浏览器端,同步加载会因为收到网络环境的影响存在很大的不确定性,所以CommonJS不适合于浏览器端。
如果在浏览器环境下想要从服务器加载模块,就必须使用“异步”的方式。所以就出现了AMD和CMD解决方案。
1 //define(param1,param2) 通过define方法定义模块
2 //@param1: 数组,元素为引入的依赖模块
3 //@param2: 回调函数,通过形参传入依赖
4 define(['firstModule','secondModule'],function(firstModule,secondModule){
5 function foo(){
6 firstModule.test();
7 }
8 // 暴露foo()
9 return {foo:foo};
10 });
同时,AMD允许使用define方法定义模块是兼容CommonJS规范,可以使用require和exports。
1 define(function(require,exports,module){
2 var reqModule = require("./firstModule");
3 reqModule.test();
4
5 exports.pubPort = function(){
6 // 函数体
7 }
8 });
1 // AMD——依赖前置
2 define(['./a','./b'],function(a,b){
3 //提前声明要依赖的模块
4 });
5
6 // CMD
7 define(function(require,exports,module){
8 //依赖可以就近写
9 var a = require('./a');
10 a.test();
11
12 //软依赖
13 if(status){
14 var b = require('./b');
15 b.test();
16 }
17 });
JavaScript模块化思想之CommonJS、AMD、CMD、UMD的更多相关文章
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化 模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
- 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结(转)
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
- 关于 CommonJS AMD CMD UMD
1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...
- CommonJS/AMD/CMD/UMD概念初探
1.CommonJS是一种规范,NodeJS是这种规范的实现. 1.1.CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作. 参考: http://www.commonjs.org ...
随机推荐
- CSS3效果:animate实现点点点loading动画效果(二)
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...
- 从发布订阅模式到redux(一)
最近在学习的过程中,学习了一些关于redux的一些知识,学之前用redux,虽然会用但是实现的原理就不是特别清楚,天天沉迷于搬砖 总是这木搬砖也不是个事啊,就准备开始深入了解一些原理性的东西 首先在看 ...
- 从文本中提取图片路径(java 解析富文本处理 img 标签)
很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 怎样将富文本的图片的 src 获取出来? 方法一: 利用正则表达式: pub ...
- javascript的函数、事件
本文内容: 函数 函数的定义方式 函数的调用方式 函数的参数 匿名函数 函数中的this 事件 常见事件 绑定事件 首发日期:2018-05-11 函数: 函数的定义方式: 函数可以有参数,参数为局部 ...
- 使用Visual Studio Team Services敏捷规划和项目组合管理(五)——组合管理
使用Visual Studio Team Services敏捷规划和项目组合管理(五)--组合管理 组合待办事项为产品所有者提供关于几个敏捷特性团队工作的洞察.产品所有者可以将高优先级的目标定义为Ep ...
- 同一个菜品商家中心和erp价格显示不一致解决方案FAQ
1.适用场景: 2.问题原因:子账号在商家中心改了价格 3.解决办法: (1).子账号登录商家后台修改 再同步(2).ERP上商品管理 修改价格
- Scala链式编程内幕
package big.data.analyse.scala /** * 链式编程原理 * Created by zhen on 2018/12/16. */ class Computer{def c ...
- RMAN restore fails with ORA-01180: can not create datafile 1
最近在验证.测试备份有效性时,遇到了"ORA-01180: can not create datafile 1"这个错误,顺便结合metalink的官方文档"RMAN ...
- define和typedef的区别
define和typedef的区别 define是单纯的字符替换,typedef是重新定义了新的类型 #include <stdio.h> #define CHAR1 char* type ...
- [Hive_add_11] Hive 使用 UDTF 实现日志降维
0. 说明 对日志进行降维处理,将日志分为几个小表 通过编写 UDTF ,对日志降维,将日志聚合体相关字段抽取出来,形成新表. 1. 操作流程 1.0 日志部分内容 ##{\"appChan ...