AMD规范说明

AMD全称是：Asynchronous Module Definition(异步模块定义)，github地址

是专门用于浏览器端, 模块的加载是异步的

AMD规范基本语法

定义暴露模块

//定义没有依赖的模块

define(function(){

    return 模块

})
//定义有依赖的模块，module1和m1一一对应

define(['module1', 'module2'], function(m1, m2){

    return 模块

})

引入使用模块

require(['module1', 'module2'], function(m1, m2){

    使用m1/m2

})

未使用AMD规范的模块化

// 没有依赖的模块

(function (window) {

  let msg = 'atguigu.com'

  function getMsg() {

    return msg.toUpperCase()

  }

  window.dataService = {getMsg}

})(window)
// 依赖dataService模块，调用dataService的getMsg方法

(function (window, dataService) {

  let name = 'Tom'

  function showMsg() {

    alert(dataService.getMsg() + ', ' + name)

  }

  window.alerter = {showMsg}

})(window, dataService)
(function (alerter) {

  alerter.showMsg()

})(alerter)
<!DOCTYPE html>

<html>

<head>

  <title>Modular Demo 1</title>

</head>

<body>

<div>

  <h1>Modular Demo 1: 未使用AMD(require.js)</h1>

</div>

<script type='text/javascript' src='js/modules/dataService.js'></script>

<script type='text/javascript' src='js/modules/alerter.js'></script>

<script type="text/javascript" src="js/main.js"></script>

</body>

</html>

AMD规范的实现（浏览器端）

AMD规范需要使用到require.js这个插件，下载require.js, 并引入，将require.js导入项目: js/libs/require.js

创建项目结构

|-js

  |-libs

    |-require.js

  |-modules

    |-alerter.js

    |-dataService.js

  |-main.js

|-index.html

定义require.js的模块代码：dataService.js

define(function () {

  let msg = 'dataService.js'

  function getMsg() {

    return msg.toUpperCase()

  }

  return {getMsg} //暴露模块中的getMsg方法

})

定义require.js的模块代码：alerter.js

/*

 定义有依赖的模块

 */

define(['dataService', 'jquery'], function (dataService, $) {

  let name = 'Tom2'

  function showMsg() {

    $('body').css('background', 'gray')

    alert(dataService.getMsg() + ', ' + name)

  }

  return {showMsg}

})

应用主(入口)js: main.js

(function () {

  //配置

  require.config({

    //基本路径

    baseUrl: 'js/',

    //映射: 模块标识名: 路径

    paths: {

      //自定义模块

      'alerter': 'modules/alerter',

      'dataService': 'modules/dataService',

      //库模块

      'jquery': 'libs/jquery-1.10.1', // jquery遵循AMD规范，模块标识名是jquery（小写）

      'angular': 'libs/angular'

    },

    //配置不兼容AMD的模块

    shim: {

      angular: {

        exports: 'angular'

      }

    }

  })

  //引入模块使用

  require(['alerter', 'angular'], function (alerter, angular) {

    alerter.showMsg()

    console.log(angular);

  })

})()
<!DOCTYPE html>

<html>

<head>

<title>Modular Demo 2</title>

</head>

<body>

    <script type="text/javascript" src="js/libs/require.js" data-main="js/main.js"></script>

 </body>

</html>

js模块化规范—AMD规范的更多相关文章

  1. JS 模块化 - 03 AMD 规范与 Require JS

    1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...

  2. js模块化开发——AMD规范

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就 ...

  3. js中的AMD规范

    回首萧瑟,残月挂角,孤草弄影. 看了一下上一篇随笔的日期,距离上一篇日志又过去了许久.在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力.闲下 ...

  4. JavaSript模块规范 - AMD规范与CMD规范介绍（转）

    JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...

  5. JavaSript模块规范 - AMD规范与CMD规范介绍 (转载lovenyf.blog.chinaunix.net)

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

  6. 【转】JavaSript模块规范 - AMD规范与CMD规范介绍

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

  7. JavaSript模块规范 - AMD规范与CMD规范介绍[转]

    原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...

  8. JavaSript模块规范 - AMD规范与CMD规范介绍 （转）

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

  9. javascript模块化编程(AMD规范的加载器)

    关于AMD规范可以参考阮一峰的这篇文章Javascript模块化编程(二):AMD规范 简单来说,AMD规范就是异步方式加载模块的一种方式,避免因为模块加载过慢而导致浏览器“假死”. 先贴一个学习地址 ...

随机推荐

  1. 获取json串里的某个属性值

    string jsonText = "{\"beijing\":{\"zone\":\"海淀\",\"zone_en\& ...

  2. [Linux] Nginx响应压缩gzip

    压缩和解压缩 .本节介绍如何配置响应的压缩或解压缩以及发送压缩文件. gzip on; .NGINX仅使用MIME类型text / html压缩响应 gzip_types text/plain app ...

  3. [PHP] 多进程通信-消息队列使用

    向消息队列发送数据和获取数据的测试 <?php $key=ftok(__FILE__,'a'); //获取消息队列 $queue=msg_get_queue($key,0666); //发送消息 ...

  4. 月薪15k的测试员需要学习什么技术？

    想了很久,决定还是要写一篇这样的文章出来,月薪15k的测试员需要学习什么技术?我觉得测试想要月薪15k并不难,只要做到我说的这几点肯定是可以的! 克服懒惰 我觉得,越是聪明的人越是觉得自己“懒惰”.大 ...

  5. 黑客常用 Linux 入侵常用命令

    大学曾误入歧途算是一个脚本小子.... 系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cp ...

  6. 12. ReadWriteLock 读写锁

    package com.gf.demo11; import java.util.concurrent.locks.ReadWriteLock; import java.util.concurrent. ...

  7. HDU 1847 Good Luck in CET-4 Everybody!(找规律版巴什博奕)

    Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  8. Dynamics 365工作流报错：您无法登陆系统。原因可能是您的用户记录或您所属的业务部门在Microsoft Dynamics 365中已被禁用。

    本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复265或者20170926可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  9. Android为TV端助力 关于线程的那些事

    今天发现之前自己一直有个误区,new Runnable(run()方法){}原来它不是一定创建一个线程 如果用主线程的handler去post(Runnable),他就不会创建子线程,而是在主线程上执 ...

  10. 使用Visual Studio Team Services进行压力和性能测试（一）——创建基础的URL压力测试

    使用Visual Studio Team Services进行压力和性能测试(一)--创建基础的URL压力测试 概述 压力测试使应用程序更加健壮,并审核在用户负载下的行为,这样我们可以在当前的基础设施 ...