前端模块化 AMD 详解

主要来介绍require.js的使用

开始之前先给大家看一下同步加载出现的问题：

	<script src="a.js"></script>

　　<script src="b.js"></script>

　　<script src="d.js"></script>

　　<script src="e.js"></script>

　　<script src="f.js"></script>

　　<script src="g.js"></script>

上面这样加载主要出现的问题：

• 加载的时候，浏览器会停止对网页的渲染，加载的文件越多，网页失去响应的时间就会越长；
• 文件之间是存在依赖关系的，比如b.js 依赖于a.js ，因此必须严格保证文件之间的加载顺序，依赖性最大的文件一定要放在最后面加载，而且依赖性如果很复杂，维护起来将很麻烦。

为了解决这样的问题 于是有了require.js

• 实现js文件的异步加载，避免网页失去响应
• 管理每个模块之间的依赖项，便于维护

官网地址http://requirejs.org/

模块化的标准

• AMD ，异步加载模块require.js。依赖前置：在一开始就将所有依赖项加载完全。
• CMD，通用模块定义sea.js。依赖延迟，在需要的时候才去加载。

现在比较常用的AMD

接下来看一下如何使用

主要分为3步：

1. 下载下来之后引包，把它放在目录上。如

　<script src="js/require.js"></script>

2. 然后定义模块，
   • 每个模块都有自己独立的作用域
   • 在定义模块的时候，需要使用requirejs提供的函数define() 进行定义
   • 需要使用语法如下

define("模块名称", ["模块的依赖项"], function(){

   模块中所有的代码全都放到这个函数中

})

3. 在require.js中，引用一个模块使用require.js提供的函数 require()

语法： require(["模块文件的路径(不带.js后缀的)"], function(){

    模块加载成功之后的回调函数

    模块的加载是异步的，在模块加载完成之后，才能使用模块的相关功能

})

模块的注意项

定义模块的时候，有导出项的情况

• 如果有导出项，只需要把导出项通过return语句进行返回即可！引用模块时。

模块有导出项，怎么使用导出项？

• 要接收模块的返回值，那么就在回调函数中的形参里声明形参来接收
• requiresjs 会自动为形参赋值
• 引入多个模块时，形参的顺序和模块加载的顺序是一一对应的！！！
• 注意：**在请求多个模块的时候，一般将没有返回值的模块放在后面，有返回值的放在前面，因为形参的顺序和模块加载的顺序是一一对应的，则有返回值的模块则都在参数前面，这样就可以避免要为没有返回值的模块写形参

 require([ "./modules/b", "./modules/c",'./modules/a'], function(mb, mc){

	   //a 是没有导出项的
       console.log(mb);

       console.log(mc);

   })

模块的依赖项

在定义一个模块的时候，这个模块内部可能会使用到其他模块的内容，这些其他模块就可以称作当前模块的依赖项

 //5-模块的 依赖项

define(['./c'],function(toolbox){

    console.log(toolbox);

});

模块路径的查找方式

​ 在require.js中，模块路径的查找方式, 一共有三种：

1. 不做任何配置，直接以当前文件的路径作为参照 require(["./modules/a"])
2. 如果设置了data-main属性，那么模块的查找，会以data-main指定的文件的路径作为基础（几乎不用）
   1. data-main是一个属性，是引入require.js的script标签的属性
   2. 这个属性可以用来指定一个文件，加载文件的路径会以这路径为基础， 指定的文件会在require.js加载完毕之后，通过异步的方式加载，并且执行里面的代码,

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

3. 如果通过require.config方法配置了基础路径，那么所有的模块查找都会以这个基础路径作为参照

//config方法是用来配置require的一些加载规则的！

  require.config({

    //baseUrl 指的就是查找模块时的基础路径，所有的模块的查找都会以这个为参照

    //baseUrl 一般都被设置为绝对路径

    baseUrl: "/modules",

    //可以用这paths给模块路径设置别名（ID）

    paths: {

      dianzuan: "./gongju/diandong/zuankong/dahaode/dianzuan"

    }

  })

 

//当引用模块的时候，模块的路径  baseUrl + 引用模块的路径

// require(["dianzuan"]);

注意： 第三种方式中 找文件的规则是：baseUrl + paths

特殊情况

注意: 第三种方式中,

找文件的规则是: baseUrl + 文件路径 或者 baseUrl + paths

如果引用模块的时候, 路径写法是如下 3 种形式之一, 就不遵守上面的规则了

1. 文件路径 加上了 .js 后缀, 将不拼接基础路径, 直接按照配置的路径查找

2. 文件路径 是以 / 开头的绝对路径, 会直接以绝对路径读取 (需要加上 .js 后缀)

3. 文件路径 以 http:// 或者 https:// 开头的

第三方插件使用

支持模块化，用模块化语法引入

不支持模块化

• 没有依赖项，没有导出项，require直接引入
• 有依赖项，没有导出项
  • shim属性中进行配置
• 有依赖项且有导出项
  • shim属性中进行配置

require.config({

            baseUrl: "/modules",

            paths: {

                xyz: "./youyilai",

                jquery: "../jquery.min",

                abc: "./abc",

                

            },

            //require.js中可通过设置shim，让不支持模块化的第三方内容

            //和require.js能够实现更好的配合

            shim: {

                //配置xyz

                xyz: {

                    //设置依赖项： jquery

                    deps: ["jquery"]

                },

                //配置abc

                abc: {

                    deps: ["jquery"],

                    exports: "animate" //导出项名称

                }

            }

        })