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. ABP框架 sql语句（转载）

    ABP.Core实现SQL语句仓储,支持EF.Core兼容的数据库  来源:https://blog.csdn.net/qq_28699537/article/details/80522680?tds ...

  2. MVC3中 ViewBag、ViewData和TempData的使用和区别（转载）

    在MVC3开始,视图数据可以通过ViewBag属性访问,在MVC2中则是使用ViewData.MVC3中保留了ViewData的使用.ViewBag 是动态类型(dynamic),ViewData 是 ...

  3. 学习记录---C# Web程序获取客户端电脑信息

    问题描述:由于最近项目需要使用Mac地址与注册码进行加密处理,但是又因为Web程序的局限性不能获取客户端电脑系统信息,当然IE浏览器有一个activex控件他是可以通过Js在前端代码中直接获取的,局限 ...

  4. 【Java每日一题】20170209

    20170208问题解析请点击今日问题下方的“[Java每日一题]20170209”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...

  5. JS经典题目解析

    此次列举出一些觉得有意思的JS题目(来源于出了名的44题),相信有非常多关于这些题目的博客,写这篇博客的目的在于巩固一些知识点,希望能和读者共同进步. 1. map函数执行过程 ["1&qu ...

  6. css小知识

    7. span { display:inline-block; width:70px; /* 超出长度以...显示 */ text-overflow: ellipsis; white-space: n ...

  7. SAP MM 物料主数据MRP2 视图’Minimum Lot Size’字段

    SAP MM 物料主数据MRP2 视图’Minimum Lot Size’字段 如下物料号,MRP2视图中,维护了最小采购量为500. MRP type : PD Lot size: EX Minim ...

  8. 唯一索引的一种使用情景【有则U无则I】

    这个知识点是最近一位面试老师问我的,当时对这种方法不了解,所以只能说那个中效率低的方法了,也就是先进性select判断,然后在执行更新或者插入操作,显然这种是很麻烦的,也自我反思一下,确实有很多的知识 ...

  9. Android 程序崩溃之后fragment出现画面重叠问题

    1.解决方法: 直接在包含Fragment的Activity中复写onSaveInstanceState()方法,使其空实现 @Override protected void onSaveInstan ...

  10. LRU(最近最少使用淘汰算法)基本实现

     LRU(Least Recently Used) 出发点:在页式存储管理中,如果一页很长时间未被访问,则它在最近一段时间内也不会被访问,即时间局部性,那我们就把它调出(置换出)内存. 为了实现LRU ...