购物车逻辑和事件轮询

购物车逻辑

• 需要把加入购物车的数据从localStorage里面取出来
• 根据取出来的数据进行判断渲染页面
  • 如果数组里面没有数据，就给用户渲染一个提示信息
    • if(!this.list.length){}
  • 如果数组里面有数据，根据数据渲染购物车完整结构
    • this.render()
• 给最外层的元素做事件委派
  • this.cartTable .addEventListerner(‘click’,(e)=>{})
  • 获取事件目标对象 let target=e.target || e.srcElement
  • 全选功能
    • if(target.className=‘selectAll’){}
    • 获取状态 let type = terget.checked
    • 遍历
      this.list.forEach(item=>{
      item.is_select=type
      })
    • 进行赋值 ，直接把 遍历的元素赋值给全选框的状态
    • 渲染页面
  • 单选功能
    • 获取定义属性
    • 使用find（）方法通过咱们自定义的ID和数据的id进行对比，拿到数据
    • 使用拿到的数据进行取反操作 goods.is_select=!goods.is_select
    • 去到渲染的函数里面把对应的单选框的标记的状态进行判断 ${item.is_select && ‘checked’}
    • 渲染页面
  • 商品数量增加
    • 获取自定义属性
    • 使用find（）方法通过咱们自定义的id和数据进行对比，拿到数据
    • 判断库存，如果满足了数量就不能增加了
    • 让拿到的数据自增 goods.cart_number++
    • 渲染页面
  • 商品数量减少
    • 获取自定义属性
    • 使用find（）方法通过咱们自定义的id和数据的id进行对比，拿到数据
    • 判断库存，最少商品数量要为1
    • 让拿到的数据的数量自减 goods.cart_number–
    • 渲染页面
    • 判断下数组是否为空（！this.list.length）{this.selectAll.checked == false}
  • 单个删除功能
    • 获取自定义属性
    • 使用findIndex（）方法通过咱们自定义的id和数据的id进行对比，拿到下标
    • this.list.splice(index,1)
    • 渲染页面
    • 判断下数组是否为空（！this.list.length）{this.selectAll.checked == false}
  • 选中删除功能
    • 使用filter()方法进行过滤
    • item.is_select == false,返回的是没有选中的数据
    • 重新赋值 this.list = data
    • 渲染页面

• 计算总的数量和总价格
  • 需要把加入购物车的数据从localStorage里面取出来
  • 声明一个计算数量和一个计算总价的变量
  • 遍历数据
    • 在变量中进行判断，看是否为选中的状态，如果是选中的，就计算
    • 使用every()进行判断，看全选框状态是否为选中状态（因为如果放在外面，空数组every直接返回true）
    • 进行赋值操作

事件轮询

• eventLoop
• 描述的是同步代码和异步代码在浏览器中执行机制是什么样的
• 因为js是单线程的语言，所以出现了异步代码
• 调用栈
  • 先进后出的特点
  • 代码在执行之前会先进行预处理，重新排列出栈
  • 出栈的代码和你最终执行的代码顺序是不一样的，因为最早执行的代码顺序是金经过处理的，并不是你看到的它排列在代码第一行就先执行
• 同步代码直接执行
• 如果是异步代码，先会交给web API，进行队列分配
• 如果是属于宏任务的队列的就放在它里面
• 如果是属于微任务队列的就放在它里面、
• 宏任务执行一次，再清空一次微任务队列
• 循环访问宏任务再访问微任务