ToB企服应用市场:ToB评测及商务社交产业平台

标题: 我的前端封装之路 [打印本页]
作者: 曂沅仴駦    时间: 2024-6-29 23:11
标题: 我的前端封装之路
近来有粉丝提问了我一个面试中遇到的问题，他说面试的时间，面试官问我：你在以前的项目中封装过组件吗？或者做过npm公共库吗？遇到过什么问题吗？当时自己突然觉得好像没什么可回答的啊，但面试结束想起来，自己在前端开发工作中貌似又在不绝的封装东西。但由于没有提前准备这类问题，所以回答的不是很理想。这篇文章，我说一些我的封装工作进程，盼望对各人有资助吧。
目次
1 那是一个日历组件
1.1 S
1.2 T
1.3  A
1.4 R
2 那是一个小小的图片懒加载 
2.1 S
2.2 T
2.3 R
3 js-tool-big-box 
3.1 我的初衷
3.2 我的行动 
3.3 我的成长
4 面试回答STAR法则

1 那是一个日历组件

1.1 S

我最初的工作呢，公司的项目是一个类电商平台，但售卖的不是生活用品，是一个网络售票的网站。当时我最初的工作除了日常的前端开发，那个时间还不太盛行Vue和React，JQuery是我的吃饭家伙。一些日常组件封装啊，倒是常做，比如手风琴最初的jqueryUI只支持传入文字和HTML，但各人都开始以JSON格式传输数据了，所以我需要把JSON转成HTML再穿进去，如许将jqueryUI封装起来，再比如jqGrid的表格中的可输入，可提交做的很差，我就需要外部包一层。
但终于有一天，产品司理说，这个日历组件太不友好了，不悦目，翻起来也费劲，更重要的是，也没个节沐日啥的表现，对我们的用户太不友好了。
这项任务对于刚结业的我来说，压力照旧很大的，我当时翻了半天百度，竟然发现都是如出一辙的日历组件，要么就是讲解阐明的，要么就是那种管理端利用的日历组件，让我很头疼。自己实现的话难度会不会太大了，而且当时虽然二次封装过jqery组件，但自己写还真么写过，如何把组件写好后，用于多处场景，如何定位不庞杂，以及时间日期的各种API组合，这些我都还一孔之见。但初生牛犊不怕虎，我依然接下啦这份间距的任务。
1.2 T

由于当时每个星期都会迭代新需求，而这个日历组件只是一个额外需求，这就要求我需要自己加班搞啦。而这就像是自己给自己提的一个需求，所以我需要自己按照产品的原话，再看着已有的那些日历组件，自己给自己列出需求条目。尽管自己对这些实现API相识不是太深，但我相信，只要条理逻辑是对的，我总会一步步实现出来的。于是我开始列需求：
     

1.3  A

在罗列好需求以后，我深入学习了如何封装初始化jquery组件；按照预想的界面调控好主界面、年月、星期、日期面板；又开始从年月入手，获取每个月的日历，如何去根据周一的位置定位，如何获取本日去置灰之前的日期，如何根据入参置灰不可选的之后的日期，再维护好法定节沐日，根据节沐日去匹配日期显示等。
终极一步步按照自己的需求，开发、调整再开发，终于可以开始测试了。组件能够越来越美满，感谢测试同学的经心细点，把一些例如本年12月到来岁1月啦、例如结束时间禁绝确啦等问题提出来，终极完乐成能，到达上线结果。
1.4 R

   实在现在追念起来，那个时间由于热爱前端开发工作，哪怕市面上没有的组件，有肯定难度我照旧很愿意尝试一下的。那个时间最大的难点就是，自己的JS基础还不是很牢固，一个组件有那么多的微小功能需要配合整理，需要自己整理好开发思路去完成整个功能。
  通过这个小日历组件的开发，很好的锻炼了自己的底层开发技术，这对我后续封装其他通用组件打好了基础。同时，由于法定节日假使需要一年一维护的，这就使得我需要将这个日历组件的文档整理好，哪怕去职的时间也要交接好，不至于来年日历组件显示异常。这也很好的锻炼了我对待工作的责任心。

2 那是一个小小的图片懒加载 

2.1 S

最初接手这个项目的时间呢，里面实在是有一个图片懒加载的组件的，看似很好用的样式，lazy.vue，可以传入图片，先显示一个小Logo，等候图片加载完成再显示，但在不断进行性能优化的过程中，发现这个图片懒加载的功能捉襟见肘。
我们最初只是在一个元素内展示这个img，img也是lazy.vue终极返回的内容。但慢慢的对这个小lazy需求就多样化起来了，
   
  反正就是，别看小小的图片懒加载，但却承载了他不该承载的期望。 
2.2 T

不过这个图片懒加载组件丰满牢固倒不是一下子完成的，也是在前端项目优化、项目迭代、学习优化知识的过程中一点点积累起来的。而这过程中，我采用了以下方案：

2.3 R

组件虽小，但在优化改进过程中，发现最大的难点莫过于多样化的需求。而在每次改进过程中，都会涉及到一些技术盲区，这就需要我不断的学习与实践。
通过不断完成这个图片懒加载组件，显著减少了页面首屏初始化加载的时间，提升了用户体验。此外，组件的多样化配置选项使得它可以灵活地应用在不同的场景中，团队开发效率得到了很大提升。
   而我也在不断美满与学习中，不断加强了对前端性能优化的理解、提高了对复杂需求的解决本领以及加强了对用户体验的器重。整体来说，它使得我对前端项目开发整体认知的提升起到了很大的资助。
  
3 js-tool-big-box 

3.1 我的初衷

实在我在前端项目开发中，一直是需要哪些公共方法，临时写，然后各人互相在群里说一声：我在utils目次里加了一个方法，各人需要发送jsonp的时间，需要获取uuid的时间，需要设置localStorage的时间，你们可以直接用啊，不用单独写啦。然后干着干着，发现各人写了好几份，有的单独写到业务组件里，有的几乎又在utils目次里加了一份，然后悄么声的，不review代码，你看不到。又偶然间，张三需要用到copy文字到剪贴板的时间，自己引入了一下组件，也没有说，结果第二天来了，李四发现项目起不来了，然后大喊，项目起不来啦，谁干的？然后李四大喊一声：你引入一下copy组件。张三大喊：好啦。又偶然间呢，A项目用到了这个方法，写了一套，B项目又需要了，怎么办呢？拷已往吧，又偶然间发现，A项目的代码找不到了，算了，接着写吧。
   简单的说，本日的你我，还在重复昨天的故事，这一行破代码，接续放入你的破项目。
  3.2 我的行动 

近来呢，我业余时间开始了js-tool-big-box的开发，这个npm包已经开始有小伙伴开始下载利用了，给我提了一些建议，有的是改进建议，有的是新需求建议，照旧挺不错的，功能还在不断丰富中。各人也不比担心包太大，影响项目部署后的加载。我们利用了模块化引入，你利用的少，终极打包到项目中的代码就会少。

3.3 我的成长

实在开发npm包这种第三方工具，与自己在公司项目里开发功能照旧不同的。毕竟这要被更多的开发者利用了，之前写的功能没问题，可能一下子利用的人多了，由于时间、地理、系统平台、浏览器、人的不同，大概就有问题了。
但这是一件很值得去做的事变，由于我热爱自己的工作，我盼望自己可以更长久一些的在这个职位这个行业继承干下去。所以，自己的团队有这么一套东西，也是盼望自己可以有个可以更值得自己喜好，自己去维护的小产品。
通过这个项目呢，我也可以认识更多的开发者，更多的共同爱好者，可以资助更多的同样热爱前端开发的小伙伴。固然，通过这个项目，我也使得自己的专业只是更加精进，使得这些工具方法们更加的结实，那将是一件此生非常值得开心的事变。
4 面试回答STAR法则

说到面试呢，把握STAR法则，我觉得黑白常重要的。我们上面分别利用了S T A R，放到你面试的时间呢，就可以套用这个公式：
S： （Situation）你要做一件事变遇到的问题，或者说当前的现状，你要解决这个问题所带来的困难；
T： （Task）列举你要完成这项任务，所要解决的问题和难点；
A：（Action）说出你的行动，你都做了哪些方案来解决问题；
R：（Result）这个最重点，说出你做完这件事，有哪些结果，对项目有哪些正向的影响，对团队有哪些正向的资助，对个人有哪些很棒的提升。
这个法则固然是用来套用的，但假如你把握熟练了，就不比非得往4个步调去套用了，可以灵活运用。
     


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4