wufeng1996 / card

会动的圣诞卡

初衷

临近圣诞节，想给朋友送些东西，但是嘛送礼物就要费时间精力，送贺卡就好像略显普通，思来想去，便想到了一个两年前看到的项目：「会动的简历」，突发奇想，我是不是也能自己做一个线上会动的贺卡，然后通过url上带上不同人名，根据人名解析，显示成不同的贺卡内容。这样写一个模板，就可以给他们每个人都发一份独一无二的礼物（肯定是最近代码生成器写多了，所以才变得这么不走心）

技术选型

说做就做，先把之前看到的项目预览地址找出来并想想大致的实现原理，emm，感觉原理就是使用interval实现了打字效果，同时也是用interval加上动画效果，不过有些动画细节不是很清楚，做到的时候再想，如果实现不出来，再去看源码XD

技术选型方面，由于开发时间有限，就先基于「主要框架选自己熟练的，次要框架选自己想去了解」的原则选型
技术选型初定为：

• 使用React+es6语法
• 使用create-react-app脚手架快速生成项目
• 使用webpack完成项目的构建
• 使用yarn来处理依赖包的管理

贺卡原型设计

就。。自己瞎设计的，超简约复古风格 P.S.此处鸣谢表哥的UI意见

功能实现

模仿打字机效果：

1. 逐个字出现：这个不难，用interval控制字即可
2. 换行：其实相当于滚动到底部，关键在于触发时机，如果滚动触发得太频繁，用户一旦中途操作滚动条就会很卡

动态加样式：使用<style></style>包裹样式文字即可

流程控制：

1. 将左边的样式编辑器跟右边的贺卡做成两个组件
2. 在入口组件app.js引入样式编辑器和贺卡组件
3. 将样式编辑器和贺卡的输入动作以promise封装成异步模式
4. 在app.js以async await调用刚刚封装好的输入动作，以保证输入顺序正确

markdown转html：这个是参考了原项目，使用marked将markdown转成html

构建

因为之前一直没有用过github-page，构建也是花了大功夫=。=，所以部署这个静态页面也是花了很多功夫
中途遇到不少问题，比如github-page只能读到项目根路径下的index，但一般现在的前端项目打包以后的文件都会放在dist或者build文件夹中
最后使用gh-pages库解决问题，原理是新建一个gh-pages分支，每次打包后再将build文件夹下的文件提交到gh-pages分支中