ES6—模块化

什么是模块化？
将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

模块化思想
宏观角度：用模块化开发，代替传统的开发。
传控开发：就是通过标签页面加载文件。
模块化开发：就是确定主模块，主模块中加载其他模块。
模块与模块的关系是相互独立的。

模块化开发步骤：
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页面

添加 app.js文件

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
}
}
})

猜你喜欢