前端模块化

什么是前端模块化

将代码依据不同功能，或者职责进行模块的划分，就称为前端模块化

模块化的好处

结构更轻清晰
有利于代码的维护
有利于代码的复用

模块化的标准

CommonJS
这个标准主要用在Nodejs中用于服务器端同步加载
AMD
Async Module Definition 异步模块定义，依赖前置， requirejs
CMD
Common Module Definiton 通用模块定义，依赖延迟 sea.js

requirejs

定义以及应用模块

//1. 定义模块
//具名模块
define("模块名称", ["依赖项"], function(){
    //模块内容
})
//匿名模块
define(["依赖项1", "依赖项2"], function(依赖项1的返回值, 依赖项2的返回值){
    //模块内容
    //如果模块需要返回内容给外界使用，那么需要通过return语句将指定的内容进行返回
    return {};
})

//如果没有依赖项，可以将数组参数省略掉如
define(function(){})

//2. 引用模块
require(["要引用的模块的路径(不带.js后缀)"], function(模块的返回值){
    //在引用的模块加载完成之后执行的操作
})

data-main

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

可以称为入口文件
当requirejs加载完成之后，会直接去请求这个文件，并且执行里面的内容

模块路径

不做任何设置的默认情况下，模块的路经查找，是以当前的文件做基础
如果使用data-main属性，模块路径查找，是以data-main指定的文件所在的路径为基础的
如果使用config方法配置了baseUrl,那么路径的查找将会以baseUrl配置的路径作为基础

config 方法

require.config({
    //配置基础路径用的 一般baseUrl都使用绝对路径
    baseUrl: "/",
    //paths可以用来给每个模块的路径设置一个别名，方便使用
    //具名模块的别名一定要和模块中定义的名字保持一致
    //在path中配置过的模块，找模块的时候，使用的是 baseUrl + path中的路径 来查找的
    paths:　{
        jquery: "./jquery",
        template: "./template",
        anmiate: "./animate"
    }
    //shim 可以用来帮不支持模块化的第三方模块使用到requirejs中来
    shim: {
        //属性名：要配置的模块别名
        //属性值： 对象（可以包含两个属性 exprots， deps）
        animate: {
            //deps用来配置第三方模块的依赖项
            deps: ["jquery"],
            //exports配置第三方模块的返回值
            //返回值的内容写的是一个字符串，对应的模块文件中的一个全局变量名
            exports: "animate"
        }
    }
})