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------ ...
随机推荐
- redis是如何存储对象和集合的
在项目中,缓存以及mq消息队列可以说是不可或缺的2个重要技术.前者主要是为了减轻数据库压力,大幅度提升性能.后者主要是为了提高用户的体验度,我理解的是再后端做的一个ajax请求(异步),并且像ribb ...
- PHP常用技术文之文件操作和目录操作总结
<?php header("content-type:text/html;charset=utf-8"); /* *声明一个函数,传入文件名获取文件属性 *@param st ...
- MySQL单列索引和组合索引的选择效率与explain分析
一.先阐述下单列索引和组合索引的概念: 单列索引:即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引. 组合索引:即一个索包含多个列. 如果我们的查询where条件只有一个,我们完全可 ...
- ssh证书登录(实例详解)
前言 本文基于实际Linux管理工作,实例讲解工作中使用ssh证书登录的实际流程,讲解ssh证书登录的配置原理,基于配置原理,解决实际工作中,windows下使用SecureCRT证书登录的各种问 ...
- Eclipse中如何clean项目以及clean的作用
http://blog.csdn.net/vipmao/article/details/51228171
- 复习及总结--.Net线程篇（3）
不幸的发现,原来多线程的东西还有好多. 不只是一个Thread就能把事情做完的,好吧,孤陋寡闻了 这里总结下 复习及总结--.Net线程篇(2)里的两个概念AppDomain和ThreadPool ...
- Masonry介绍与使用实践 - iOS移动开发周报
本文转发至 http://www.tuicool.com/articles/MRbaEnB/ 原文 http://www.infoq.com/cn/news/2014/11/masonry-intr ...
- 【iOS开发】 AudioSession设置, 切换扬声器和听筒详解-保留其他应用音乐（备忘）
本文转载至 http://blog.sina.com.cn/s/blog_693de6100101f1g8.html (2013-04-10 17:25:24) 转载▼ 标签: audiosessio ...
- ios 对日期的处理（包括计算昨天时间、明天时间）
NSDate存储的是世界标准时(UTC),输出时需要根据时区转换为本地时间 Dates NSDate类提供了创建date,比较date以及计算两个date之间间隔的功能.Date对象是不可改变的. 如 ...
- 170317、到底什么时候该使用MQ？
一.缘起 一切脱离业务的架构设计与新技术引入都是耍流氓. 引入一个技术之前,首先应该解答的问题是,这个技术解决什么问题. 就像微服务分层架构之前,应该首先回答,为什么要引入微服务,微服务究竟解决什么问 ...