requirejs

讲requirejs之前先来讲一下模块化的概念

模块化

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。

打个比方，模块化就像积木

每块积木 都是一个模块， 可以独立存在 ，也可以组合使用
可以存在依赖 尽量减少

在编程中模块是什么概念？
1个JS文件
1个函数
1个对象
1条语句
1个变量

模块作用 ：单一

例如：
bootstrap 依赖 jQuery
jQuery-UI 依赖 jQuery
jquery-tabs.js 依赖 jQuery

ES6模块化

export 输出模块
import 输入模块
必须运行在服务器环境

AMD

AMD 异步模块定义
提供异步加载模块的机制
特点: 提前执行 ， 提前对模块进行异步加载
优点: 依赖出错可以被尽早发现
缺点: 浪费资源（不管用没用到，都会去加载）
代表作品: require.js
官网 https://requirejs.org/

CMD

CMD 通用模块定义
特点: 延迟加载 按需求动态加载模块
优点: 减少资源浪费
缺点: 错误延后
代表作品: sea.js 玉伯

CommonJS

后端模块化规范
CommonJS模块的特点如下：
所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其在代码中出现的顺序。

---

讲一下requirejs
requirejs 是一个JavaScript模块加载器。

一、怎么来实现模块化操作呢？
我是先用nodejs将requirejs下载下来，命令语句为：npm i requirejs -S

在index.html中

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

data-main 引入入口文件

在main.js中（入口文件）

// 该文件是入口文件
requirejs.config({  //配置模块
//基础路径，可以有也可以没有，用来拼接路径的
// baseUrl: '../../node_modules',
    
// paths 是模块路径
    // 对象的形式 
    // 属性名是  模块名
    // 属性值是  模块的路径
    // 注意 不要有.js的结尾
    paths: {
        jquery:'../../node_modules/jquery/dist/jquery.min',
    }
});

// require()
// 功能函数
// 接收两个参数  
// 第一个参数 是一个数组(依赖列表)
// 第二个参数 回调函数
// 依赖 注入
require(['jquery'],function($){  //[模块名] ; (模块的别名)
    $('#btn').on('click',function(){
        alert(1);
    })
});

注意：细看注释，注释更助于理解

二、为什么叫注入？
Function( $ )这是一个回调函数，$是个形参，并没有实参带入；这类似于之前事件函数中的形参ev，并没有传参，其实是DOM自动将参数注入进去的。就是我们需要一个东西的时候，那么他会自动传入一个参数，所以我们只需要写一个形参即可，这就是依赖注入

三、上面这种情况是因为jquery支持requirejs;但并不是所有的第三方模块都支持requirejs，怎么解决这个问题呢？

在index.js中（主页功能模块）

// 主页功能模块

// 自定义模块
// define()
// 接收两个参数
// 第一个参数 数组 依赖列表 填入的是依赖的模块名
// 第二个参数 模块本身
// 注意点  回调函数中需要返回一个对象
define(['jquery'],function($){//如果没有依赖的模块，那就让数组空着[]
    return {
        sayHi:function(){
            console.log('hi');
        },
        addEvent:function(selector,type){
            $(selector).on(type,function(){
                alert(123);
            });
        }
    }
});

自定义好模块，再去入口文件进行模块配置，配置好后再执行require()功能函数（最后的操作都需要回归到入口文件中）

四、但是有些第三方模块之间存在依赖关系，那么怎么办呢？

在入口文件的模块配置中添加shim来添加模块的依赖关系

在main.js中（入口文件）

requirejs.config({
    // baseUrl: '../../node_modules',//基础路径，可以有也可以没有，用来拼接路径的
    paths: {
        jquery: '../../node_modules/jquery/dist/jquery.min',
        index:'./index',
        md5:'./jquery.md5'
    },
    shim:{
        md5:['jquery']
    }
});

然后再去执行功能函数

require(['md5'],function(md5){
    console.log($.md5('abc'));
})