诞生背景
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的更多相关文章

  1. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  2. js模块定义——支持CMD&AMD&直接加载

    /* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...

  3. JavaSript模块规范 - AMD规范与CMD规范介绍

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

  4. AMD电脑装完Winsows10后开机蓝屏,报错代码:cdmsnroot_s.sys

    背景:今天装了个WIN10,电脑配置:联想 IdeaPad   Z485      : AMD   A8处理器      .完成安装后电脑没有问题,安装了驱动程序后将           电脑用360 ...

  5. JavaScript的模块化之AMD&CMD规范

    前端开发常常会遇到的问题: 1.恼人的命名冲突: 2.繁琐的文件依赖: 模块化开发的优势: 1.解决命名冲突和依赖管理: 2.模块的版本管理: 3.提高代码的可维护性: 4.前端性能优化: JavaS ...

  6. Javascript模块化编程(二):AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

  7. CommonJS, AMD 和 RequireJS之间的关系(转载)

    先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行, ...

  8. 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,简直无语 ...

  9. AMD与CMD(转载)

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

  10. AMD&CommonJS

    最近在学习nodejs的KOA框架,在查资料的时候遇见了点问题,顺着信息一步一步找下去,让我了解了一下一直以来不是很明白的什么时候用AMD规范,什么时候用CommonJS规范问题. CommonJS一 ...

随机推荐

  1. HBaseclientAPI基本操作

    Java类与HBase数据模型 HBaseConfiguration 包名 : org.apache.hadoop.hbase.HBaseConfiguration 作用:对HBase进行配置. 使用 ...

  2. 自动化测试的组成部分:SEARCH

    在考虑自动化测试用例时,不仅仅要考虑测试的执行步骤.在运行任何步骤之前,程序必须处在能够执行测试的状态.在测试执行后,至关重要的是知道测试是否通过,并且测试结果一定要被保存到某处以待检查或进一步分析. ...

  3. 神经网络Batch Normalization——学习笔记

    训练神经网络的过程,就是在求未知参数(权重).让网络搭建起来,得到理想的结果. 分类-监督学习. 反向传播求权重:每一层在算偏导数.局部梯度,链式法则. 激活函数: sigmoid仅中间段趋势良好 对 ...

  4. win10 设置C盘访问权限

    “以管理员身份运行” cmd.exe C:\Windows\system32>icacls "C:\Program Files\Epic Games" /setintegri ...

  5. Socket通信编程实例(SIB和SS'SOB)

    客户端: package socket; import java.io.BufferedReader; import java.io.IOException; import java.io.Input ...

  6. jquery表单验证插件 jquery.form.js ------转载

    Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...

  7. TCP连接的建立与终止过程详解

    TCP连接的建立与终止: 1.TCP连接的建立      设主机B运行一个服务器进程,它先发出一个被动打开命令,告诉它的TCP要准备接收客户进程的连续请求,然后服务进程就处于听的状态.不断检测是否有客 ...

  8. 【BZOJ2525】[Poi2011]Dynamite 二分+树形DP

    [BZOJ2525][Poi2011]Dynamite Description Byteotian Cave的结构是一棵N个节点的树,其中某些点上面已经安置了炸.药,现在需要点燃M个点上的引线引爆所有 ...

  9. 160309、Spring AOP操作action时无法注入,报空指针错误

    今天帮同事看个问题,action注入失败,代码没问题,主要是stuts2权限移交的问题,特此记录一下 Spring AOP操作action时无法注入,报NullPointer异常 当使用Spring ...

  10. Servlet的请求转发和重定向

    在学习servlet中对于转发和重定向的理解是非常重要的,但是常常把重定向和转发给混了,今天特地花点时间来总结以下. 一.servlet的转发 1.请求原理图如下所示:  2.可以简单理解转发就好比一 ...