大家好,我是前端林叔,掘金小册《如何写出高质量的前端代码》 作者。
在今年9月18日的时候,我终于下定决心要写一个纯前端的pptx文件预览库,到现在已经过去两个多月了,来还下愿,感兴趣的可以先看下在线演示效果。 【github】 【在线演示】
使用方式依然沿用之前vue-office的风格,非常地简单。
- 安装库
npm i pptx-preview
- 项目中使用
import {init} from 'pptx-preview'
//调用库的init方法生成一个预览器
let pptxPrviewer = init(document.getElementById('pptx-wrapper'), {
width: 960,
height: 540
})
//获取文件或者读取文件,获取文件的 ArrayBuffer格式数据,传给组件进行预览
fetch('http://****/test.pptx').then(response=>{
return response.arrayBuffer()
}).then(res =>{
//调用预览器的preview方法
pptxPrviewer.preview(res)
})
目前已经完成了大部分基础功能的开发,后续重点是开发饼图、折线图等图表类型功能。
开发这样一个库需要什么
有的小伙伴可能要问了,开发这样一个复杂的库需要具备怎样的能力,有哪些能给大家借鉴的东西呢?这也是我经常思考的,我要如何做才能提升我的编程能力呢,今天试着总结下,抛砖引玉。
明确自己的动机和目标
要开发一些复杂的开源库,是非常消耗时间和心血的,金钱方面的收益是非常非常低的,如果找不到自己的动机和目标,是很难坚持下去的,我们也经常看到N年不维护的库,大部分我想都是因为投入产出不成比例,所以都放弃了。
对我而言,要不要开发这个库曾经纠结了很久,就是因为之前我没有想好做这件事能给我带来什么,直到最后我给自己找到了3个动机才决定做这件事:
- 证明自己的技术实力,为后续找工作做准备
- 探索更多可能性,看看后续能不能做成自己的产品来售卖(这也是为什么没有开源的原因)
- 实践我的掘金小册 《如何写出高质量的前端代码》 中提到的思想和方法
有吸引力的动机和目标才能帮助你渡过无数个难熬的时刻,要不然当中途遇到一个难解决的问题或者一些枯燥的开发工作,我们很容易就放弃了。
图:孩子上课期间我在走廊开发
如何找到合适的项目
有的小伙伴说了我也想写一个有技术含量的库,可是我找不到方向怎么办?
这个可以在日常开发中寻找灵感,凡是让你感觉难受的地方,就是机会!
就像我之前Review同事的代码,发现她在做docx、pdf预览的时候挺麻烦的,从这里得到灵感我开发了vue-office库,接着又补充了xlsx文件的预览,到今年又开发了pptx的预览。
再比如表单开发可能很复杂,能不能开发一套配置表单。
或者你发现Element 等基础组件库用起来不够简单,能不能在他之上封装一下,做一个适合业务开发的组件库。
在比如拖拽放大某个Dom元素,开发起来比较麻烦,我们能不能封装一个vue指令。
诸如此类,凡是你业务中开发让你痛苦的,都是灵感,痛苦就代表机会!
分治、分层思想
面对一个复杂的项目,大家可能上来就会非常恐惧,这时候就要用到分治的思维了,这也是小册里面我们重点推荐的一种编程思维,一个大的项目我们可以拆分成几个小的模块,每个小的模块再拆分成更小的模块,直到你能解决它。
比如pptx的预览,刚开始可能觉得比较难,那我们能不能先把如何读取pptx文件这件事做好,比如图形的渲染非常麻烦,我们能不能先把一个矩形的渲染做了,这样的小问题总是可以解决的吧
图:我开发中的计划安排
为了更好地组织代码,也为了便于后续扩展,我在开发之初就利用分层思维对项目架构进行了拆分。
拆分是非常有好处的,第一拆分后每一层只负责一个专一功能,开发难度相对来说降低了,第二拆分后的每一层都可以被替换,对以后的扩展有好处,比如我现在采用svg渲染pptx,那如果后续我想使用canvas渲染,那么我只需要增加一个canvas渲染器即可,原有的数据读取等功能完全不受影响。
面向对象
面向对象是解决大型问题、组织复杂代码的一个很好地方案,拆分类的过程中需要用到抽象思维,拆分的过程也是分治的过程,通过将复杂问题转为一个一个小的类,降低了开发难度。
通过类的继承,我们也可以实现代码的复用。
如果你想以后做一些复杂的事情,那么我建议你尝试练习面向对象的使用,这在小册中也专门有一小节内容介绍,并展示如何用面向对象思想封装一个简单的大屏编辑器。
先设计后开发
前端同学必须要学会做设计,养成先设计后开发的习惯,无论是大型库,还是日常的业务开发,磨刀不误砍柴功,设计阶段花的时间,都会在后续开发过程中节省回来,反之,上来就进入开发,后续必然要欠下技术债,可能要用N倍的时间代价去偿还。
图:开发之前我做的设计
坚定地重构
虽然开发之初我做了设计,但是由于对pptx预览的细节认识不足,很多问题没有考虑到,导致开发中代码会有很多可能重复的地方,这时候就坚定地重构,不要拖,如果你不在刚开始就进行重构,那么随着代码越来越多,激情越来越少,你可能永远都没有机会再重构它,只能被最初的错误裹挟着前进,为后续的开发带来很多困难。
总结
我时常在思考,学习写出高质量的代码到底是为了什么,我想大致有两个重要的目的:
- 提高开发效率,游刃有余地面对日常业务开发
- 组织大型项目,承担更重要的项目,解决别人不能解决的问题
这次pptx的开发过程中,我也始终践行者我小册中的各种思想、方法和技巧,也希望有余力的前端同学,多关注前端代码质量。
最后给大家推荐下我的掘金小册,希望对大家有帮助 《如何写出高质量的前端代码》 。