我可能开发了目前最好用的pptx预览库,有一些心得分享给大家

834 阅读6分钟

大家好,我是前端林叔,掘金小册《如何写出高质量的前端代码》 作者。

在今年9月18日的时候,我终于下定决心要写一个纯前端的pptx文件预览库,到现在已经过去两个多月了,来还下愿,感兴趣的可以先看下在线演示效果。 【github】 【在线演示】

pptx-1.png

使用方式依然沿用之前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个动机才决定做这件事:

  • 证明自己的技术实力,为后续找工作做准备
  • 探索更多可能性,看看后续能不能做成自己的产品来售卖(这也是为什么没有开源的原因)
  • 实践我的掘金小册 《如何写出高质量的前端代码》 中提到的思想和方法

有吸引力的动机和目标才能帮助你渡过无数个难熬的时刻,要不然当中途遇到一个难解决的问题或者一些枯燥的开发工作,我们很容易就放弃了。

图:孩子上课期间我在走廊开发

pptx-2.png

如何找到合适的项目

有的小伙伴说了我也想写一个有技术含量的库,可是我找不到方向怎么办?

这个可以在日常开发中寻找灵感,凡是让你感觉难受的地方,就是机会!

就像我之前Review同事的代码,发现她在做docx、pdf预览的时候挺麻烦的,从这里得到灵感我开发了vue-office库,接着又补充了xlsx文件的预览,到今年又开发了pptx的预览。

再比如表单开发可能很复杂,能不能开发一套配置表单。

或者你发现Element 等基础组件库用起来不够简单,能不能在他之上封装一下,做一个适合业务开发的组件库。

在比如拖拽放大某个Dom元素,开发起来比较麻烦,我们能不能封装一个vue指令。

诸如此类,凡是你业务中开发让你痛苦的,都是灵感,痛苦就代表机会!

分治、分层思想

面对一个复杂的项目,大家可能上来就会非常恐惧,这时候就要用到分治的思维了,这也是小册里面我们重点推荐的一种编程思维,一个大的项目我们可以拆分成几个小的模块,每个小的模块再拆分成更小的模块,直到你能解决它。

比如pptx的预览,刚开始可能觉得比较难,那我们能不能先把如何读取pptx文件这件事做好,比如图形的渲染非常麻烦,我们能不能先把一个矩形的渲染做了,这样的小问题总是可以解决的吧

图:我开发中的计划安排

pptx-3.png

为了更好地组织代码,也为了便于后续扩展,我在开发之初就利用分层思维对项目架构进行了拆分。

pptx-jiagou.png

拆分是非常有好处的,第一拆分后每一层只负责一个专一功能,开发难度相对来说降低了,第二拆分后的每一层都可以被替换,对以后的扩展有好处,比如我现在采用svg渲染pptx,那如果后续我想使用canvas渲染,那么我只需要增加一个canvas渲染器即可,原有的数据读取等功能完全不受影响。

面向对象

面向对象是解决大型问题、组织复杂代码的一个很好地方案,拆分类的过程中需要用到抽象思维,拆分的过程也是分治的过程,通过将复杂问题转为一个一个小的类,降低了开发难度。

通过类的继承,我们也可以实现代码的复用。

pptx-class.png

如果你想以后做一些复杂的事情,那么我建议你尝试练习面向对象的使用,这在小册中也专门有一小节内容介绍,并展示如何用面向对象思想封装一个简单的大屏编辑器。

先设计后开发

前端同学必须要学会做设计,养成先设计后开发的习惯,无论是大型库,还是日常的业务开发,磨刀不误砍柴功,设计阶段花的时间,都会在后续开发过程中节省回来,反之,上来就进入开发,后续必然要欠下技术债,可能要用N倍的时间代价去偿还。

图:开发之前我做的设计

ppt-design1.png

坚定地重构

虽然开发之初我做了设计,但是由于对pptx预览的细节认识不足,很多问题没有考虑到,导致开发中代码会有很多可能重复的地方,这时候就坚定地重构,不要拖,如果你不在刚开始就进行重构,那么随着代码越来越多,激情越来越少,你可能永远都没有机会再重构它,只能被最初的错误裹挟着前进,为后续的开发带来很多困难。

总结

我时常在思考,学习写出高质量的代码到底是为了什么,我想大致有两个重要的目的:

  • 提高开发效率,游刃有余地面对日常业务开发
  • 组织大型项目,承担更重要的项目,解决别人不能解决的问题

这次pptx的开发过程中,我也始终践行者我小册中的各种思想、方法和技巧,也希望有余力的前端同学,多关注前端代码质量。

最后给大家推荐下我的掘金小册,希望对大家有帮助 《如何写出高质量的前端代码》