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. asp.net core 依赖注入几种常见情况

    先读一篇注入入门 全面理解 ASP.NET Core 依赖注入, 学习一下基本使用 然后学习一招, 不使用接口规范, 直接写功能类, 一般情况下可以用来做单例. 参考https://www.cnblo ...

  2. IEnumerable,ICollection,IList接口问题

    最近有一个疑问:IList已经继承了ICollection<T>,而ICollection<T>继承了 IEnumerable<T>, IEnumerable,那为 ...

  3. 3.类和接口_EJ

    第13条: 使类和成员的可访问性最小化 良好的模块设计能隐藏其内部数据和其他实现细节,模块之间只通过它们的API进行通信.java语言提供了许多机制来协助隐藏信息.访问控制机制决定了类.接口和成员的可 ...

  4. python 反射机制在实际的应用场景讲解

    剖析python语言中 "反射" 机制的本质和实际应用场景一. 前言 def s1(): print("s1是这个函数的名字!") s = "s1&q ...

  5. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  6. 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = ...

  7. next.js学习笔记

    github地址: https://github.com/zeit/next.js#fetching-data-and-component-lifecycle 简介 Next.js是一个用于React ...

  8. 利用Syslog Watcher在windows下部署syslog日志服务器

    1.概述 syslog协议是各种网络设备.服务器支持的网络日志记录标准.Syslog消息提供有关网络事件和错误的信息.系统管理员使用Syslog进行网络管理和安全审核. 通过专用的syslog服务器和 ...

  9. Centos 7下VMware三台虚拟机Hadoop集群初体验

    一.下载并安装Centos 7 传送门:https://www.centos.org/download/    注:下载DVD ISO镜像 这里详解一下VMware安装中的两个过程 网卡配置 是Add ...

  10. android 可以精确到秒级的时间选择器

    android自带的时间选择器只能精确到分,但是对于某些应用要求选择的时间精确到秒级,此时只有自定义去实现这样的时间选择器了.下面介绍一个可以精确到秒级的时间选择器. 先上效果图: 下面是工程目录: ...