requiredjs模块加载，AMD异步模块加载

参考网站：http://www.requirejs.cn/home.html

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

IE 6+ .......... 兼容 ✔
Firefox 2+ ..... 兼容 ✔
Safari 3.2+ .... 兼容 ✔
Chrome 3+ ...... 兼容 ✔
Opera 10+ ...... 兼容 ✔

加载 JavaScript 文件

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。下列示例中展示了baseUrl的设置：

<!--This sets the baseUrl to the "scripts" directory, and
    loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"></script>

baseUrl亦可通过RequireJS config手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。

RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。你可以通过paths config设置一组脚本，这些有助于我们在使用脚本时码更少的字。查看更多

data-main 入口点

require.js 在加载的时候会检察data-main 属性:

<!--when require.js loads it will inject another script tag
    (with async attribute) for scripts/main.js-->
<script data-main="scripts/main" src="scripts/require.js"></script>

你可以在data-main指向的脚本中设置模板加载选项，然后加载第一个应用模块。.注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>

// contents of main.js:
require.config({
    paths: {
        foo: 'libs/foo-1.1.3'
    }
});

// contents of other.js:

// This code might be called before the require.config() in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function( foo ) {

});

定义模块

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。

它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。

在RequireJS中，通过向全局变量注册define函数来声明一个模块。在定义模块时，我们要遵循一下的规范：
1）一个JavaScrip文件即为一个模块，即一个JavaScrip文件只能定义一个define函数。
2）RequireJS最佳实践推荐，定义模块时不要指定模块标识。这样方便后期压缩。
3）RequireJS最佳实践推荐推行尽量将代码封装到define函数里面。尽量不要使用shim配置项。

define(['jquery'],function($){

    //你的封装的代码

 });

更多模块的定义方式，可查看官网。

加载模块

RequireJS提供require这个函数用来加载模块
1）一个JavaScrip文件最好只定义一个require模块入口。
2）require一般放在页面的入口出，用来加载其他的模块。

require(['jquery'],function($){

    // todo

});

简单的实例

目录结构

定义模块：

util.js

define(function() {
  var util = {
    getFormatDate: function(date,type){
      if(type === 1){
        return 'date1'
      }
      if(type === 2){
        return 'date2'
      }
    }
  }
  return util
});

a-util.js

define(['./util.js'], function (util) {
  var aUtil = {
    aGetFormatDate: function (date) {
      return util.getFormatDate(date,1)
    }
  }
  return aUtil
});

a.js

define(['./a-util.js'], function(aUtil) {
  var a = {
    printDate: function(date){
      console.log(aUtil.aGetFormatDate(date))
    }
  }
  return a
});

加载模块

require(['./a.js'],function(a){
  var date = new Date();
  a.printDate(date);
})

页面引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AMD</title>
</head>
<body>
  <div>test</div>
  <script data-main="./main.js" src="./require.js"></script>
</body>
</html>

在页面运行，即可看到控制台输出。

更多使用细节可参考官网：http://www.requirejs.cn/docs/start.html。

requiredjs模块加载，AMD异步模块加载

加载模块

猜你喜欢