AMD规范和requirejs入门

AMD(Asynchronous Module Definition)翻译为异步模块定义。异步强调的是，在加载模块以及模块所依赖的其它模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度。用于浏览器端的异步模块规范

CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近.是国内的一个叫玉伯的人写的。浏览器端的模块规范

CommonJS是服务器端的模块规范。nodejs就是CommonJS规范实现的。

我们要介绍的require.js就是AMD规范实现的一个库。

requirejs的作用

require.js可以很好的解决两个问题

1.实现js文件的异步加载，避免网页失去响应

2.管理模块之间的依赖性，便于代码的编写和维护。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
        requirejs只开放了两个函数
        define 定义模块
        define('模块名',[依赖列表]，实现模块的函数)
        注意:通常我们不写模块名，文件名就是模块名
        require 使用模块
        语法:require([依赖列表],函数)

       注意:
        a.require可以同时加载多个模块，
        b.加载多个模块时函数一定要写多个形式参数，形式参数必须与模块进行一一对应。
        c.require===requirejs
    </title>
    <script src="Scripts/require.js"></script>
    <script>
        require(['./Scripts/04.js','./Scripts/04-2.js'], function (a,b) {
           // console.log(a);
            a.show();
            console.log(b);
        });
    </script>
</head>
<body>

</body>
</html>

//定义模块
define(function () {
    return {
        show: function show() {
            console.log("今天发生一件事,张三掉水沟里了");
        }
    }
  });

define(['./jquery-1.10.2.js'], function (a) {

    return $;
});

   requirejs的配置:
        require.config({
          baseUrl:设置所有模块的公共路径
          paths:为我们所有的模块设置别名
     });
     注意:
        1.如果要让配置对象起效果必须将依赖设置为模块名(没有扩展名的文件名)，不是完整路径。
        2.以对象形式为paths配置别名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
        requirejs的配置:
           require.config({
             baseUrl:设置所有模块的公共路径
             paths:为我们所有的模块设置别名
        });
        注意:
           1.如果要让配置对象起效果必须将依赖设置为模块名(没有扩展名的文件名)，不是完整路径。
           2.以对象形式为paths配置别名。
    </title>
    <script src="Scripts/require.js"></script>
</head>
<body>

     <script>

         require.config({
             baseUrl: './Scripts/',
             paths: {
                 jq: 'jquery-1.10.2',
                 '2':'05-2'
                   
             }
         });
         require(['jq','05', '2'], function (c,a, b) {
             // console.log(a);
             a.show();
             console.log(b);
             console.log(c);
         });
     </script>

</body>
</html>

requirejs的案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
     <script src="Scripts/require.js"></script>
</head>
<body>
    <script>
        require(["./Scripts/06.js"], function (a) {
            console.log(a);
            console.log( a.add(10, 20));
           });
    </script>
</body>
</html>

//衬衣模块
//define({
//    color: 'black',
//    size: 'XL',
//    price:100
//});



//数学模块
define(function () {
    var add = function (x, y) {
        return x + y;
    };
    return {
        add
    };
});

sometimes the hardest part isn't letting go,but rather start over