第十三题：有没有做过什么困难的项目？
KieSun opened this issue · comments
今天来做一道其实算是很常见的泛技术问题：有没有做过什么困难的项目？
对于这个问题大家会如何作答？
其实这个问题大家会遇到一个误区，就是绞尽脑汁去想：我到底在这个鬼公司里做过什么难的项目，然后发现没有难的，于是就被这个问题卡主了，导致面试的时候双方都很尴尬。
类似的问题还很多，遇到这种问题，我们需要的是曲线救国。比如说你觉得公司里做的没啥的难的，就说说平时学习中有没有遇到过啥的难题，或者别的你觉得难的事情，没必要就卡住在项目上，这样总比什么都不说来的好。
新建了一个大厂真题每日打卡群，有意愿学习打卡的再进，请备注打卡。
先 marked 一下，今天的砖格外烫手，搬完再与大家娓娓道来 ...
- LowCode 低代码开发前端解决方案
- SPA 无侵入二次开发框架
可能有些歪楼，我遇到的困难项目，不是关于技术上的困难 而是关于管理上的困难
背景
2017广州三线小厂，空降领导，领导是后端开发背景，主要使用Java，技术选型会议的时候强调要使用当时自己上家公司使用的JSP + jQuery + boostrap 开发实现移动端PC端等多端的功能（最后只实现了PC端）
当时Vue，React，Angular 三架马车是主流库，背道而驰选择了领导熟悉的框架，在会议后多次尝试沟通后，只能硬着头皮进行学习，当时使用的UI框架是 EasyUI，相信很多前端开发者估计都没听过
过程
开发过程相当坎坷，一方面需求经常改动需要和产品经理和技术经理开会沟通，一方面新的东西需要学习成本（当时熟悉的技术栈是Vue 和 React）而且技术选型出现问题，用 EasyUI 去实现一些设计师想要的UI效果 等于 直接重写整个UI框架，还有一方面是缺失项目管理工具，工作没有排期等等。其中有一个有趣的经历，让我知道寡头管理，对整个项目是多么重要。当时公司里面有两个技术领导，其中一个负责管理移动端开发（IOS&安卓），另一个管理后端和前端。因为在讨论技术问题闹了矛盾（导火索），导致两人互相不待见出现了内耗的情况，最后是以其中一个领导离职得以解决。
结果
公司资金链出现了问题，项目没办法落地，最后流产。匆匆一年时间，学到的可能是如何封装一个 UI 框架（二次框架开发） 和 项目上更多应该关注 如何高效发挥每个人的能力和有效实现项目落地 不然再牛逼的技术实现都事白搭 (￣▽￣)"
这个问题真的不知从何答起，越想越气，做了这么久还是业务居多。
近期遇到最复杂的一个功能算是canvas 操作吧，放大缩写、裁剪、标注之类的点。
一个缩放组件+一个框选标注组件，最多的计算就是将缩放裁剪后的坐标映射到原图上去。
说难其实也不难，api 涉及的也不多，只是越做越感觉需要再把大学学的数学只是再回顾一遍了。
其实我也好想做哪些高大上有难度的东西啊
其实平时难点太多了，技术实力匮乏，总会遇到各种问题，就说俩近期遇到的并解决的吧。
- Prerender实现前端预渲染（SEO）
- 搭建ELK实现前端日志组件
遇到的问题
遇到的问题确实很多，但是分很多种，我觉得最需要重视的问题是用户体验反馈回来的问题。
描述
我们做to c产品，给运营和测试开发了一个后台工具，其中有一个审核模块，每天需要审核很多用户的信息，审核模块是一个列表类似于table组件，每一行的数据和图片里都很多，一次加载100条或200条的时候，不管是前端，后台的数据返回也很慢，导致了滑动可能出现卡顿（当时未做任何优化），他们不光是要预览这一页数据，还要批量或单个操作数据，带来的问题还有数据操作后，当前行数据可能会消失，为了防止误操作还做了重新刷新当前页的功能，将当夜操作后的一行数据重新加载出来，并执行操作过的数据进行其他标记。
解决
解决方法感觉网上特别多，大数据的加载性能优化啥的。我主要参考了所用的ui组件，是否有类似的问题，毕竟组件的渲染形式也会影响性能，然后又参考了代码结构，数据的响应式是否过多，导致监听数据量过大，最后参考了黄轶大佬文章<揭秘 Vue.js 九个性能优化技巧>,结合自己工作经验，总算把滑动卡顿以及数据渲染问题解决。
结果
运营单个人员在审核工作上的时间至少节省一半。并且性能不卡顿，审核效率更好。
遇到的最多的问题就是一个简单需求我需要改我二次封装好的组件，然后关键是还不知道有多少处引用，各种奇奇怪怪的需求
（救救孩子~）
- 新需求对旧组件封装的困难，（粘一个新的文件是最快的办法，但是代码也会相应变多）
- vue+element组件开发表格组件有个问题就是插槽自定义展示数据不能和表格属性数据溢出省略显示融合
- 在一张图片中的A4纸上有多个票据，通过圈选图中的票据，把每个票据切成单独的一张图片，后面又发展了深度学习来自动的圈选票据，可最后只学习圈选了火车票和普通发票。
- 现在做的是一个电商的项目，如店铺首页的装修（需要包含web，h5以及小程序），商品的sku，发票，订单和售后等等。目前整个项目做下来感觉商城比自己原先想象中的难。
简单说下最近一段时间实现的难点功能
1. 业务需求需要，手写input输入框，特定关键词在input输入框内高亮显示，并且自动识别出时间点。
实现最核心的方法就是要运用getSelection()和createRange()即可。
譬如下面的属性跟方法：
指定元素内容可编辑状态：contentEditable
获取/设置光标位置：
win.getSelection().getRangeAt(0)
document.createRange()
document.createRange().selectNodeContents()
document.createRange().setStart()
其次还要用到select()、collapse() 等其他方法（还是挺多的，列不过来了）
最重要的当然是识别到关键词要新建一个html模板变颜色，最后通过innerHTML属性给这「自定义input（实际上是一个div）」赋值即可。
说得好抽象，附上一个截图
2. 基于TinyMCE富文本hack源码二次开发「代办事项」等功能
这个就是拿一个比较成型的富文本库（TinyMCE），看懂源码以及各种调用的方法和封装好的属性，在其源码基础上新增功能，这个涉及公司代码就不上图了。
富文本操作核心的方法：跟上面第一点说的「手写input」差不多，也是要使用到getSelection()和createRange()，还需要一个document.execCommand()，execCommand这个已经能支持挺多属性的了，值得学习一下。
但是有一个隐患：
目前调研看过挺多富文本都有用到这个属性，且用且珍惜！
3. yck出的题目
难，很难，十分难，非常困难！
o(╥﹏╥)o~
遇到的问题
- 背景：因为公司战略的调整，项目数量激增。还要同时远程和两个同学一起写。
- 面临的问题：时间紧张没有时间去提效
- 项目增加：对应的需求沟通时间增加。工作量增加
- 人员增加：需要解答问题，review代码，框架讲解。时间不知不觉就没有了
- 临时解决方法：
- 列出整体项目，提前报风险
- 人员技术培养，共同学习
- 项目集中时间沟通，集中时间汇报
- 技术方案优化，协作开发文档梳理
但是很累，很难，没有时间做提效的东西。四处救火。求解决方法 😭
最近做的广告项目，需要实现编辑区域内的元素随意拖拽调整大小等：
遇到的问题：1.是左侧多个元素修改大小后右侧图层或者属性框再次调整大小，都是根据编辑区域内未修改之前的值进行调整
2.图层操作排序之前在编辑区域内调整过大小，排序之后多个元素的样式--彼此污染---代码里面打印是对的效果是不对的==
3.需要编辑区域内可以同时多个元素Active==插件不支持
解决方法：1全部深拷贝--只拿元素数组本身进行操作，避免彼此影响；2元素增加唯一值属性用来作排序层的区分；3==未解决
- 重构一个已经上线的富文本编辑器。
- 写一个渲染引擎。自建DSL，自建排版引擎
简单说下最近一段时间实现的难点功能
1. 业务需求需要，手写input输入框，特定关键词在input输入框内高亮显示，并且自动识别出时间点。
实现最核心的方法就是要运用getSelection()和createRange()即可。
譬如下面的属性跟方法：
指定元素内容可编辑状态：contentEditable
获取/设置光标位置：
win.getSelection().getRangeAt(0)
document.createRange()
document.createRange().selectNodeContents()
document.createRange().setStart()
其次还要用到select()、collapse() 等其他方法（还是挺多的，列不过来了）
最重要的当然是识别到关键词要新建一个html模板变颜色，最后通过innerHTML属性给这「自定义input（实际上是一个div）」赋值即可。说得好抽象，附上一个截图
2. 基于TinyMCE富文本hack源码二次开发「代办事项」等功能
这个就是拿一个比较成型的富文本库（TinyMCE），看懂源码以及各种调用的方法和封装好的属性，在其源码基础上新增功能，这个涉及公司代码就不上图了。
富文本操作核心的方法：跟上面第一点说的「手写input」差不多，也是要使用到getSelection()和createRange()，还需要一个document.execCommand()，execCommand这个已经能支持挺多属性的了，值得学习一下。但是有一个隐患：
目前调研看过挺多富文本都有用到这个属性，且用且珍惜！3. yck出的题目
难，很难，十分难，非常困难！
o(╥﹏╥)o~
关于第二点，其实用一个L1的富文本编辑器基本可以解决，这类编辑器基本不依赖execCommand，或者用的是自己封装的execCommand
难的就是对于前面人写的山一样高的补丁代码，一个dialog可以写1000多行的项目实在是遭不住呀。
最近要在标准能力上加一些对于特定用户的定制能力，结果项目一接手发现所有部门的逻辑都在一起，拆代码拆的要疯
简单说下最近一段时间实现的难点功能
1. 业务需求需要，手写input输入框，特定关键词在input输入框内高亮显示，并且自动识别出时间点。
实现最核心的方法就是要运用getSelection()和createRange()即可。
譬如下面的属性跟方法：
指定元素内容可编辑状态：contentEditable
获取/设置光标位置：
win.getSelection().getRangeAt(0)
document.createRange()
document.createRange().selectNodeContents()
document.createRange().setStart()
其次还要用到select()、collapse() 等其他方法（还是挺多的，列不过来了）
最重要的当然是识别到关键词要新建一个html模板变颜色，最后通过innerHTML属性给这「自定义input（实际上是一个div）」赋值即可。说得好抽象，附上一个截图
2. 基于TinyMCE富文本hack源码二次开发「代办事项」等功能
这个就是拿一个比较成型的富文本库（TinyMCE），看懂源码以及各种调用的方法和封装好的属性，在其源码基础上新增功能，这个涉及公司代码就不上图了。
富文本操作核心的方法：跟上面第一点说的「手写input」差不多，也是要使用到getSelection()和createRange()，还需要一个document.execCommand()，execCommand这个已经能支持挺多属性的了，值得学习一下。但是有一个隐患：
目前调研看过挺多富文本都有用到这个属性，且用且珍惜！3. yck出的题目
难，很难，十分难，非常困难！
o(╥﹏╥)o~
有可能前端大佬 张鑫旭 有css属性更方便的实现
感觉好像没遇到很难的项目,遇到的问题都解决了,感觉没有特别值得说一说的,后续有了再来补~
做过的一款可以语音通话和IMl聊天的应用
- 输入框显示和插入表情，而且要把表情插入光标所在位置；很多烦人的bug，使用了很多平常不用的dom api；
- 手机端还插入表情，还有自定义拨号盘，要想尽一切办法不弹出键盘
- 语音通话还涉及一堆网络相关问题，需要通过Wireshark抓包，再与底层io库开发、服务端网关开发门各种撕逼；
- 项目没有android和ios开发人员，很多native 功能得自己实现
剩下的再补吧
在业务中遇到花了很久时间问题不多，技术栈是vue，所以是vue的问题
- 数量很多的双向数据绑定导致页面加载空白，经过数十秒才正常，期间控制台里network对应接口显示空白。最终通过performance发现vue在过程中内存占用很大且持续时间最长，最终解决问题
- 业务中存在数十万的数据，写了一个异步加载的树组件，但是实际当中一个节点可能加载大量的数据，页面内存会溢出，不得不说vue2的性能确实存在问题，最终通过方法避开vue的数据绑定，顺利加载大量数据
抛开技术上的难点来说，实际在工作中，随着自己一点点的进步，对于协作，沟通，项目进度的把控，人员资源分配，向上汇报，以及总结沉淀，都需要花费很大的精力，算是职业发展比较困难的一部分，每一步提升都是进阶
之前使用el-form时遇到过一个reset问题，点击显示一个弹窗，编辑和新建共用这个弹窗，先点击编辑后，关闭弹窗再点击新建，虽然在关闭的时候reset了这个弹窗内的el-form，但是在新建的时候发现上次编辑的数据依然在，最后发现是点击编辑的时候才创建弹窗以及内部dom，此时已经将编辑的内容作为初始值了，reset知识将el-form中的数据变为初始值，而不是都变为空。
之前做一个电商小程序，商品详情页面的sku选择交互，要实现选中其中一种商品规格，当前规格所组合的其他规格如果无货，其他规格的按钮就要变为不可点击，一开始以为很简单，后面做的时候才发现非常复杂，跟领导共同探讨解决方案讨论了一两天都没讨论出个解决方案，那几天满脑子都是在想这个问题， 后面自己下班路上思考了一下，灵光一闪就想出来了：我是把所有可选的sku组合提取到一个数组 arr 里，然后单个商品规格的按钮我都弄成组件，然后在商品规格按钮选中和不选中的时候，重新计算得出arr，然后每个商品规格按钮单独判断自己能不能被点击，能点击就是可点击状态，不能点击就是disable状态。
我相信做过商品详情业务的同学大概率遇到过
有兴趣的可以点击这里，sku组合查询算法
看到这个题目，居然回答不上来，好惭愧。
推荐一个知乎上的问题
前端实习面试官一直问我项目有什么难点，这种问题怎么回答？
正在做一个文件上传的功能，有以下几点要做
- 实现拖拽，复制文件上传
- 检测文件类型
- 实现秒传效果
- 实现大文件上传，减少页面卡顿
- 。。。
实现好后放到github上
看到这个题目，居然回答不上来，好惭愧。 推荐一个知乎上的问题 前端实习面试官一直问我项目有什么难点，这种问题怎么回答？
这个知乎回答一般般，是针对实习生的
