3-CMD
诞生背景
AMD其实已经算是解决了前端模块化开发的问题了，但是！！！但是，因为AMD管理依赖的时候，会把所有的依赖下载到本地，并且立即执行一次。依赖少了还好，多的话，那么多js均要被执行一次，这个内存消耗就不容小觑了。而且最重要的是，执行js会阻塞dom的渲染。用户的直接感觉就是页面初始加载的时候等待的时间较长。然后china有一个叫‘玉伯’的牛人，开发了个类库sea.js。seaJs核心即AMD模块化开发规范
核心规范
CMD（Common Module Definition）更贴近 CommonJS Modules/1.1 和 Node Modules 规范，一个模块就是一个文件；
它推崇 依赖就近 想什么时候 require 就什么时候加载，实现了 懒加载， 延迟执行 (as lazy as possible) ；
经常使用的 API 只有 define, require, require.async, exports, module.exports 这五个。其他 API 有个印象就好。
特性：=====预先下载,延迟执行===
会提前下载好所有requre后的文件，但是并不执行模块内容，直到需要执行的时候才执行
实例代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="wrapp">
<input type="text"></br>
<input type="text"></br>
<button>求和</button></br>
<div class="sumWrap"></div>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/sea.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
/**
*模块:
*功能:入口
*/
seajs.use(['./js/tools'],function (tools) {
$('button').click(function () {
var num1=$('input:eq(0)').val();
var num2=$('input:eq(1)').val();
var sum=tools.add(num1,num2);
$('.sumWrap').text(sum)
})
});
tools.js
/**
*模块:tools
*功能:工具
*/
define(function (require, exports, module) {
return {
add:function (x,y) {
var sum= Number(x)+Number(y);
var log=require('./log');
log.info('tools>add执行结果为：'+sum);
return sum;
}
}
})
log.js
/**
*模块:log模块
*功能:打印
*/
console.log('cmd log.js文件--我被下载啦')
define(function () {
console.log('cmd log模块--我被执行啦')
return {
info:function (str) {
console.log(str)
},
err:function (str) {
console.error(str)
}
}
})
效果
看到没有，cmd会提前把所有的依赖下载到本地资源中，但是并不执行（也叫加载），直到遇到require的时候，才执行。
比如说那个log.js刷新页面看浏览器的network或者source都已经有该文件了，也就是说项目初始化的时候就下载了该模块（即该模块所在的文件，因为cmd推崇一个模块就是一个文件），为测试，我打印了‘log.js被下载啦’
但是log模块并没有执行，点击计算求和的时候，在tools的add方法里有require('log.js')，这个时候，log.js里定义的模块才被加载执行
这就叫做‘依赖后置，使用时才加载（懒加载、 延迟执行）’
这就很好的解决了初始化AMD那样会下载并执行完所有的模块引起的卡屏问题
不过默认下require是同步的，也就是说，require的模块没有执行完，程序是不会继续往下执行的。这样就很类似于nodeJs的commomJS模块开发规范了。
当然如果有些人觉得这样虽然很干净利索，但是还是没有会掉性能优化，那么CMD提供了异步的方案
require.async('[模块a]', function(a) {
a.doSomething();
});
但是我觉得，这样这样写太矫情了，就好比你一直吃红薯（写回调），突然吃大米（像传统高级语言那样简单的写同步）很不习惯！！！
作者总结
由于目前浏览器尚不支持模块化CMD规范，所以这些关键字无法被识别，需要先引入库sea.js
补充一点
与AMD不同的小细节，CMD追求与node写法一样，所以也为我们提供了moudule.export，它其实等价于return 关键字，就是大家所说的语法糖。所以tools.js和log.js我可以改成如下这样，效果不变
tools.js
/**
*模块:tools
*功能:工具
*/
define(function (require, exports, module) {
var add=function (x,y) {
var sum= Number(x)+Number(y);
var log=require('./log');
log.info('tools>add执行结果为：'+sum);
return sum;
} //等价于return
module.exports = {
add: add
};
})
log.js
/**
*模块:log模块
*功能:打印
*/
console.log('cmd log.js文件--我被下载啦')
define(function (require, exports, module) {
console.log('cmd log模块--我被执行啦')
var info=function (str) {
console.log(str)
};
var err=function (str) {
console.error(str)
};
//等价于return
module.exports = {
info: info,
err: err
};
})
3-CMD的更多相关文章
- 让 windows 下的命令行程序 cmd.exe 用起来更顺手
在 Windows 下使用 Larave 框架做开发,从 Composer 到 artisan 总是避免不了和 cmd.exe 打交道,系统默认的命令行界面却是不怎么好看,且每行显示的字符数是做了限制 ...
- cmd窗口编码设置
问题描述:不知道误操作了什么,导致cmd窗口的鼠标显示位置出现错位,如下: 现在要将鼠标位置调整回来. 使用工具:cmd. 操作步骤: 1.查看cmd属性可以看到 可以看到是UTF-8编码格式的,我们 ...
- Windows cmd 长时间不输出新内容 直到按下ctrl + c 取消或者回车的解决办法
换了一台新电脑, 在使用 ant 拷贝大量文件的时候 cmd 窗口过了很久没有继续输出新的内容,远远超过平时的耗时, 以为已经卡死 按下 ctrl + c 取消, 这时并没有取消, 而是输出了新内容, ...
- 创建maven项目（cmd 命令）
2016五月 22 原 创建maven项目(cmd 命令) 分类:maven (994) (0) 1.普通方式创建 1)进入cmd窗口执行 mvn archetype:generate 2) 光标停止 ...
- js模块定义——支持CMD&AMD&直接加载
/* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...
- 不显示cmd窗口运行jar包
今天,打开导出的jar包,发现并不能运行,查看jar包中的META-INF文件夹下的MANIFEST.MF文件,发现MANIFEST.MF中并没有Main-Class,于是,就手动添加相应的信息,本项 ...
- 执行插入语句，object val = cmd.ExecuteScalar() val = null
在写接口的过程中遇到错误:空对象不能转换为值类型 因为我们使用的是petapoco,经过调试后发现是 object val = cmd.ExecuteScalar() 这一句造成的报错, val = ...
- Linux Cmd Tool 系列之—alias
The alias cmd list your current aliases. For example : alias Use alias to shorten a long cmd in curr ...
- 使用cmd打开java文件，报错：“错误，编码GBK的不可映射字符”
今天使用EditPlus写了一个小程序,用cmd运行时报错--"错误,编码GBK的不可映射字符". 处理办法是用EditPlus另存为时,把编码格式由UTF-8改为ANSI. 然后 ...
- cmd命令汇总
一 cmd 命令 cmd命令大全(第一部分) winver---------检查Windows版本 wmimgmt.msc----打开windows管理体系结构(WMI) wupdmgr------ ...
随机推荐
- 用 HTML5+ payment方法支付宝支付遇到的坑
用 HTML5+ payment方法碰到的第一个坑就是如果是支付宝的话签约那种支付方式. 因为 Dcloud的文档没有更新的原因你可以看到他们说的都是‘移动支付’,但是你去支付宝平台的时候看到的根本就 ...
- 登陆Oracle11g的企业管理器
本地:https://localhost:1158/em/ 如果远程:那么把localhost换成服务器IP
- AWS系列-Amazon Simple Notification Service (SNS)
SNS是一项 Web 服务,用于协调和管理向订阅终端节点或客户交付或发送消息的过程.在 Amazon SNS 中有两种类型的客户端:发布者和订阅者,也称为生产者和消费者.发布者通过创建消息并将消息发送 ...
- 使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手冊
一.所需工具 1,JDK:生成 2.安卓SDK开发环境 3,NodeJs:主要使用的还是npm 4,Python开发环境 5.VS 2012(2008,2015也能够,已亲測):安装这个主要是须要一些 ...
- Eclipse导入MyEclipseproject（web项目显示为java项目解决的方法）
在直接Import MyEclipse的项目文件导入到Eclipse之后,须要在项目所放的workspace内改动引入项目文件夹下的.project文件,改动例如以下: 1.在eclipse中新建一个 ...
- C语言数组元素的查询
在实际开发中,经常需要查询数组中的元素.例如,学校为每位同学分配了一个唯一的编号,现在有一个数组,保存了实验班所有同学的编号信息,如果有家长想知道他的孩子是否进入了实验班,只要提供孩子的编号就可以,如 ...
- Zabbix-3.0.0 安装Graphtree
导读 Zabbix中,想要集中展示图像,唯一的选择是screen,后来zatree解决了screen的问题,但性能不够好.Graphtree 由OneOaaS开发并开源出来,用来解决Zabbix的图形 ...
- 在 Linux 上管理加密密钥的最佳体验
导读 存储 SSH 的加密秘钥和记住密码一直是一个让人头疼的问题.但是不幸的是,在当前这个充满了恶意黑客和攻击的世界中,基本的安全预防是必不可少的.对于许多普通用户来说,大多数人只能是记住密码,也可能 ...
- 用一个二维码做下载地址，自动区分是 ios 还是 android
用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone 和 ipad. <html> <head> <meta http-equiv ...
- 【黑金原创教程】【Modelsim】【第二章】Modelsim就是电视机
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...