「时光不负，创造不断，本文正在参与2022年中总结征文大赛」
前方多图预警 ⚠️
项目の初
该从哪里说起呢。。回想其时我还在做着一些零散的项目需求，这时分领导给了我一个使命，说让我重构一个“在线PS”，我一听哎，这有点意思了，可是它并没有立项，是的，直到我做了一个多月，团队里还没有其他人知道这个项目的存在，所以我要在搞完其他需求之后挤出来的时刻里完成它的开发（由于连PM都不清楚我在搞这个），并且领导表示尽管咱们不ToC，但要向稿定规划这类产品看齐。我就在这样一个没有产品、没有UI、研发只需1人、开发工时约等于没有的状况下，在追逐竞品的无限挫败感中，牵强完成了第一版的开发。
第一版的样子，肉眼可见的粗糙。公司是vue2技能栈的，一开端出于惯性也用vue2树立项目，做了一小段时刻感觉项目和后台体系整体耦合不大，所以改造成了vite2+Vue3：
这时分或许有细心的小伙伴发现了，不是重构项目吗？怎样看起来像是重写了？好吧，我自始至终都没见过旧版“在线PS”的源码，后来我才了解到，旧项目本来是老板五年前扒的他人出产环境代码来上线的，这可真是五线谱上瞧不见马——就你马离谱了呀😂。
等到其他项目忙完一阵，领导也开端催我进度，年末的时分我便向前端组长报备了一下，说接下来我要把这个项目好好完善一下（主要是项目交叉来交叉去不利于开发），组长人也很好，其他需求也就没组织我做，过完年后到4月的这两个月时刻，我得以专心于这个项目的开发。
其时根本功用都做的差不多了也开端优化界面，没有UI规划怎样写界面？别问，问就是就是学(chao)习他人优异的规划，当然也加入了一些自己的主意🤔，三个月时刻里，尽管细节仍尚欠火候，然项目大致成型，psd解析也有，还爬了一些模板和资源，整个运用流程算是跑通：
转危为安的服务端生成图片计划
开发中遇到的问题现已数不清有多少了，但最大的问题仍是莫过于图片的生成计划，想想在客户端一顿操作，以为自己画了只虎，成果下载一看却是只猫，那不是白搞了？
一开端思想局限于前端，我也做过不少共享海报的事务，都是采用 html2canvas 这个库，记得曾经为了完成渐变色的支撑，还有object-fit:cover(也就是图片等比居中)之类的作用，花了不少时刻修正源码，知道了其原理是解析DOM并转化成Canvas语法重新制作，也就理解这其间必定存在许多坑，尽管用来做一般的页面截图倒也没什么问题，可是碰上文字特效等css特点、svg等场景，登时头皮发麻，并且像 html2canvas、dom2image 这类库，终究生成的图片都不能保证跟你页面呈现是完全一致的，除非你的整个画布就是用canvas烘托，一切操作和作用都转化成canvas语法去做，那前端就能够直出图片了，可是抛开完成本钱不谈，canvas关于处理复杂操作的才能本身就较弱，这样做出来的页面会很卡，并且许多高档的css语法也没法用上会比较惋惜。
稿定规划许多作用也是用canvas标签制作的，所以元素多的时分稍会卡顿。比较特殊的是创客贴，画布是用svg烘托的，svg比canvas具有更好的底层才能，所以比较流通，它的产品是在页面直出图片的，但除了出图速度以外看起来没有其他优势，并且我觉得稿定规划也并不是不能在前端直出图片，从他们的吸色器功用上就能够看出，在前端应该现已具备了解析整张画布的才能（或许有自研的canvas解析器）。
搞不定图片生成，这项目还有做下去的必要吗？写一套DOM解析器？那得花多少时刻？开发人员就我一个，才能上限就摆在这，即便硬着头皮去开发，也没有什么具体思路，没有最佳实践能够参阅，怎样保证今后迭代更多功用的时分不会推倒重写？其时想到这现已是直冒盗汗了，找前端组长聊了下，提了一嘴 puppeteer，这个之前接触的时分只认为是做主动化测验和爬虫的东西，但从原理上讲似乎也能够处理现在的场景，当天晚上回去就写了demo测验，发现作用还不错，并且图片生成用浏览器截图的话也能够和前端解耦，前端就能够测验各种办法去完成作用，只需坚持linux谷歌浏览器是最新版本兼容性便能够拉满，登时又燃起了希望！不过组长并不建议我布置到服务器上，而是说让后端写什么轮询的接口，在本地用主机跑这个服务，由于其时公司的一个视频制作项目就是用这种办法搞的。但我觉得是ffmpeg对机器功用要求高，密集型运算的服务器又特别贵，所以或许才考虑用这种计划降低本钱，我这只是个无头浏览器问题不大（当然我在自己服务器实践了），终究布置的时分的确遇上些小曲折，但那都是后话了。
飞龙探云手
为了弥补规划部产能不足的问题，领导暗示我从网上收集些模板和素材过来，让规划能够在里面选择/调整之后快速扩充模板数量：
其实说白了就是爬虫+分析数据结构、转成自己的模板结构、资源下载、入库。这个进程就好像后端写了接口却不写文档，你要去盲猜他每个字段是什么意思、用来干嘛，当然项目里也得支撑相关的功用，所以并不是完全复制的概念。
收集的资源会默认为“未激活”状态，由规划部分去修正和判别停启用。一开端边测验边录入数据，每天入库几十个模板，老板嫌速度太慢，我爽性就化身无情的模板搬运工，用公司电脑不舍昼夜地挂机了两天，终究入库将近3万个模板，把规划部几年的工作量都给组织了（这儿悄悄说下，其实我也收集了稿定的，可是不敢给公司用，只敢把小厂的偷来😏稿定的只给自己消遣和研讨，分析数据的时分也能学到不少东西）
关于字体版权，收费字体能够单买运用权，或许买商业授权，一般一个字体几百到几千不等，授权是永久性的，像正常ToC的规划网站买下商业授权后，提供给用户下载的图片包括的字体也是可商用的了。但字体的授权方式现在还仅是一纸正人协议，只需下载到字体没有版权也能够运用，可是如果你公开商用并且被发现了的话，就会被版权方追究，产生巨额赔款。我司项目一般是私有化布置到客户环境的，商用字体会“温馨提示”一下，危险由客户自己判别，当然咱们自己出产的海报都是尽量运用免费字体，毕竟免费的字体其实也不少。
PS: 现在公司后台的未审核模板数还剩下2万个：
但规划部最近又阅历了一波人员变化，现在产能是愈加不足了😂。。
node服务与linux浏览器docker化布置
关于Node服务的布置，也是困难重重，首先是运维方面非常不认同NodeJs，说漏洞非常多，听到我要运用node+chrome的计划时更是强烈滴反对，说linux浏览器曾经就用过，非常不稳定，还会搞崩服务器等等。但我寻思着自己1核1G小主机都不会崩，公司的服务器怕什么呢？所以仍是坚持了自己的计划（前面说了纯Web制作咱也真做不出来啊）。
最终我的服务总算是布置上去了，由于公司没有布置过Node的经历，周日我还在企业微信上和php技能经理来回对接，先在他的本地环境先跑通一个容器，装备好后导出镜像，处理完各种奇奇怪怪的报错之后，终究给到运维一个docker镜像和一条运行指令，代码目录则映射出来走CI/CD发布。本来我还以为这些事能全部抛给运维的，想多了。
运维这边则给了一个内网端口，由后端php再写一个接口调用，并且加了个url回调，当我截图使命结束时再调用它，告诉php去拿到图片。这样能够在url加串md5处理一个鉴权问题，关键外网也不能直接访问到Node服务（运维放下了手中的刀）。而前端下载则只能不断轮询php的接口，轮询到有成果时才拿到下载地址，比较的呆。
模板PSD解析上传
由于咱们的项目并不针对C端用户，所以比起掩盖各行业场景的模板需求，垂直范畴海报的模板下沉更有意义，这当然离不开规划部的添砖加瓦，此刻将平面规划师做好的psd上传到后台解析成可交互模板就很有必要。这块涉及到许多东西，包括各种字体特效、文本多行拆分款式、图片蒙层解析、分组多页面等功用——我都是没有完成的😂，只做到了根本够用的程度，所以也写了一些PSD规划标准给规划部，以免规划师辛苦做了图传上来却显现了个寂寞。
这块和稿定规划比起来就是班门弄斧了，稿定没有任何标准，由于99%的psd文件它都能近乎完美的解析，文件是上传到服务端解析的，不知道具体怎样完成，横竖能够支撑解析很大的文件，而我是在前端浏览器解析完再上传的，遇到超越200M的psd文件根本上页面就卡死在那摆烂了。
技能先行
由于自己是整个项目的owner，UI和产品介入后我开端有两套代码，一套是给公司开发的，另一套是自己的实验田，有些功用自己做了觉得能够，就git检出比较代码手动迁移到公司项目里，比方当产品告诉我他想加一个二维码功用的时分，我现已开发完一版了，直接截图给他，所以产品原型也不画直接用截图给我提了个需求单😂。
一些或许风趣的功用，但没上线
测验了不少风趣的功用，但其实折腾多了，有点“面向谷歌浏览器开发”的感觉，由于浏览器之间的差异很难抹平，做到完美兼容对我来说几乎不或许，所以有许多都没上线，怕出什么bug，又有些实验性质的东西，就只是自己玩。
简易css点九图，不太好用，稿定是canvas完成的：
文字特效模块，有点拉跨，还在开发中：
svg，吸色器，图层等功用演示：
图片容器功用，有点bug还没修完：
也简单做了一下后台的模板与素材办理：
项目到这儿介绍的也就差不多了，总归就是一个不断探究又不断折腾的进程。其实互联网行业里大部分的产品我感觉都挺饱和的了，很难讲什么真实的立异，都是缝合一下就出来个产品，再按实际需求去做功用点。而像遇到这种非常规类型的项目，技能主导就显得尤为重要，一般的产品专员很难发挥作用，技能才能既决议了产品的上限，一起也是一道难以逾越的壁垒。我在做这个项目经常想的一类问题就是: 稿定这个功用到底是怎样做到的？当然偶尔也会想摆烂，那会和搭档开玩笑说我是一个人的下水道对标百人前端的天花板，可是每当做出来新功用时，多少仍是有些小兴奋，人在巨大落差感面前，也总会不断激起前进的愿望吧。
其他
由于公司的基础建设非常薄弱，我自己也花了不少时刻在基建探究上面，试图找到一些改进开发的办法，从成果上讲都罕见成效吧，就稍微提一下，有空仍是会继续研讨的。
一开端树立过Vue2组件库、Vue3组件库，由于公司的前端项目根本都是运用Vue2技能栈的，所以我在4人前端小组里推过我做的这个组件库，其时我考虑的重点是怎样用起来舒服，所以编写了主动化脚本代替一些操作，并且我认为公共组件库就是给咱们用的，运用文档很重要，所以组件文档也是要做到能根据代码和注释主动生成，降低开发本钱。
但从成果上来讲，组件库这半年来除了我自己写的demo，就没有其他的提交，我总结了原因一个是出产力难以解放，咱们都没有编写组件的时刻，一起也很难量化为工作产出。另一个问题是咱们都不知道该怎样做公共组件，到底是做事务型组件仍是功用型组件？功用类组件其实大部分都有轮子存在，重新造一个轮子对出产功率或许没有提高，偏向事务的组件更能解放出产力，可是比较检测组件笼统才能。
以上是内圈要素，外圈要素是一般咱们的项目都是基于收集甲方意见来做的，本身罕见明确方向的产品指导和一致，很简单冒出来一些没考虑到的特殊定制化需求，这也导致了组件很难笼统。比方后台一个文章抽屉的组件，几个页面中都有引证，里头几千行代码，由于迭代次数过多，事务逻辑也多，本身现已很难保护，要将其抽成公共组件可谓是爱莫能助。
我也考虑过除了单纯的组件库，构成公司专有的UI库或许也是一条路途？也就是需求UI规划师也参与进来，咱们把一些功用类组件风格化，UI在做规划稿的时分则应该避免特殊规划，遵照已有风格化的组件来规划页面，这样在组件库掩盖度足够高的后期，乃至能够不用走查UI，由于大部分都定制在了组件库里，并且还能随时修正风格，将引证晋级一下即可，不用一个个页面找出来改。不过这个主意也只能是项目开端之初就定下来，如果在现已成型的项目里，这么做或许就意味着很多旧代码的改造。
我的组件库是基于monorepo模式并由lerna进行办理的，组件deploy会直接发到官网上面去，所以当然也有准备要布置私有npm的（是的咱们公司项目都是淘宝镜像梭哈），可是碍于要去和运维请求服务器资源，或许还需求处理权限账号之类的对接，并且很奇葩的是我Gitlab连创立仓库的权限都没有，觉得约束太多懒得去搞了。
公司项目太多，分支办理也有点混乱，经常需求来回横跳切换，发布有的是CI/CD，有的是本地编译后提交dist目录，觉得费事，写了个主动化脚本，通过交互式装备使命来主动处理提交发布，还有判别使命执行危险、代码抵触检测机制、使命热重启、主动跳转到pr合并等功用，个人觉得挺酷，可是咱们公司操作Git都是“小乌龟”起手（php应该很熟悉），不像我喜欢用指令行。
关于前端团队标准，代码校验、提交标准都探究了一遍，产出了一篇文章，写的时分感觉到进程其实都是些依靠安装和装备修正，并且提交也费事（有时连一个空格都不能打错，那么多类型记不住横竖不是feat就是fix），所以基于此我编写了一套主动化东西 vue-cli-plugin-norm 主动给项目树立标准装备，基于装备大于约好的准则，默认主动校验代码风格，并且提交也简化了，变成了指令行交互式，还集成了一个小服务，能够把一切commit以网页方式快速查看，不过这个感觉比较的鸡肋。
| 安装作用 | 提交功用预览 |
|---|---|
由于其时也在学习怎样写vue的cli插件，就把这个东西写成了cli Plugin，不知道是不是这个原因，发布到npm后竟然有不少的自然下载量，直到现在现已有 20k+ download数据，不知道他人用着怎样样，横竖我根本没在公司项目里运用（由于提交标准原理是阻拦git hooks，可是咱们大都前端代码是没有独立仓库的，都放在了php仓库的目录下。。
最终
既然你都看到这了，我也说说我个人的状况吧。前端开发有四五个年初了，专科小透明，坐标广州。很惭愧，顶着高档的title却拿着初级工程师的薪资，一点没有夸大。大环境欠好不是理由，这两年自己工作规划上的确也有问题，频繁跳槽还都是拿平薪，当然本身也还不够尽力。看他人写总结开篇就是毛遂自荐，我放结尾写，实在是怕各路大佬刚进来就看了个笑话，而之所以还写到这些，也当是给后来人提个醒，工作路途要早做准备、多做计划，才能增加有快有慢，或许方针感才更能决议胜败。技能不必急于求成，都是能够渐渐学的，但环境或许不会变好，或许尽力去到更好的环境，才更能加快你的生长。
最终，希望本科考试顺畅，然后要赶快把TypeScript和Canvas体系地学习一遍，要赶快能坚持每天练一下算法题，补足本身硬实力。就不立什么Flag了，要做的事情还有太多。就这样吧，坚持考虑，坚持学习，平常心。
