1.前端模块化
js模块化提供几种规范
1.commonjs 规范 代表的就是 onde 适合后台开发 因为是同步的，服务器是运行比较快等待时间不长，common.js 不适合用于前端，前端客户端是浏览器，浏览器追求的是异步加载，浏览器不能等太长时间。
2.前端模块的规范是 Amd 规范 代表的就是 requires，它是异步的，很多前端框架都是用的是 Amd 规范 比如 jquery angular
3. 第三个模块规范是 es6
2.模块化的操作
1.commonjs 的操作
所有的模块化都是两个方向，暴露模块接口和引入模块
module.exports={} 暴露本质是一个 exports 的对象
require（路径）引入一个模块
以上是后台的 在后台 node 可以直接运行，在客户端（浏览器）不能运行，需要对文件打包解析。
打包工具：webpack gulp
前端模块：不借用任何规范自己怎么写？
自定义前端模块
案例分析：
定义一个feixiang模块没有任何依赖，在定义一个huiting模块，这个模块要依赖feixiang模块，然后再定义主文件 index.js 它依赖hiuting模块
1.定义不依赖其它模块
(function(){
// 定义一个feixiang模块
var name="hello 模块一"
function getName(){
console.log(name)
}
// 暴露模块，需要后面的所有js文件都能访问这个模块，唯一的方法，将该模块注册在window下
window.feixiang={//暴露模块名字是feixiang
getName:getName//这是暴露的属性
}
})(window)
/*
* 为什么加自调用函数?
* 因为自调用函数执行会形成一个私有作用域，私有作用域对内部变量进行保护
*
*/
2.定义依赖其它模块
(function(window,feixiang){
var name="1807 第二个模块"
function show(){
console.log(name)
}
function yilai(){
// 这个方法来自于飞翔模块
// 怎么引入？
feixiang.getName()
}
console.log(feixiang.getName())
//暴露会婷模块接口,等于暴露了两个接口
window.huiting={
show:show,
yilai:yilai
}
})(window,feixiang)
//将飞翔模块注入会婷模块里
在主文件中引入这两个模块
(function(window,huiting){
huiting.show()
huiting.yilai()
})(window,huiting)
HTML文件
注意事项：
1.依赖关系千万不能出错
这种模块的缺点，会发送多次请求，但依赖关系不能放错顺序
3.前端模块化规范 amd
Amd 是前端模块的一种规范，全程 async module definition 异步模块加载机制，是一个规范（标准），所有需要按照这个规范去定义模块和使用模块
1.require 提供了一个一个全局方法 叫 define() 用来定义模块
定义模块分两种：
1.不依赖其它模块
2.依赖其它模块
定义不依赖其它模块
//如果不依赖其它模块 参数就是一个函数
define(function(){
var mod="我是mod1"
function mod1(){
return mod
}
// return 暴露接口
return{
mod1:mod1
}
})
定义依赖其它模块
//定义mod2模块，依赖mod1模块
define(["mm1","jquery"],function(mjiaozi,$){
// []数组就是这个需要依赖的模块
function getMes(){//打印mod1里面数据
console.log(mjiaozi.mod1())
$("#div").css("background","red")
}
//暴露接口
return{
getMes:getMes
}
})
如何使用这俩模块
在主文件分两部分，一部分是配置模块，一部分使用模块
//引入模块
//第一对模块进行配置
requirejs.config({
// baseUrl:"require",//配置查找到根目录
// 配置模块名称,和路径.属性是模块名
paths:{
"mm1":"./module/mod1", //不能带后缀名，自己会默认后面有后缀名
"mm2":"./module/mod2",
"jquery":"./js/jquery-3.3.1"
}
})
//第二对模块进行配置
require(["mm2"],function(mod2s){
mod2s.getMes()
})