前端模块化

require.js的使用的步骤

如何定义模块？如何引入模块？

​ 引入插件： script引入
定义插件： 用沙箱来定义插件

1-定义模块

​ 1- 每个模块都是一个单独js文件

​ 2- 每个模块必须有自己的独立的作用域

​ 定义模块的语法

​ 定义模块：
define(模块名称，[依赖项], function () {
//模块功能
//有导出项
return 导出项；
})

​ 注意点：

​ 模块名称：模块名字 一般不写，建议使用匿名模块
​ 依赖项： 可选，这个模块的运行要依赖于其他模块
模块的导出项： 模块要暴露给外界使用数据

2-引入模块

​ 引入模块语法

​ require([模块路径(不需要.js)], function (接收导出项) {

​ //模块引入完成的回调函数

​ })

引入模块

    require(['./js/a'], function () {

    console.log('模块引入完成了');            

})

3-模块有导出项的情况

​ 在引入模块时，在回调函数中用形参来接受 模块导出的数据

require(['./js/b'], function (mb) {

    console.log(mb);

    mb.say();            

})

4-页面中有多个模块，且模块有导出项

​ 注意： 导出项形参的顺序必须和引入模块顺序一一对应

//模块a 模块b 模块c 都有导出项
require(['./js/a', './js/b', './js/c'], function (ma, mb, mc) {
    console.log(ma);            

    console.log(mb);

    console.log(mc);
})

优化

将没有导出项的模块，写在最后即可；

//a.js模块没有导出项，放在最后面
require(['./js/b', './js/c', './js/a'], function (mb, mc) {          
    console.log(mb);
    console.log(mc);            
})

模块有依赖项的情况

​ require([’./js/d’], function () {

​ })

模块的路径配置问题

1-如果没有对路径做任何设置，默认以当前文件的位置 去找模块 （以相对路径去找）

require(['./js/a', './js/b', './js/c']);

2-通过设置data-main属性 来设置模块公共路径（基础路径）

​ 最终路径 = data-main 路径 + 引入的路径

​ require([‘a’,‘b’, ‘c’], function () {})

<script src="require.js"></script>
<!-- <script src="./require.js" data-main="./js/one/two/three/"></script> -->
<script>
    // require(['./js/one/two/three/four/five/zidongqiaodaima',
    //          './js/one/two/three/six/seven/zidongzhaobug'], function () {})
    // require(['four/five/zidongqiaodaima',
    //          'six/seven/zidongzhaobug'], function () {})

    // require(['a', 'b'],function (){})

    //路径配置 ： 可以将任何复杂路径和文件名都进行简化 
    require.config({
    baseUrl: './js/one/two/three/', //基础路径
    paths: {     //别名 
        //别名： 剩下的路径 
        code: 'four/five/zidongqiaodaima',
        bug: 'six/seven/zidongzhaobug'
        }
    });

    //别名的路径 = baseUrl + 别名对应的路径
    require(['code', 'bug'], function () {})

</script>

关于第三方插件模块化问题

​ 答：如果我们使用define()来定义模块，要使用require()进行引入

​ 实际工作中，一般插件都是第三方，而不是我们自己定义的

​ 第三方插件是否支持模块化？

​ 如果第三方插件用define进行定义，就可以使用require引入

​ 目前： 主流插件都是支持模块化，但是有少数不支持模块（不支持模块插件，需要我们处理）

**支持模块化插件 和不支持模块化插件区别：**

​ 1-支持模块化的插件知道自己依赖项是谁？ 在此模块执行之前，一定会先引入自己的依赖项；

​ 2-不支持模块化的插件，不知道自己的依赖项是谁， 当前自己引入完成后就会执行；

不支持模块化

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

require.config({
  baseUrl: "/modules",
  paths: {
    xyz: "./buzhichiamddeyouyilaixiangdemokuai",
    jquery: "../jquery.min",
    abc: "./buzhichiamddeyoudaochuxiangdemokuai",

  },
  //require.js中可通过设置shim，让不支持模块化的第三方内容
  //和require.js能够实现更好的配合
  shim: {
    //配置xyz
    xyz: {
      //设置依赖项： jquery
      deps: ["jquery"]
    },
    //配置abc
    abc: {
      deps: ["jquery"],
      exports: "animate" //导出项名称
    }
  }
})