1 AMD 规范介绍

AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载。

AMD 规范由 Common JS 规范演进而来,前文介绍 Common JS 规范时说过,浏览器端无法直接使用 Common JS,需要使用 browserify 编译后才能运行。而 AMD 规范规范则专注于浏览器端。

1.1 定义模块

AMD 规范定义模块使用 define 函数,函数声明如下:

define(id?, dependencies?, factory)

参数含义:

- id:非必填,模块的名字。如果没有传该参数,模块的名字默认为模块加载器请求的指定脚本的名字
- dependencies:非必填,数组,定义的这个模块所需要依赖的模块的数组。如果定义的这个模块不依赖于其他模块,则不需要传递该参数。
- factory:必填,工厂方法。如果为对象,则表示这个模块输出的值;如果为函数,则是这个模块要干的事。

如果传递了 dependenciesdependencies 中依赖的每项模块会在当前模块的 factory 之前执行。

1.2 加载模块

与 Common JS 规范类似,加载模块使用 require 函数,但 AMD 规范中该函数有两个参数,语法格式如下:

require([module], callback)

参数含义:

- module:数组,要加载的模块数组。
- callback:模块加载成功之后要干的事。

2 Require JS

require.js 是符合 AMD 规范的 JS 库,使用 require.js 可以实现 AMD 规范,进行模块的定义和加载。

2.1 使用准备

首先下载 require.js 文件。require.js 可以从 github 下载。(不知道是不是网络原因,官网我打不开)

在项目中创建 lib 目录,将 require.js 文件复制到 lib 目录中。

2.2 初始化目录

lib 同级目录创建目录 modules,在 modules 目录中分别创建 module1.jsmodule2.js 代表两个模块。

同时下载 moment.js 文件,将其复制到 lib 目录中。

lib 同级目录创建入口 HTML 和 JS 文件,名字分别为:index.htmlindex.js.

此时目录结构为:

|- 03_AMD/
|- lib/
|- require.js
|- moment.js
|- modules/
|- module1.js
|- module2.js
|- index.html
|- index.js

index.html 文件中通过 script 标签引入 require.js 文件,同时指定 data-main 属性:

<script src="./lib/require.js" data-main="./index.js"></script>

data-main 属性指定了在加载完 require.js 属性后,执行的入口文件,该文件也称为 主模块 。咱们的主模块为 index.html 同级路径下的 index.js

2.3 路径配置

在入口 JS 文件 index.js 中对模块进行配置:

requirejs.config({
baseUrl: './',
paths: {
m1: './modules/module1',
m2: './modules/module2',
moment: './lib/moment'
},
shim: {
moment: {
exports: 'moment'
},
}
})
  1. baseUrl 属性:指定了基本路径,后面模块路径配置都是相对于这个基本路径。
  2. paths 属性:配置各个模块的名称及对应文件路径(省略 .js 后缀)。上面分别给 module1.jsmodule2.jsmoment.js 三个模块命名为 m1m2moment。名字可以取其他名字,但路径要正确。
  3. shim 属性:当使用其他不符合 AMD 规范的模块时,可以使用该属性导出模块。(这里选择的 moment.js 是兼容 AMD 规范的库,无须配置到 shim 属性中,此处仅为了简单演示)

2.4 定义模块

前面创建了两个自定义模块,现在分别编写这两个模块。

module1.js 中定义一个简单的加法运算:

define(function () {
console.log('in module1.') function sum(num1, num2) {
console.log('module1 sum function.', num1, num2)
return num1 + num2
} return {
sum
}
})

module2.js 定义一个 calculate 函数,在该函数中需要调用 moment.js 中的格式化函数、 module1.js 中的 sum 函数,也就是说该模块(m2)依赖于 moment 模块 和 m1 模块:

define(['m1', 'moment'], function (m1, moment) {

  console.log('in module2.')

  function calculate (n1, n2) {
console.log('begin calc: ', moment().format('YYYY MMM Do h:mm:ss a'))
return m1.sum(n1, n2)
} return {
calculate
}
})

2.5 使用模块

前面在主模块 index.js 中定义了模块的路径,现在继续在该文件中通过 require 函数使用其他模块:

// ...

require(['m2'], function (m2) {
const result = m2.calculate(10, 20)
console.log(result)
})

主模块中加载 m2 模块(module2.js),并调用 m2 模块中的 calculate 函数。

2.6 运行

在浏览器中运行 index.html,浏览器控制台输出如下:

主模块(index.js)依赖于 m2 模块(module2.js),m2 模块又依赖于 m1 模块(module1.js),故 require.js 会首先加载 module1.js,输出 in module1.,然后加载 module2.js, 输出 in module2.

m1m2moment 三个模块都加载完毕后,才会执行主模块中的 factory 工厂函数。

3 总结

AMD 规范的使用:

  • 定义模块:define 函数
  • 加载模块:require 函数

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货

JS 模块化 - 03 AMD 规范与 Require JS的更多相关文章

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

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

  2. 遵循amd规范的require.js(适合浏览器端)

    1. 下载require.js 2. 引用 html <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. Javascript模块化编程:AMD规范及require.js用法【转】 - loheonly的笔记 - 前端网(W3Cfuns)

    http://www.w3cfuns.com/blog-5425789-5399326.html

  4. 模块化编程:AMD规范

    目前,通行的Javascript模块规范共有两种:ComonJS和AMD. CommonJS node.js的模块系统,就是参照CommonJS规范实现的.在ConmonJS中,有一个全局方法requ ...

  5. js中的AMD规范

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

  6. JS模块化编程(四)--require应用

    获取&使用require.js 下载最新版的Require.JS.下载之后,把它放在项目的脚本文件夹下,比如 js 文件夹下,项目结构看上去应该是: 要充分使用Require.JS,将html ...

  7. 03 AMD规范的基础使用详解

    AMD模块规范 1.1 AMD规范说明 AMD规范专门用来实现浏览器端的模块化,并且模块的加载是异步的:引入一个第三方的require.js脚本用来解析AMD规范编写的模块 1.2 基本语法 使用de ...

  8. r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解

    本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装  npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...

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

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

  10. js模块化开发 AMD CMD Commonjs

    在es6全面实行开来之前  js实现模块开发方案有: 1.AMD 异步模块开发定义  依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...

随机推荐

  1. PowerShell Start 1 - 使用Get - Help.

    详细帮助命令参见:https://msdn.microsoft.com/zh-cn/powershell/scripting/getting-started/fundamental/getting-d ...

  2. c#指定日期格式

    string TripCode = "BT"+DateTime.Now.ToString("yyyyMMddHHmmss");//出差单号

  3. 济南学习 Day 3 T1 pm

    巧克力棒(chocolate)Time Limit:1000ms Memory Limit:64MB题目描述LYK 找到了一根巧克力棒,但是这根巧克力棒太长了,LYK 无法一口吞进去.具体地,这根巧克 ...

  4. 如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。

    由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...

  5. datatables 服务器返回数据后的处理-表格数据属性的操作方法(ajax.dataSrc)

    http://dt.thxopen.com/reference/option/ajax.dataSrc.html http://datatables.net/reference/option/ajax ...

  6. Java并发专题 带返回结果的批量任务执行 CompletionService ExecutorService.invokeAll(转)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27250059 一般情况下,我们使用Runnable作为基本的任务表示形式,但是R ...

  7. T-codes & Rarely Seen Tables(Updated from previous note)

    T-codes C CO CO01/02/03:Production Order CG CG3Y:Download file from server,never used this before CM ...

  8. Python使用xml.dom解析xml

    在菜鸟教程上找了个关于电影信息的xml类型的文档,用python内置的xml.dom来解析提取一下信息. 先复习一下xml概念: XML 指可扩展标记语言(EXtensible Markup Lang ...

  9. Android工程中javax annotation Nullable找不到的替代方案

    我们在某些Android开源库中会遇到下面的引用找不到的问题:import javax.annotation.Nonnull;import javax.annotation.Nullable; 其实A ...

  10. windows10 升级1803后,远程错误提示“出现身份验证错误,要求的函数不受支持 CredSSP 加密 Oracle修正”的解决办法

    远程出现错误提示:出现身份验证错误,要求的函数不受支持 CredSSP 加密 Oracle修正 运行 gpedit.msc 本地组策略: 计算机配置>管理模板>系统>凭据分配> ...