Javascript高级模块化

RequireJS 是一个非常小巧的 javascript 模块载入框架，是AMD（Asynchronous Module Definition，异步模块加载机制）规范最好的实现之一。

使用requireJS（AMD）异步加载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/require2.1.11.js"></script>
    <script type="text/javascript">
        require(["js/test-01"]);
    </script>
</head>
<body>
<h1>Hello requireJS</h1>
</body>
</html>

test-02.js文件

define(function(){
    function fn1() {
        alert("Hello requirejs~~~");
    }
    fn1();
});

基本API

requireJS 会定义三个变量： define、 require、 requirejs。

require === requirejs，一般使用 require 更简短。
2.define 从名字就可以看出这个 api 是用来定义一个模块。
3.require 加载依赖模块，并执行加载完后的回调函数。

创建的test-02.js即是定义的模块
之前的例子中加载模块都是本地 js，但是大部分情况下网页需要加载的 JS 可能来自本地服务器、其他网站或 CDN，这样就不能通过这种方式来加载了，我们通过定义require的config方法实现对外部js文件的配置：

require.config({
    paths : {        //这样配置，减轻本地服务器的压力
        "jquiry": "",
        "test1" : "js/test-01",
        "test2" : "js/test-02"
    }
});

require(["test1","test2"]);

那么在引用外部js文件时，就不需要书写过多的js标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="lib/require2.1.11.js"></script>
    <script src="js/config.js"></script>
</head>
<body>
    <h1>Hello requireJS</h1>
</body>
</html>

1.引入requireJS源代码

2.require这个方法==requireJS 功（只有所有模块都加载成功，才会回调）
（3）是一个回调函数，加载失败

使用define的形式代替闭包函数.

Javascript高级模块化

使用requireJS（AMD）异步加载

基本API

推荐阅读更多精彩内容