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------ ...
随机推荐
- PHP实现手机号码中间四位用星号（*）隐藏的自定义函数分享
php屏蔽电话号码中间四位: Method 1: function hidtel($phone){ $IsWhat = preg_match('/(0[0-9]{2,3}[\-]?[2-9][0-9] ...
- Qualcomm Vuforia SDK背景
参考视频:http://edu.csdn.net/course/detail/1467/23125?auto_start=1 一:概述 官网:www.vuforia.com 应用方向:产品交互.虚拟购 ...
- 剑指 offer set 19 翻转单词顺序 && 字符串左旋
题目 1. 翻转单词 student. a am I 转换成 I am a student. 2. 字符串左旋 abba 1 转成 bbaa 总结 1. 先对每个单词旋转, 再整齐旋转 2. 先翻转一 ...
- Hadoop1.2.1 配置文件详解
首先我们先回顾一下Hadoop的一些概念: Apache Hdoop 1.x 组成 NameNode(元数据服务器) Secondary NameNode(辅助元数据服务器) JobTracker(任 ...
- 微软笔试题-highways
题目大意 一条单向的高速公路上有N辆车,在0时刻,每辆车分别在起点A[0],A[1]....处开始从北向南出发,每辆车有个终点B[0],B[1]....且每辆车有个限制速度 V[0],V[1]... ...
- js文章收藏
js文件被浏览器缓存的问题:http://www.cnblogs.com/wangtao_20/p/4589898.html
- 【黑金原创教程】【TimeQuest】【第六章】物理时钟与外部模型
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...
- -bash: xxx: /bin/sh^M: bad interpreter: No such file or directory
原因是shell脚本文件的文件格式错误 通过vi编辑器来查看文件的format格式.步骤如下: 1.首先用vi命令打开文件 vi stop.sh 2.在vi命令模式中使用 :set ff 命令 可以看 ...
- Java中break、continue、return语句的使用区别
break.continue.return之间的区别与联系 在软件开发过程中,逻辑清晰是非常之重要的. 代码的规范也是非常重要的.往往细节决定成败.在编写代码的时候,一定要理解语言的作用以及使用的方法 ...
- 基于注解的形式配置Bean
基于注解的方式配置Bean:也就说我们在每个Bean的类名前面注解一下,Spring会自动帮我们扫描Bean放进IOC容器中 I基于注解的方式配置Bean(没有依赖关系的Bean)有两个步骤: 1组件 ...