开源之夏

项目经验分享

2023 #02

# 项目基本信息

项目名称：分页器组件封装

项目导师：王杏

项目简述与产出要求：分页器组件封装

1. 完成分页器组件封装；支持移动端和pc端

2. 适配Chrome、Safari、Firefox、Edge 等主流浏览器

3. 提供组件API文档

项目链接： https://summer-ospp.ac.cn/org/prodetail/23c9e0535

# 项目开发情况

1. 项目描述

在如今的应用场景下，往往面对需要处理大量数据的情况，将所有数据一次性加载到前端进行展示不仅会占用大量的内存和网络资源，还会导致页面加载缓慢，因而实现分页器组件的封装具有现实意义。

分页器的作用是将数据分为多个页面或数据块，每次只加载当前页面或数据块的数据从而提高页面加载速度和用户体验，其意义在于实现数据的分页展示和导航。

2. 项目实现思路

首先需要进行分页器组件的结构化设计，将组件拆分为前后按钮（prev、next）、页码列表（pager）、每页容量（sizes）、总数据量（total）、跳转（jumper）等，包括增加slot插槽使得用户可以自定义内容展示。

组件拆分：

随后进行props参数的设计。props涉及当前页、数据总量、每页容量、组件布局、页码列表长度等关键参数在父子组件间的传递，同时可在不同上下文中使用，提升组件的可复用性。

接下来进行分页核心逻辑的实现，包括依据传递参数计算出总页数、页码的前移后移，跳转到指定页码，页码列表内置的快速前移后移等事件。

在父子组件的通信过程，主要借助emit自定义事件触发。

页码展示列表（pager）是分页器的核心部分。

这里负责呈现分页器的主要界面元素，处理用户的交互事件，并根据当前页码和状态设置不同的样式。pager处理了用户的点击事件，确保用户可以正确地导航到不同的页面，并触发自定义事件以通知父组件进行页面更新，正确地展示变化后的页码列表。比如当用户点击“6”时，依次展示‘1’快速前移按钮‘4 5 6 7 8’快速后移按钮‘50’。

基础 功能实现后，需要对参数进行 合法性校验 以及 边界测试 。
合法性校验：

• 是否传递total和pageCount等关键参数
• 是否存在对当前页码、每页容量的事件监视器
• 传递参数的数据类型是否正确等

边界测试：

• 当前页码应在1~pageCount之间
• jumper组件输入值为number类型且为非负数，并进行数值校验
• sizes组件的value检测非空值，当oldValue与newValue不等时触发事件监听器
• 页码列表的内置快速前后移应使得currentPage保持在正常范围内

最后是对分页器的样式设计：因分页器需要适配pc端和移动端，因而需要借助@media媒体查询，来依据不同分辨率动态呈现对应样式。对于在样式设计中用到的color、background-color、margin、padding、font-size等组件变量归纳到常量文件中，通过var绑定使用。

# 开源之夏个人随访

--项目经历--

OSPP：请简单介绍一下自己。

刘昱娴：大家好，我叫刘昱娴，来自江西抚州，是华中师范大学计算机科学与技术专业大三的一名本科生。

OSPP：大二时你已经有了颇为丰富的项目经验，对于提高代码质量、问题解决和过程沟通，有什么可以分享的学习方法吗？

刘昱娴：我从大一开始接触前端开发领域。当时是因为学校的社团招新宣讲，觉得前端引人入胜的网页特效很有趣，因此我决定加入木犀团队并成功通过了考核。在团队里，每周会有组会分享，同时也和团队内后端、产品、设计的同学们一起开发过小程序、网站等。在这个过程中，培养了我的团队协作能力。总结过去两年的学习经验，我认为要提升代码质量就离不开代码的规范性约束，比如需要考虑到产品的迭代，日常的可维护性等。同时多逛逛github、gitee这些网站，阅读一些高质量的代码，比如一些start数多的开源项目等。在团队协作过程中，熟练使用git工具可以显著提高对代码的管理能力和开发效率。

OSPP：你是如何了解到并决定参与开源之夏活动的？在项目申请的过程中你都做过哪些准备？

刘昱娴：我是从学长学姐的分享中了解到开源之夏的。当时大一也申请了开源之夏的项目但是很遗憾没有入选。于是大二的时候更加注重项目申请书的细节方面，比如说需要了解分页器的应用场景、通常如何做到分页展示海量数据、分页器组件的拆分（比如包括前后按钮、页码列表、每页容量等）、适配pc端和移动端等，同时参阅了Element UI的官方代码，熟悉项目仓库代码等，最终在项目申请书中产出自己的理解。

OSPP：之前掌握的技术栈和项目经验对你此次开源之夏项目开发有什么帮助吗？

刘昱娴：这次开源之夏的项目技术栈和我之前掌握的算是比较契合。比如html，css，typescript这些。但是之前常用的框架是react，项目技术栈是vue，所以也需要一些时间去学习vue框架。所幸在react的基础上，学习vue会相对轻松些。

记录为赶项目进度通宵

--参与开源社区--

OSPP：参与开源之夏之前是否参与过开源社区？参与开源之夏的过程中你对社区的认识有什么变化吗？

刘昱娴：在此前并没有参加过开源社区。在参与开源之夏的过程中，我认为社区是一个充满活力和合作精神的环境，它为开发者提供了一个学习、分享和贡献的机会，也提供了开放创新的软件和技术解决方案，在相互促进的过程中进一步推动开源项目的发展。

OSPP：在开发过程中，社区和导师为你提供了怎样的帮助？

刘昱娴：在开发过程中，导师会提供解决问题的思路，并在代码调试过程中逐步引导性能优化。同时在代码审查中发现潜在问题，确保项目符合质量规范。在社区中可以获得学习资源的分享，同时也是一个问题解决的好地方，帮助提升开发技能。

OSPP：对于自己日后在社区的发展有什么规划么？

刘昱娴：希望能多参与社区讨论，钻研一些感兴趣的技术领域。同时寻找一些社区的开源项目，积极参与贡献。

--收获与寄语--

OSPP：想对正在学习或想要从事技术工作的女生们说些什么呢？

刘昱娴：我觉得有句话说得好：“兴趣是最好的老师”。这一点对于男生女生来说都是同样适用的。在学习的过程中，始终葆有对未知的好奇并且能够坚持下去，那么结果一定不会让你失望。在项目开发经历中，会因卡bug苦苦求解良久才找到解决办法，会因项目的ddl迫近而焦急...但是当新功能开发出来了，产品上线了，会因此而欢呼雀跃，那种自豪感是无法言喻的。在技术领域，有时会面临性别刻板印象的困扰，但是请坚信你的能力，不要害怕挑战，专注于自我提升，一样可以很出色。

END 本文转自： 开源之夏OSPP官微