关于requirejs:AMD规范之requirejs
写在后面AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。目前,次要有两个Javascript库实现了AMD标准:require.js 和 curl.js。这里介绍 require.js。既然是模块,就波及到两个通用的问题:1. 模块如何定义。2. 模块如何加载。 定义模块在 require.js 中,定义一个模块的形式为: define(callback)// ordefine([...modules], callback)能够看出,在引入了 require.js 之后,全局提供了一个 define 函数,用于模块的定义。当 define 函数只接管到一个参数时,该参数为该模块的回调函数,在模块被加载时调用,函数的返回值即作为该模块的导出值。当 define 函数接管到两个参数时,第一个参数为该模块的依赖数组,第二个函数为该模块的回调函数,函数的参数顺次为依赖数组的每一项。函数的返回值为该模块的导出值。 由模块定义的形式能够看出,define 函数并未提供定义模块名字的地位,那怎么惟一定义这个模块的名字呢?援用这个模块时的名字是什么呢?答案是文件名。 require.js要求,每个模块是一个独自的js文件。 加载模块在 require.js 中,加载一个模块的形式为: require([...modules], callback)require 函数的第一个参数为要加载的模块,第二个函数为回调函数,在后面的模块加载实现后会调用回调函数,并将加载的模块的返回值顺次传递给回调函数。 示例上面以在浏览器我的项目中援用 require.js 为例展现其用法。我的项目构造如下: 1️ 浏览器中引入 require.js 须要用 data-main 属性指明 require.js 的入文件,即主程序。 // index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amd test</title></head><body> <script data-main="js/main.js" src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script></body></html>2️ 定义 a 模块和 b 模块 // a.jsdefine(function() { return { sayHi: function() { console.log('我是 A 模块!'); } }})// b.jsdefine(['a'], function(a) { return { sayHi: function() { console.log('我是 B 模块!'); a.sayHi() } }})3️ 定义主模块,main.js ...