一、前端模块化-seajs
https://www.zhangxinxu.com/sp/seajs/#intro
1.提出问题
1）.全局变量污染，重名
2）当引入工具库时，工具库中的变量名与我们的变量名或方法冲突
3）使用工具库时，我们需要手动引入工具库到文件中，
4）通用组更新了前段的基础类库，但是很难做到全栈更新
5）业务组想使用通用组件，但是发现无法使用简单的几行代码就实现
6）老产品上线更新功能，就只能在老的类库上进行修改开发
7）业务合并时，容易出现前端代码冲突
、、、、、
解决方法：
前端模块化--seajs
2.seajs简介：
SeaJS是一个适用于WEB浏览器的模块加载器，使用SeaJS可以更好的组织Javascript代码，，
seajs是一个纯粹的模块加载器，他只解决一个问题：前端代码模块化，通过seajs，可以将大量的js代码封装成一个个小模块。然后轻松的实现模块的加载重用和依赖的管理
3.seajs的获取与安装
1）.终端安装
npm i spm -g
npm i seajs
2)页面直接引入
github上面获取seajs文件：https://github.com/seajs/seajs
引入：<script src='./lib.sea,js'></script>
调用：<script>
console.log(seajs.version);
</script>
4.定义模块
define()用于定义模块,一个js文件就是一个模块，只能使用一个define()来定义，如果使用多个，只会认最后一个
模块管理：在html文件中调用主模块：
seajs.use('main',function(data){
//data是主模块返回的内容
})
语法：
define()只有一个参数，
参数是字符串：就是一个字符串模块
参数是数字：就是一个数字模块
参数是对象：就是一个对象模块
参数是函数（最常用）：
这个函数中可以有三个参数：
Require：用于引入其他子模块
Exports:用于返回接口对象
Module：模块的module属性
define()有两个参数
第一个参数：数组 模块所依赖的子模块数组集合
第二个参数：define([],function(Require,Exports,Module){})
define()有三个参数：
第一个参数：表示该模块的别名
第二个参数：数组 模块所依赖的额子模块数组集合
第三个参数： 是define([],function(Require,Exports,Module){})
注意：
1）当传递模块别名时，该模块的别名应该与该模块的文件名字一样，可以使用别名调用模块，建议别名与文件名一样
2）当不传递别名时，该模块的名称与文件名字一样。路径为相对sea.js文件所在文件夹的相对路径
3）使用define()定义模块时，当一个文件中出现多个define时，只有最后一个有效，其他的都将被覆盖
5.引用模块 require()
html引入主模块使用seajs.use，模块引入其他模块使用require()
规则：
1）require()不能被简写，重写
2）require()不能被重定义】
var req=require;
function require(){}
function fun(){
var require=1233;
}
function fun(require){}
//以上四种情况都是不合法的
3)require的参数只能是完整的字符串，不能拼接，比如：
var a='ma';
require(a+'in');不允许
注意：
1）require的参数表示模块的路径，路径是相对于sea.js文件所在文件夹为根目录的相对路径，引入的是模块，.js是文件的后缀，可以省略
2）当require引入一个已经定义了模块名称(别名，三个参数)的模块时，在引入时，首先在该模块的依赖模块集合中将该模块的路径引入进来，然后使用require(name)引入模块
总结：
1）如果有别名，全部加别名，用别名调用，路径都要写在父模块的依赖集合，子模块调用时直接调用别名
2）如果没有别名，全部不要加别名，引入直接使用require（src）引入即可，模块定义只能有一个参数
3）不要阴阳调用(有别名和没有别名的同时调用)
6.模块接口返回 exports
模块的接口，当模块执行结束后向上级返回内容(暴露接口)时使用
四种返回方式：
1）直接对exports添加属性：
exports.color=‘red’
2）使用module定义：module.exports={color:'blue'}
3)使用module定义：module.exports.color='green'
4)使用return：return{color:'purple'}
需要注意的是：
1）一个模块只能使用一个接口返回方式。只能返回一个内容
2）不能对exports对象直接赋值，可以增加属性和值：
exports.name='lisi';exports.age=23;
或者给module.exports赋值对象
module.exports={}
7.module 模块属性
module中有很多属性。都是模块的属性
1）dependencies:['header/skin/skin']
表示当前模块所引用的依赖集合
2）deps：{}
也表示依赖集合（对象集合）
3）exports：{color:"cyan"}
模块返回接口内容
4）id：“hahah”
模块别名
5）uri：“file:///Applications/XAMPP/xamp......”
如果模块没有别名，id=uri
如果没有别名，uri表示该模块文件的绝对路径，如果有别名，想要引入模块，就要引入路径（uri），在调用别名（id）
8.异步加载 require.async
require方法的异步加载与use是比较类似的，在页面初始化时，使用use异步加载主模块，如果在模块中想要使用异步加载子模块，可以使用require.async()
语法：
require.async(path,fn);
path:字符串或者数组，表示需要加载的依赖的路径
fn：模块加载结束的回调函数，该函数的参数表示前边加载模块的回调函数内容，如果第一个参数是数组，那么回调函数的参数顺序就是数组的顺序
注意：
如果有if语句判断加载那个模块
同步：多个模块都会被加载，但是执行为真的分支，这个分支内容被加载，另一个分支不被引用
异步：哪个分支为真，加载那个分支，并引用，另一个分支不会被加载也不会被引用
加载：就是浏览器经文件下载下来