什么是模块化?
将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。
模块化思想
宏观角度:用模块化开发,代替传统的开发。
传控开发:就是通过标签页面加载文件。
模块化开发:就是确定主模块,主模块中加载其他模块。
模块与模块的关系是相互独立的。
模块化开发步骤:
1.要在主页面引入require.js文件,作用:require.js 在没有写其他配置信息时,直接解析出js文件。
2.有一个主模块,使用require方法:在一个单页面应用中,只会出现一次 require,其他模块都是define 。
实现其他模块加载到主模块中
require([],()=>{}):
参一:[加载模块] 也就是加载模块,可直接写入文件名,也可以写入文件地址。
参二:回调函数是主处理模块所有的业务。
3.子模块,可以有多个:除了主模块是使用require方法,其他子模块都是define 。
define([‘cartDetail’],()=>{
//这里实现当前模块的功能
})
4.主模块和子模块的关系:把子模块的文件路径写如主模块的[]中即可加载子模块。
例如:
主模块命名为(cart.js):
require([‘cartDetail’],()=>{
//主模块
})
子模块:命名为(cartDetail.js)
define([],()=>{
//子模块
})
注意:模块之间不可以循环操作。例如上方cart.js文件可以加载cartDetail.js内容,但cartDetail.js里不可以再加载cart.js
返回值
根据需求加载模块:require()中的 回调函数 中 注入的模块是一一对应的关系.
作用:接收模块的返回值。
所谓返回值:就相当于变量重新赋值 var cated = return 后面的内容 var usered = {}
例如:
主页面html
<script type="text/javascript" src="../require.js" ></script>
<script>
//加载cart.js文件
require(['cart'],(carted)=>{
let cart = document.getElementById('cart');
let cd = document.getElementById('cartDetail');
let cartG = document.getElementById('cartG');
cart.onclick = ()=>{
carted.a();
}
cd.onclick = ()=>{
carted.carSon.say();
}
cartG.onclick = ()=>{
carted.carSon.cartGdSon.aaa();
}
})
</script>
模块一:cart.js文件
define([‘cartDetail’],(cartD)=>{
//完成需求根据需求加载模块。
return{
a(){
console.log(‘根据需求加载模块,购物车模块’)
},
carSon:cartD
}
})
模块二:cartDetail.js文件
define([‘cartGrandson’],(cartG)=>{
return{
say(){
console.log(‘我是,购物车详情模块’)
},
cartGdSon:cartG
}
})
模块三:cartGrandson.js文件
define([],()=>{
return{
aaa(){
console.log(‘我是,购物车模块的孙子’)
}
}
})
入口文件
单页面显示模式:
要求html文件只存放html标签
简写方式:data-main 不是自定义属性,是require给我们提供的,加载主入口文件的属性。
app.js为主模块,负责接收html单页面的所有内容。
例如:
html页面
require([‘jquery’,’./js/cart.js’],($,cart)=>{
//主模块内容,用require方法
$(’#box’).css({
width:‘200px’,
height:‘200px’,
border:‘1px solid red’
})
$(’#add’).click(()=>{
$(‘body’).append((cart.creatEl))
})
})
//amd的配置
require.config({
//配置模块的地址,这里只配置常用模块,一般为第三方模块。
paths:{
jquery:’./js/lib/jquery-3.3.1.min’
}
})
cart.js页面
子模块用define方法,通过return的方式把数据传输给主模块,通过主模块渲染到html上
define([‘jquery’],($)=>{
return{
creatEl(){
let formEl=’’+
‘’+
‘’+
‘’+
‘’+
‘添加’+
‘’
return formEl
}
}
})