诞生背景
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. WPF 在TextBox失去焦点时检测数据，出错重新获得焦点解决办法

    WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法 在WPF的TextBox的LostFocus事件中直接使用Focus()方法会出现死循环的问题 正确的使用方式有2中方法: 方法一 ...

  2. 第十一篇：Linux中权限的再讨论( 下 )

    前言 上篇随笔讲述了Linux中权限的大致实现机制以及目录权限的相关规则.本文将讲解Linux中的三种特殊权限:SUID,SGID,Sticky权限. 看完这两篇文章,你一定会对Linux的权限有个更 ...

  3. Ubuntu16.04最快捷搭建小型局域网Git服务器

    导读 使用linux操作系统,不得不提Git版本管理器,这个Linus花了两周时间开发的分布式版本管理器(这就是大神,先膜了个拜...),毫无疑问,Git版本管理器与linux系统有着与生俱来的同一血 ...

  4. hdu4123(树形dp+单调队列)

    还没有学过RMQ,所以只能用会的单调队列做. Bob’s Race Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/3276 ...

  5. jquery中return false的作用

    jquery中的return false既阻止默认事件,又阻止冒泡: 在原生的js中,return false只有一个功能,那就是阻止默认事件. <!DOCTYPE html> <h ...

  6. 在JavaWeb项目中处理静态文件或动态链接拼接网站地址的最优处理方案

    在开发网站时候我们会遇到下面问题? - 在引用网页中引用js和css或者动态的Servlet的时候我们是写绝对路径还是相对路径? - 如果写相对路径吧,上线偶尔会报404,还要手动去拼接绝对路径 - ...

  7. EXSI5.5以上开启KVM二次虚拟化

    1,在EXSI5.5上创建centos虚拟机(过程省略) 2,开启EXSI5.5的ssh功能 3,ssh登录虚拟机 4,编辑虚拟配置文件 /vmfs/volumes/datastore1/目录下,找到 ...

  8. w[wi].disabled = true;

    w 目的:订房页面,已被预订的房间的时间段的区域td点击不弹出bootstrap模态框. <script> var w = document.querySelectorAll(" ...

  9. ansible-puppet-saltstack---ITAMS

    ansible http://www.cnblogs.com/ee900222/p/ansible.html http://ju.outofmemory.cn/entry/67581 http://w ...

  10. Java 代码实现Http 的GET和POST 请求

    先来个传统的,不过这个里面有些类已经标明 deprecated,所以之后还有更好的方法,起码没有被标明 deprecated的类和方法. 前两个方法是有deprecated的情况.后面用HttpURL ...