小兔鲜项目总结——项目亮点

小兔鲜项目其实在暑假之前就已经做完了，但是一直没有空做总结，没有总结的项目就跟没做过一样，所以总结是很有必要的，总结的过程也相当于再学一遍了。以下是小兔鲜项目的亮点部分，当然也是项目很重要的一部分，它包含了前端中很重要的组件拆分和封装、函数封装等重要内容。也希望这篇总结能让大家有所收获！

1、基于业务的逻辑组件拆分思想

• 基于业务的逻辑组件拆分思想也叫业务组件化思想，它是一种软件架构设计思想，旨在将复杂的应用程序拆分为多个独立的、可重用的组件，以提高开发效率、可维护性和可扩展性。
• 在大型项目开发中，业务组件化的开发思想是非常必要的，它不仅能够提高团队的开发效率、降低维护成本，同时还能增强系统的灵活性和可扩展性。
• 在小兔鲜项目中就采用了业务组件化的思想，它将整个项目拆分成了用户登录、商品详情、购物车列表管理、用户管理、支付管理等模块，如下图：
  

2、长页面吸顶交互的实现

• 使用原因： 电商平台的页面大部分都很长，如果没有吸顶导航，用户将页面滑动到底部并且想要切换到其他页面时，只能再次将页面滑动到顶部，这种设计是很不友好的。有了吸顶导航后，用户可以随时点击吸顶导航进行页面切换。

• 基本思想： 浏览器在上下滑动的过程中，如果距离顶部的滚动距离大于某个值，就让固定的导航栏显示出来，小于这个值则隐藏。

• 实现步骤
  

• 实现方法：
  （1）使用vueuse中的useScroll方法获取滚动距离y，当y>78px时，使用动态类名将准备好的类show添加上去
  
  （2）show类可以将元素的透明度opacity变成1，使吸顶导航显现出来。
  

3、自定义图片懒加载指令并封装为插件

• 使用原因： 电商平台项目有大量的商品图片, 同时加载和渲染全部的图片资源会挤占带宽, 首页白屏与加载时间过长,用户体验感不好, 同时还会浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量。所以需要使用到图片懒加载。将懒加载指令封装为插件是为了方便在项目各个组件中的使用。

• 基本思想：
  （1）懒加载：只有当图片出现在视口区域才会发送图片的网络请求，将图片的src替换成接口返回的图片地址。
  （2）封装插件：使用app将指令封装成插件，然后再入口文件main.js文件中注册

• 实现步骤：
  

• 实现方法：
  （1）使用vue3中的自定义指令的方法app.directive(),将图片懒加载的逻辑定义为指令名为img-lazy的指令。
  （2）编写图片懒加载逻辑：使用vueuse中的useIntersectionObserver（）方法监测图片是否进入视口区，如果useIntersectionObserver（）方法中isIntersecting属性为true，则证明图片已进入视口区，此时发送图片的网络请求，将图片的src替换成接口返回的图片地址。
  
  （3）将指令注册为插件：再directive文件夹下创建一个index.js文件，在文件中使用app将指令封装成插件并导出。然后再main.js文件中将插件引入，使用app.use()将插件注册成全局插件。
  

（4）在组件中使用

4、画板插槽组件等业务通用组件封装

• 使用原因： 在电商项目中，很多模块在结构上非常相似，只是内容不同，通过组件封装可以实现复用结构的效果。

• 基本思想： 把可复用的结构只写一次，把可能发生变化的部分抽象成组件参数（props/插槽）

• 实现步骤
  

• 实现方法
  （1)准备通用组件模板，将可变的部分抽象出来，具体是将纯文本部分抽象成prop传入，复杂的内容部分抽象成插槽传入。
  

（2）根据组件实际需要定制props和插槽

5、通用逻辑函数的封装

• 封装原因： 在项目中通常会有一些通用的函数，比如小兔鲜项目中的轮播图部分，将重复使用的代码块封装成独立的函数，这样在需要时可以直接调用这些函数，避免了重复编写相同的代码，提高了代码的复用性‌，同时降低模块之间的耦合度。

• 基本思想： 将通用的逻辑函数拿出来封装到独立的js文件中，使用export将函数导出去，在函数内部使用return将需要用的数据或方法return出去

• 实现步骤
  

• 实现方法
  （1）以banner轮播图的通用逻辑函数为例，首先在useBanner.js文件中声明并导出useBanner函数，然后在useBanner函数内部书写banner轮播图的逻辑函数，最后将要使用数据return出去。
  

（2）在组件中引入函数，并把要使用的数据和方法结构出来

6、列表无限加载

• 使用原因： 日常使用的电商平台的商品列表页中会有大量的商品内容，一般来说用户是很难滑倒列表的底部的，也就是说电商平台的商品列表一般是无限加载的。

• 基本思想： 监听用户是否划到了列表底部，是的话就请求新的商品数据，把新的商品数据和旧的商品数据拼接在一起渲染

• 实现步骤：
  

• 实现方法：
  （1）使用elementPlus提供的v-infinite-scroll指令监听用户是否列表是否满足触底条件
  

（2）如果满足就让请求的页数参数加1获取下一页的数据，然后将新数据和老数据做拼接渲染，当没有数据可以获取时，就使用infinite-scroll-disabled指令禁止列表加载。

7、路由缓存问题的处理

• 使用原因： 使用带有参数的路由时，当用户从／users／johnny 导航到／users／jolyne（eg.从／users／1 导航到／users／2） 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用，数据不会更新。
• 实现方案：
  （1）给router-view添加独一无二的key，让组件实例不复用，强制销毁重建。缺点： 所有的组件实例都会销毁重建（即使有一些组件时可以复用的），这会存在一定的浪费。
  
  （2）使用onBeforeRouteUpdate导航钩子，onBeforeRouteUpdate钩子函数可以在每次路由导航更新之前执行，我们可以在回调中获取新路由的数据