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. devtools进行热部署

    热部署的形式这里只介绍一种devtools devtools可以实现页面热部署(即页面修改后会立即生效,这个可以直接在application.properties文件中配置spring.thymele ...

  2. python面向对象学习（七）单例

    目录 1. 单例设计模式 单例设计模式的应用场景 2. __new__ 方法 3. Python 中的单例 只执行一次初始化工作 1. 单例设计模式 设计模式 设计模式 是 前人工作的总结和提炼,通常 ...

  3. Tomcat启动时项目重复加载，导致资源初始化两次！

    一.现象: 每次启动Tomcat 的时候,工程会被加载两次 二.原因: 在tomcat/conf/server.xml配置虚拟目录引起,如下配置: 我们在Host标签里配置了appBase=" ...

  4. thinkphp简洁、美观、靠谱的分页类

    我们要实现如下图分页效果 这个分页类是在thinkphp框架内置的分页类的基础上修改而来:原分页类的一些设计,在实际运用中感觉不是很方便: 1.只有一页内容时不显示分页: 2.原分页类在当前页是第一页 ...

  5. vue-awesome-swiper 水平滚动异常

    使用教程:https://github.com/cynthiawupore/vue-awesome-swiper 实例: <template> <div class="in ...

  6. angular 去掉url里面的#

    1.适合客户端的方法,但是页面不能刷新,一刷新就404 (1)在index.html里添加 <base href="/"> (2)在app.js的config里,注入$ ...

  7. js 两数组去除重复数值

    //两数组去除重复数值 mergeArray: function(arr1, arr2) { for (var i = 0; i < arr1.length; i++) { for (var j ...

  8. 小tips：JS之break，continue和return这三个语句的用法

    break语句 break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句.由于它是用来退出循环或者switch语句,所以只有当它出现在这些语句时,这种形式的break语句才是 ...

  9. 2018-08-11 中文代码示例之Spring Boot 2.0.3问好

    上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...

  10. Android SDK manager里面什么是必须下载的？

    最近公司来了位新同事,由于需要配置Android环境,但是在配置的时候却发现sdk很大,很占用空间,想复制给同事也觉得不方便,于是根据下面的图删除了一些不必要的api. 根据官方文档的描述SDK To ...