require.js入门

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。全部依赖这个模块的语句,都定义在一个回调函数中,等到加载完成以后,这个回调函数才会运行。javascript

require([module], callback);html

在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就能够像下面这样加载。java

var math = require('math');

在define下也有所不一样git

1.对于依赖的模块,AMD(Asynchronous Module Definition)异步模块加载机制 是 提早执行,CMD(common module definition)模块定义规范 是 延迟执行。不过 RequireJS 从 2.0 开始,也改为能够延迟执行(根据写法不一样,处理方式不一样)。CMD 推崇 as lazy as possible.

2. CMD 推崇 依赖就近,AMD 推崇 依赖前置。看代码:
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖能够就近书写
b.doSomething()
// ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
}) 

说道正题。。github

先去官网下载require.js放到网页底部加载,加载一个main.jsapi

<script type="text/javascript" src="require.js" defer async="true" data-main="main"></script>

main.js下面放异步

require(['math'], function (math){
    alert(math.add(1,1));
  });

math.js下面放async

define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });

 本文参考函数

做者:玉伯
连接:https://www.zhihu.com/question/20351507/answer/14859415
来源:知乎
著做权归做者全部。商业转载请联系做者得到受权,非商业转载请注明出处ui

和阮一峰的require.jshttp://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

相关文章
相关标签/搜索