2-AMD
诞生背景
1、随着前端逻辑越来越多，项目越来越大，开发大型项目就必须分模块开发
2、一切都那么完美，在NodeJs实现后，当人们开始热情的打算把这种实现也用于浏览器时，却发现并不适合。NodeJS应用加载的模块都是基于本地磁盘的，而浏览器却收到网络延迟的影响，而各个模块的延迟长短并不确定，这就给依赖造成了很大的麻烦，比如执行模块先于被依赖的模块下载下来了，那么是执行失败。于是AMD就出现了。
规范核心
定义模块---define('id', ['dependencies'], factory);
其中：
id: 模块标识，类型String，可省略。
dependencies: 所依赖的模块，类型Array，可省略。
factory: 模块的实现，可以使object、function等。
使用模块---require([module], callback);
也是使用关键字require，但不同于CommonJS的是，有回调
其中：
module是加载的模块，导入成功后便可以执行回调callback里的内容
实例演示
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/require.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
/**
*模块:
*功能:入口
*/
require(['./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(['./log'],function (log) {
return {
add:function (x,y) {
var sum= Number(x)+Number(y);
log.info('tools>add执行结果为：'+sum);
return sum;
}
}
})
log.js
/**
*模块:log模块
*功能:打印
*/
define(function () {
return {
info:function (str) {
console.log(str)
},
err:function (str) {
console.error(str)
}
}
})
效果
需要注意的是amd规范下，项目初始化的时候，这些所有的依赖会被立马下载并且执行，也就是把所有的依赖提前全部加载一边，才进入回调函数内执行我们的业务逻辑代码
这就是所谓的‘依赖前置，提前加载依赖’
这样页面初始化的时候任务就重了，如果依赖过多，则会出现‘卡’的情况，性能就不是太好了
这也是cmd模块开发规范出现的原因
作者总结
由于目前浏览器尚不支持模块化AMD规范，所以这些关键字无法被识别，需要先引入库require.js
2-AMD的更多相关文章
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- js模块定义——支持CMD&AMD&直接加载
/* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...
- JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- AMD电脑装完Winsows10后开机蓝屏，报错代码：cdmsnroot_s.sys
背景:今天装了个WIN10,电脑配置:联想 IdeaPad Z485 : AMD A8处理器 .完成安装后电脑没有问题,安装了驱动程序后将 电脑用360 ...
- JavaScript的模块化之AMD&CMD规范
前端开发常常会遇到的问题: 1.恼人的命名冲突: 2.繁琐的文件依赖: 模块化开发的优势: 1.解决命名冲突和依赖管理: 2.模块的版本管理: 3.提高代码的可维护性: 4.前端性能优化: JavaS ...
- Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- CommonJS, AMD 和 RequireJS之间的关系(转载)
先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行, ...
- Can't load IA 32-bit .dll on a AMD 64-bit platform错误的解决
64位的系统,64位的myeclipse,64位的jdk,64位的tomcat,结果报错:Can't load IA 64-bit .dll on a AMD 32-bit platform,简直无语 ...
- AMD与CMD（转载）
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- AMD&CommonJS
最近在学习nodejs的KOA框架,在查资料的时候遇见了点问题,顺着信息一步一步找下去,让我了解了一下一直以来不是很明白的什么时候用AMD规范,什么时候用CommonJS规范问题. CommonJS一 ...
随机推荐
- 多个return和一个return
//一个returnnamespace CleanCSharp.Methods.Dirty { class MethodExitPoints { public string GenerateAgeAp ...
- Ubuntu下Eclipse无法添加Tomcat7解决方法
Ubuntu(Linux)下在eclipse中add一个tomcatserver时发现tomcat7无法选择,但是该tomcat已经在eclipse 的server->runtime envir ...
- 《算法导论》— Chapter 12 二叉查找树
序 查找树是一种数据结构,它支持多种动态集合操作.包含Search.Minimum.Maximum.PreDecessor.Successor.Insert.Delete等.它既能够用作字典,也能够用 ...
- Linux系统下MySQL数据库的备份和恢复
当我们MySQL数据库保存重要数据的时候,备份工作极为重要.本文介绍如何使用mysqldump备份和恢复数据,使用该方法,可以将数据库中的数据备份成一个文本文件,也可将备份好的数据库迁移到另一台的服务 ...
- css图标
一.介绍 采用这种字体,我们可以避免网站制作中采用好多图片,一方面解决了浏览器的兼容性问题.另一方面,这些字体都是矢量字体,我们只要在调整这些图标时,将他们的字体大小以及颜色,我们就可以解决很多不是图 ...
- [深入理解Android卷一全文-第八章]深入理解Surface系统
由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版.而知识的传播不应该由于纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容. ...
- 此类目的是防治序列化Json字符串时的循环引用问题-------最好解决方案
http://james.newtonking.com/json/help/index.html using Newtonsoft.Json;using System;using System.Col ...
- 【BZOJ5083】普及 单调栈+二分+RMQ
[BZOJ5083]普及 Description 有一个长度为n的字符串,每一位只会是p或j.你需要取出一个子串S(从左到右或从右到左一个一个取出),使得 不管是从左往右还是从右往左取,都保证每时每刻 ...
- 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 ,添加如下内容,如果无 ...
- tortoiseSVN如何回滚（切换至）某个历史版本？
tortoiseSVN如何回滚(切换至)某个历史版本? 1.右键需要回滚的项目,tortoiseSVN - >show log 2.右键需要回滚的历史版本,选择revert to this re ...