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------ ...
随机推荐
- TCP通信服务端及客户端代码
Java TCP通信使用的是Socket(客服端)和ServerSocket(服务端),具体代码如下. server端代码: import java.io.BufferedReader; import ...
- PHP cURL库函数抓取页面内容
目录 1 为什么要用cURL? 2 启用cURL 3 基本结构 4 检查错误 5 获取信息 6 基于浏览器的重定向 7 用POST方法发送数据 8 文件上传 9 cURL批处理(multi cURL) ...
- Oracle dbms_random随机数包详解
Oracle dbms_random包主要用于获得随机数,可以为数字也可以为字母等,还可以实现混拼.常用函数如下: dbms_random.value 生成一个指定范围的38位随机小数(小数点后38位 ...
- Visio2010如何安装
双击setup. 点击我接受此协议的条款,然后点击继续. 这里选择自定义,很重要哦,不要选择立即安装,不然,一会装完后,你会找不到快捷方式的. 文件位置这里选择好存放路径,一会我们要去这里 ...
- HDU 1058 Humble Numbers (动规+寻找丑数问题)
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- shrink-to-fit(自适应宽度)
自适应宽度是指当未明白设定容器的宽度(或外边距设为auto)时,在特定的情况下容器的宽度会依据情况自行设定.而设定的结果往往并非我们想要的. W3C规范中描写叙述了几种shrink-to-fit的情况 ...
- iOS开发之 -- NSStringFromSelector的使用
很多时候,我们要触发一个时间,需要设置点击时间,当然了,有很多,比如:按钮,手势,tableview和其他一些空间自带的点击方法, 还有一个就是NSStringFromSelector的使用,废话不多 ...
- MVC模式 与 Model2模型 介绍
Model1回顾 MVC模式:MVC(Model.View.Controller)是软件开发过程中比较流行的设计思想.旨在分离模型.控制.师徒.是一种分层思想的体现. Model2简介Java Web ...
- android studio升级时提示 Connection failed. Please check your network connection and try again
原文地址 http://www.eyeapk.com/android-studio-update.html Mac OSX中修改文件路径为 bin/idea.vmoptions ,添加如下内容,如果无 ...
- java的Enumeration转list
java的Enumeration转list Enumeration<String> attrs = getAttrNames();// while(attrs.hasMoreElement ...