前端模块化
什么是前端模块化
将代码依据不同功能，或者职责进行模块的划分，就称为前端模块化
模块化的好处
- 结构更轻清晰
- 有利于代码的维护
- 有利于代码的复用
模块化的标准
- 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"
}
}
})
