我下载的免费网站模版源代码是加密的,seo索引擎优化,灰产源码资源网,wordpress 在线编辑目录 1、基于业务的逻辑组件拆分思想2、长页面吸顶交互的实现3、自定义图片懒加载指令并封装为插件4、画板插槽组件等业务通用组件封装5、通用逻辑函数的封装6、列表无限加载7、路由缓存问题的处理 小兔鲜项目其实在暑假之前就已经做完了#xff0c;但是一直没有空做总结… 目录 1、基于业务的逻辑组件拆分思想2、长页面吸顶交互的实现3、自定义图片懒加载指令并封装为插件4、画板插槽组件等业务通用组件封装5、通用逻辑函数的封装6、列表无限加载7、路由缓存问题的处理 小兔鲜项目其实在暑假之前就已经做完了但是一直没有空做总结没有总结的项目就跟没做过一样所以总结是很有必要的总结的过程也相当于再学一遍了。以下是小兔鲜项目的亮点部分当然也是项目很重要的一部分它包含了前端中很重要的组件拆分和封装、函数封装等重要内容。也希望这篇总结能让大家有所收获 1、基于业务的逻辑组件拆分思想
基于业务的逻辑组件拆分思想也叫业务组件化思想它是一种软件架构设计思想旨在将复杂的应用程序拆分为多个独立的、可重用的组件以提高开发效率、可维护性和可扩展性。在大型项目开发中业务组件化的开发思想是非常必要的它不仅能够提高团队的开发效率、降低维护成本同时还能增强系统的灵活性和可扩展性。在小兔鲜项目中就采用了业务组件化的思想它将整个项目拆分成了用户登录、商品详情、购物车列表管理、用户管理、支付管理等模块如下图
2、长页面吸顶交互的实现 使用原因 电商平台的页面大部分都很长如果没有吸顶导航用户将页面滑动到底部并且想要切换到其他页面时只能再次将页面滑动到顶部这种设计是很不友好的。有了吸顶导航后用户可以随时点击吸顶导航进行页面切换。 基本思想 浏览器在上下滑动的过程中如果距离顶部的滚动距离大于某个值就让固定的导航栏显示出来小于这个值则隐藏。 实现步骤 实现方法 1使用vueuse中的useScroll方法获取滚动距离y当y78px时使用动态类名将准备好的类show添加上去 2show类可以将元素的透明度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、路由缓存问题的处理
使用原因 使用带有参数的路由时当用户从usersjohnny 导航到usersjolyneeg.从users1 导航到users2 时相同的组件实例将被重复使用。因为两个路由都渲染同个组件比起销毁再创建复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用数据不会更新。实现方案 1给router-view添加独一无二的key让组件实例不复用强制销毁重建。缺点 所有的组件实例都会销毁重建即使有一些组件时可以复用的这会存在一定的浪费。 2使用onBeforeRouteUpdate导航钩子onBeforeRouteUpdate钩子函数可以在每次路由导航更新之前执行我们可以在回调中获取新路由的数据
