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. Python网络编程Socket之协程

    一.服务端 __author__ = "Jent Zhang" import socket import gevent from gevent import monkey monk ...

  2. SQL Server函数之空值处理

    coalesce( expression [ ,...n ] )返回其参数中第一个非空表达式. Select coalesce(null,null,'1','2') //结果为 1 coalesce( ...

  3. 向treeview中加载数据

    1.获取树节点的值,用事件AfterSelect加载(id值的获取,用name来获取) 2.双击treeview控件得到 private void treeView1_AfterSelect(obje ...

  4. Prism 学习：从本地目录加载 Module

    在 Prism 中,将外部模块加载到主程序有以下几种方式:Code.XAML.配置文件.指定模块目录:其中,如果要使用 Code 方式来加载 Module,则需要将该 Module 引用到当前项目中: ...

  5. 自己用HashMap来模拟一个Session缓存（简易版）

    本文记录:Hibernate中一级缓存的特点. 一级缓存的细节什么操作会向一 1.级缓存放入数据 save,update,saveOrUpdate,load,get,list,iterate,lock ...

  6. Java岗 面试考点精讲（网络篇03期）

    1. OSI七层模型 总结一下: 应用用层按协议打包数据 由传输层加上双方的端口号 由网络层加上双方的IP地址 由链路层加上双方的MAC地址,并将数据拆分成数据帧 数模信号转换并由物理层传输到另一端 ...

  7. 异常：android.os.NetworkOnMainThreadException

    场景: 安卓开发时在主线程访问网络解决: 将访问网络的代码使用Thread操作 Handler handler = new Handler(){ @Override public void handl ...

  8. Myeclipse 添加插件

    配置方式添加插件,添加一个反编译插件示例 1.官网下载(http://java-decompiler.github.io/) 2.下载到本地之后,删除多余的文件(其他的插件也是如此,例如SVN) 3. ...

  9. oracle中row_number() over()

    ROW_NUMBER() OVER函数的基本用法语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN)简单的说row_number()从1开 ...

  10. 读书笔记--Android Gradle权威指南（上）

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 最近看了一本书<Android Gradle 权威指南>,对于 Gradle 理解又更深了,但不想过段时间就又忘光了,所 ...