临近圣诞节,想给朋友送些东西,但是嘛送礼物就要费时间精力,送贺卡就好像略显普通,思来想去,便想到了一个两年前看到的项目:「会动的简历」,突发奇想,我是不是也能自己做一个线上会动的贺卡,然后通过url上带上不同人名,根据人名解析,显示成不同的贺卡内容。这样写一个模板,就可以给他们每个人都发一份独一无二的礼物(肯定是最近代码生成器写多了,所以才变得这么不走心)
说做就做,先把之前看到的项目预览地址找出来并想想大致的实现原理,emm,感觉原理就是使用interval实现了打字效果,同时也是用interval加上动画效果,不过有些动画细节不是很清楚,做到的时候再想,如果实现不出来,再去看源码XD
技术选型方面,由于开发时间有限,就先基于「主要框架选自己熟练的,次要框架选自己想去了解」的原则选型
技术选型初定为:
- 使用React+es6语法
- 使用create-react-app脚手架快速生成项目
- 使用webpack完成项目的构建
- 使用yarn来处理依赖包的管理
就。。自己瞎设计的,超简约复古风格 P.S.此处鸣谢表哥的UI意见
模仿打字机效果:
- 逐个字出现:这个不难,用interval控制字即可
- 换行:其实相当于滚动到底部,关键在于触发时机,如果滚动触发得太频繁,用户一旦中途操作滚动条就会很卡
动态加样式:使用<style></style>包裹样式文字即可
流程控制:
- 将左边的样式编辑器跟右边的贺卡做成两个组件
- 在入口组件app.js引入样式编辑器和贺卡组件
- 将样式编辑器和贺卡的输入动作以promise封装成异步模式
- 在app.js以async await调用刚刚封装好的输入动作,以保证输入顺序正确
markdown转html:这个是参考了原项目,使用marked将markdown转成html
因为之前一直没有用过github-page,构建也是花了大功夫=。=,所以部署这个静态页面也是花了很多功夫
中途遇到不少问题,比如github-page只能读到项目根路径下的index,但一般现在的前端项目打包以后的文件都会放在dist或者build文件夹中
最后使用gh-pages库解决问题,原理是新建一个gh-pages分支,每次打包后再将build文件夹下的文件提交到gh-pages分支中