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 ...
随机推荐
- [新特性]PeopleTools8.54+:PeopleSoft Application Engine新特性
PeopleTools 8.54 的Application Engine 已经被更新,特别是在AE跟踪设置中有了更多的选项,本文将帮助您了解8.54的新AE特性以及如何使用这些特性. AE trace ...
- 在C++的函数中如何指定一个数组,使得这个数组的大小由函数的输入值来决定
今天调试一个C++程序,在一个函数中定义了一个一维数组,设定数组的大小由函数的输入值来决定. 是这样子的: ]; 然后发现:报错! 报错是这样的: 那么问题来了,在C++中定义数组一定要指定数组大小么 ...
- java方法中,传参是传值还是传址问题(对比C语言、C#和C++)
问题引出: 编写一个简单的交换值的小程序,如果我们只是简单地定义一个交换函数接收两个数,在函数内部定义一个中间变量完成交换.那么当我们把a,b两个实参传给这个函数时,往往得不到预期的结果.这是为什么呢 ...
- odoo:开源 ERP/CRM 入门与实践
看了这张图,或许你对odoo有了一些兴趣. 这次就是和大家一起交流开源ERP/CRM系统:odoo 对以下读者有帮助:研发.产品.项目.市场.服务.运营.管理等. 一.背景趋势 社交网络.电商O2O: ...
- Android为TV端助力 很详细的序列化过程Parcelable
直接上代码:注释都写的很清楚了. public class Entry implements Parcelable{ public int userID; public String username ...
- Tab 菜单切换
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/hshen/layui.css ...
- NFV一种提高进程消息高可用性的方法
1.背景及概述 1.1 背景 在做NFV的过程中,由于控制面进程被放置到不同虚拟机中,中间可能跨越路由器,因此期间网络有可能震荡,这种情况下保证高可用性就必须有保护机制,本文正是在这种背景下的考虑. ...
- Spark操作parquet文件
package code.parquet import java.net.URI import org.apache.hadoop.conf.Configuration import org.apac ...
- Spark之UDF
package big.data.analyse.udfudaf import org.apache.spark.sql.types.{IntegerType, StringType, StructF ...
- MyBatis笔记----报错:Error creating bean with name 'sqlSessionFactory' defined in class path resource [com/ij34/mybatis/applicationContext.xml]: Invocation of init method failed; nested exception is org.sp
四月 05, 2017 4:51:02 下午 org.springframework.context.support.ClassPathXmlApplicationContext prepareRef ...