利用vue重构有赞商城的思路以及总结整理

<Swipe :lists="bannerLists" name="swpie.vue" v-if="bannerLists"></Swipe>

new Swiper('.swiper-container',{
   loop:true,
   pagination: '.swiper-pagination',
   autoplay: 2000
  })
  getBanner(){//获取轮播数据
   this.$http.get(url.banner).then(res=>{
    this.bannerLists = res.data.lists
    
   })

filters:{
  currency(num){
    num=num+''
    let arr=num.split('.')
    if (arr.length===1){
      return num+'.00'
    } else {
      if (arr[1].length===1){
        return num+'0'
      } else return num
    }
  }
}

<div class="price">￥{{list.price | currency}}</div>

<ul class="js-list js-lazy" data-src="/UploadFiles/2021-04-02/">

上述代码中，v-infinite-scroll="getList"表示每当下拉到一定距离时就触发methods里面的getList方法；getList方法的具体代码如下所示：


getList(){
  if (this.allLoad) return
  this.loading=true
  axios.post(url.hostLists,{
    pageNum:this.pageNum,
    pageSize:this.pageSize
  }).then((response)=>{
    let currentList=response.data.lists
    if (currentList.length<this.pageSize) this.allLoad=true
    if (this.lists) {
      this.lists=this.lists.concat(currentList)
    } else {
      this.lists=currentList
    }
    this.pageNum +=1
    this.loading=false
  })
}


infinite-scroll-disabled="loading"表示效果触发的条件，若loading为false则表示可以触发，若loading为true则表示不能触发，因此当loading为true时我们可以给底部添加一个加载效果，当数据获取完毕，loading变为false时，我们可以通过v-show="loading"来让加载效果消失；infinite-scroll-distance="50"表示下拉的触发距离，设置的数值越大，表示滚动条离底部的触发距离越大，越容易触发。
3.底部导航栏组件
底部导航栏和轮播组件一样，由于可以在其他地方进行复用，因此会把该组件放于components文件夹中，这里值得一提的是，底部导航栏组件由于点击不同的图标，它会跳转到不同的页面，因此会导致导航栏状态的重新加载，因此，若想要在不同的页面让导航栏呈现不同的状态，我们需要在跳转的时候传入对应的查询参数，然后在跳转到不同的页面时读取这个参数来呈现对应的不同的状态，具体的代码片段如下：


let {index}=qs.parse(window.location.search.substring(1))
export default {
 data(){
  return {
   navConfig,
   curIndex:parseInt(index,10) || 0
  }
 },
 methods:{
  changeNav(index,list){
   location.href=`${list.href}"htmlcode">

import Footnav from 'components/FootNav.vue'
let mixin={
  filters:{
    currency(num){
      num=num+''
      let arr=num.split('.')
      if (arr.length===1){
        return num+'.00'
      } else {
        if (arr[1].length===1){
          return num+'0'
        } else return num
      }
    }
  },
  components:{
    Footnav
  }
}
export default mixin


当你的页面需要使用到该过滤器，或者底部导航栏时，只要对这个模块进行引入，并在mixins属性中添加它即可：


new Vue({
  ...
  mixins:[mixin]
})


二、目录分类页



目录分类页并无新的操作，和首页的部分操作类似，就是利用axios从接口中获取数据并渲染到页面中，并对页面中的一些焦点状态进行v-show的处理，以及一些类名和焦点的处理，我们可以从目录分类页中通过点击热销商品进入商品详情页，通过点击热门品牌进入商品搜索列表页，在进行这些页面的跳转时，把一些关键的数据传入查询参数中以便跳转页面获取即可。


let { index } = qs.parse(location.search.substr(1));

changeNav(list, index) {
   //this.curIndex = index;
   location.href = `${list.href}"color: #ff0000">三、商品搜索列表页


商品搜索列表页同样的基本操作与首页和目录分类页类似，这里唯一不同的是，商品搜索列表页在用户下拉一定距离后，会出现一个回到顶部的图标，点击图标，用户就可以直接回到顶部，在这里，我们使用了一个叫作Velocity.js的动画库，它是把css中的一些动画效果进行封装，进而可以通过一些api轻松实现一些简单的动画效果，例如上面所说的回到顶部，在项目中的代码片段如下所示：




//引入Velocity
import Velocity from 'velocity-animate/velocity.js'

//在methods中加入对应方法
methods:{
  scrollMove(){
    if (window.scrollY>=290){
      this.isShow=true
    } else {
      this.isShow=false
    }
  },
  goToTop(){
    Velocity(document.body, 'scroll', { duration: 500, easing: "easeOutQuart" });
    this.isShow=false //回到顶部图标消失
  }
}


四、商品详情页

在商品详情页中，除了有对数据的获取和页面的渲染外，这里主要涉及到了三个新的操作：

  
sku算法的应用
  
页面的载入和消失的动画效果
  
页面展示时的穿透滚动问题的解决　　

　　　　　　
首先是sku算法，由于此次商品详情页的选择并不需要使用到它，因为商品的可选属性只有一个，但是在实际情况下，由于很多商品的可选属性不止一个，因此是需要使用到sku算法的。SKU=Stock Keeping Unit(库存量单位)，同一型号的产品，或者说是同一个产品项目（产品条形码是针对企业的产品）。
然后如何制作sku页面载入和消失时的动画效果呢？这里我们使用到了vue提供的自带transition的封装组件，可以通过这个组件来给任何元素和组件添加进入或者离开时的过渡。这个组件提供了八个JavaScript钩子函数以及六个过渡类名的切换，利用这些钩子函数以及类名的切换就可以完成组件的过渡动画了，这里列举一个vue文档上的典型例子给大家参考一下吧：
transition过渡：


<div id="demo">
 <button v-on:click="show = !show">
  Toggle
 </button>
 <transition name="fade">
  <p v-if="show">hello</p>
 </transition>
</div>




new Vue({
 el: '#demo',
 data: {
  show: true
 }
})




.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 opacity: 0;
}


最后在遮罩层和弹出层出现之后（即sku页面），对页面进行上下拖动时，背后的内容层也会跟着一起拖动，这是典型的滚动穿透问题，在这里我的解决办法是监听遮罩层和弹出层的出现，当它们出现之后，我们更改内容层的样式，使其样式变为：position:fixed;width:100%;这样内容层就不会再滚动了，之后我们再通过设置：


scrollTop = document.scrollingElement.scrollTop
document.body.style.top = -scrollTop + 'px'


使得内容层的滚动高度与遮罩层和弹出层出现前相同，并且，调整html元素的样式：height:100%;overflow:hidden;，在关闭遮罩层和弹出层后，还原这些修改样式，即可使得滚动穿透的问题得以解决。需要注意的是，还原这些样式之后，原本内容层滚动的高度就会丢失，因此我们要通过之前记录下来内容层滚动的高度，在还原样式时将滚动高度也一并还原。




document.scrollingElement.scrollTop = scrollTop


这样滚动穿透的问题就算是彻底解决了，下面是全部的这部分的全部代码片段：


chooseSku(type) {//显示购买菜单
   this.skuType = type
   this.showModal = true
  },
  changeSku(num) {//增减数量
   if (num < 0 && this.skuNum === 1) return
   this.skuNum += num
  },

  addCart() {//加入购物车
   $.ajax($.url.cartAdd, {
    id,
    skuNum: this.skuNum
   }).then((data) => {
    if (data.status === 200) {
     this.showModal = false
     this.showAddMsg = true //添加成功的信息
     this.isAddedCart = true //显示购物车图标
     setTimeout(() => this.showAddMsg = false, 1200)
    }
   })
  }
 },




watch:{
  showSku(val,oldVal){
    if (val){
      scrollTop = document.scrollingElement.scrollTop
      document.body.style.top = -scrollTop + 'px'
    }
    document.body.style.position=val"_blank" href="https://weui.io/#layers" rel="external nofollow" >WeUI上面的层级规范：用于规范WeUI页面元素所属层级、层级顺序及组合规范。


五、购物车页面

购物车页面里面比较多的逻辑关系，在此就不一一枚举了，大概说一下它的重构思路：
商品的获取渲染以及增加是否被选中属性
获取后台数据加载处理或动态响应式处理
商品选中店铺选中全选，影响价格三级联动。
编辑状态，其余不可切换。对数量操作，加减更改。删除，单商品删除，选中(多个)删除，商品删除店铺删除。
原生事件，滑动删除页面，Volecity。
删除多个商品进行过滤处理
fetch层封装，
同一个场景下思维层封装
问题呈现，左滑删除样式继承。[0].style.left='0px' this.$refs[`goods-${shopIndex}-${goodIndex}`][0].style.left='0px'
ref 是非响应式的，不建议在模板中进行数据绑定，即使用唯一标识绑定
v-for 模式使用“就地复用”策略，简单理解就是会复用原有的dom结构，尽量减少dom重排来提高性能 ( 解决方案：还原dom样式 )
key 为每个节点提供身份标识，数据改变时会重排，最好绑定唯一标识，如果用index标识可能得不到想要的效果(绑定唯一识别key)
网页性能管理详解
首先获取数据，渲染到页面这些是基本的操作


获取到数据之后，由于有一些属性数据中没有，并且我们想要它在页面中是呈响应式存在的，因此从接口获取到数据之后不应该直接赋值给data里，而是应该先给数据增添属性，再把增添后的数据赋值到data处，具体代码如下：


getLists(){
  cart.getCartLists().then((response)=>{
    let list=response.data.cartList
    list.forEach(shop=>{
      shop.checked=true
      shop.editingStatus=false
      shop.editingMsg='编辑'
      shop.removeChecked=false
      shop.goodsList.forEach(good=>{
        good.checked=true
        good.removeChecked=false
        good.touchDelete=false
      })
    })
    this.cartLists=list
  })
}


每次选择了商店下的商品时，都利用数组的every方法来遍历数组看是否全部商品都被选中了，若选中则商店也被选中，同理，若选择了商店，则遍历商店下的商品，把商店下的商品全部选中。取消选中亦是同理。


全选与否则利用计算属性来处理，利用计算属性的getter来获取此时购物车的状态来判断是否被全选，利用计算属性的setter来处理点击全选时商店及商店下商品的状态的改变。


同样的，利用计算属性来计算正常状态下选中商品的总价，并返回选中商品的列表。同理，利用计算属性来计算编辑状态下的选中的商品的列表，并以数组的形式返回。


在编辑状态下，我利用了计算属性来对商品的数量的数据进行了监测，若判断出数量中存在非数字或者负数的情况，则会自动把数量的数据变成1。


利用touchstart和touchend两个事件来实现商品左拉删除的功能，这两个事件分别绑定start和end的方法，方法的具体代码如下所示：


start(e,good){
  good.startX=e.changedTouches[0].clientX
},
end(e,good,goodIndex,shopIndex,shop){
  let endX=e.changedTouches[0].clientX
  let left='0px'
  if (good.startX-endX>100){
    good.touchDelete=true
    left='-60px'
    Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{left})
    shop.goodsList.forEach((otherGood,index)=>{
      if (otherGood.touchDelete && index!==goodIndex) {
        otherGood.touchDelete=false
        Velocity(this.$refs[`goods-${shopIndex}-${index}`],{left:'0px'})
      }
    })
  } else if (endX-good.startX>100) {
    good.touchDelete=false
    left='0px'
    Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{left})
  }
}


当添加了左拉删除的功能之后，页面会出现一个BUG，就是左拉之后，点击该商品对应的商店下的编辑按钮，删除的按钮会继续被左拉，呈现一个比其他删除按钮长的BUG状态。　　　　　　　　

处理办法：通过给每个商品的一个具有唯一识别性的ref，然后在点击编辑时，找到已左拉的商品的对应的具有唯一识别性的ref，把它的左拉状态还原即可，具体代码如下所示：




shop.editingStatus=!shop.editingStatus
if (shop.editingStatus){  
  shop.goodsList.forEach((good,index)=>{
    if (good.touchDelete){
      good.touchDelete=false
      this.$refs[`goods-${shopIndex}-${index}`][0].style.left='0px'
    }
  })
}


六、个人中心地址管理页面
最后是个人中心地址管理页面，在这个页面中，我们会封装addressService层和fetch层，addressService层主要是负责页面中前后端交互的方法，如添加地址、删除地址、编辑地址和获取地址等，然后fetch层主要是负责从RAP接口中获取数据并返回一个promise对象到service层中，具体的封装方式和使用方式请自行查看源码。


另外在这个页面中，我们使用到了vue-router和vuex，接下来我将会简要介绍它们在个人中心地址管理页面中的使用方式。


首先是vue-router，他是用于构建单页面应用的，是基于路由和组件，路由用于访问特定的路径，然后特定的路径与特定的组件相联系相映射，传统页面中，是通过超链接来实现页面的跳转和切换的，但在vue-router中，则是路由的切换，即组件的切换。


我们先来看看是如何配置一个routes、创建一个router实例并把它注入到vue实例中去的：


import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//构造配置
let routes=[{
  path:'/',
  components: require('../components/member.vue')
},{
  path:'/address',
  components:require('../components/address.vue'),
  children:[{
    path:'',
    redirect: 'all'
  },{
    path:'all',
    components:require('../components/all.vue')
  },{
    path:'form',
    name:'form',
    components:require('../components/form.vue')
  }]
}]

//创建router实例
let router=new Router({
  routes
})

export default router

import Vue from 'vue'
import router from './router'
import store from './vuex'

//根组件注入
let view=new Vue({
  el:'#app',
  router,
  store
})
//router-view标签作为配置路由后组件的容器
<div id="app">
 <router-view></router-view>
</div>


通过这样路由的配置和注入，我们就可以实现单页面下多组件的切换和嵌套了，如果上述有不懂的地方，请到vue-router的官网处查看文档和说明。
接着我们来讲一下vuex，vuex是对SPA即单页面应用进行数据的状态管理，如果想了解具体vuex是什么还有它的用途，请点击这篇文章：Vuex新手入门指南


vuex其实也是组件间通信的一种方式，说起组件间的通信，我们不如来一一列举一下他们的方式有哪些：


1.引用类型数据


用法：如果父组件有一个数据类型是引用类型的数据，当这个数据直接传递给子组件以后，在子组件对这个数据源进行修改的时候，父组件中该数据也会同步修改。


2.自定义事件


即子组件内部定义了一个自定义事件，可以用父组件在子组件上进行监听：


//子组件
this.$emit('change',18)
//父组件
<foo :obj="obj" @change="changeAge"></foo>
//父组件
methods:{
  changeAge(age){
    this.obj.age=age
  }
}


3.全局事件（global bus）


//bus.js
import Vue from 'vue'
const bus=new Vue()
export default bus
//触发组件
import bus from 'js/bus.js'
bus.$emit('change',18)
//订阅组件
import bus from 'js/bus.js'
bus.$on('change',(age)=>{
  this.obj.age=age
})


4.vuex状态管理


vuex的使用与vue-router有一点相似，具体代码如下：


import Vue from 'vue'

//使用vuex插件
import Vuex from 'vuex'
Vue.use(Vuex)

import address from 'js/addressService.js'

//创建Store实例
const store=new Vuex.Store({
  state:{
    lists:null
  },
  mutations: {
    init(state,lists){
      state.lists=lists
    }
  },
  actions: {
    getLists({commit}){
      address.getList().then(response=>{
        commit('init',response.data.lists)
      })
    }
  }
})

export default store


之后同样的在跟组件对store实例进行注入即可，在上述实例中，state属性表示的是实例的状态，类似vue实例里的data，需要高度注意的是，不允许直接修改state里面的值，只允许定义一系列的类似事件的mutations来触发进行state的管理。而mutations属性里面存放的是同步事件，因此是对数据进行同步管理，要进行异步操作的话必须使用actions属性；actions属性里面存放一些异步的操作，在异步的操作进行完成之后再触发mutations里面的同步事件来对state里面的数据的状态进行同步的操作。


在组件中，我们一般通过dispatch来触发actions里面的异步事件进行异步操作，一般使用计算属性来获取state中的数据，之所以使用计算属性，是因为状态管理里的数据可能是变化的，因此我们希望它在页面中是响应式的，因此我们选择使用计算属性来对数据进行依赖的绑定。


具体代码如下：


computed:{
  list(){
    if(this.$store.state.lists){
      return this.$store.state.lists
    }
    return false
  }
},
created(){
  if (!this.list){ //防止在新增地址或修改地址后多次触发mutations中的init
    this.$store.dispatch('getList')
  }
}


总之，vuex中状态管理的过程可总结为以下流程：

（1）.通过dispatch(actionFnName)分发来触发actions中的异步操作=>

（2）.待异步操作结束之后通过commit(mutationsFnName,data)来触发mutations中的同步事件来进行同步操作=>

（3）.通过同步操作改变state中的数据的状态=>

（4）.状态改变后，组件中的计算属性因为绑定了该数据作为依赖，因此数据的改变会响应式地展示在页面中，即页面展示的数据也会得到同步的改变
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
           
            上一篇：VUE搭建手机商城心得和遇到的坑

            下一篇：JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】