6月23 —— 8月底 项目总结、思考

任务列表

一、 teamind 官网及多端适配

开发时间： 7月1 —— 7月20左右
开发周期： 三周左右
重难点： SEO优化、 响应式布局、 动画效果（3D的箭头旋转动效）、图片性能优化（尤其是GIF）
SEO优化：1、 利用umi提供的ssr预渲染，在打包阶段将静态资源注入到文档中
2、 优化mate相关，提高关键词搜索频率
3、为了让搜索引擎抓到指定的主图，将其他图片设置为背景js懒加载的方式， 将需要的设置为主图的放到最前面，进行样式隐藏， alt写关键词，图片比例等设置，提高权重
图片优化：
对所有图片，通过对 IntersectionObserver类封装成自定义hooks， 对所有图片在显示区的展示效果进行处理， 静态图片懒加载。 GIF图片替换为更小更容易控制播放次数的svga格式， 其他GIF可以控制和静态图片的替换达到优化的目的， 其他格式图片webp格式处理，上传cdn
3D箭头旋转动效，解决是通过监听浏览器的滚动事件，利用雪碧图和css动画的方式配合实现， 此处需要进行节流对监听的事件进行优化
响应式布局采用的策略是， 在移动端采用rem的方式， 通过设计稿和浏览器屏幕的比设置相应的根元素的字体大小，在ipad和浏览器端，通过 @media 媒介查询的方式进行处理， 在大于1900像素的时候js控制宽度不在变大。 两边加padding
问题及排查：
上线后百度搜索teamind关键词SEO排名下降明显，降到了第七页，而谷歌仍是第一，通过排查和搜索相关资料发现是因为teamind在首页的出现密度太高达到了15%， 官方推荐是不高于8%， 太高会被搜索引擎任务作弊行为，而进行惩罚， 但是谷歌浏览器域值设置的比较高，所有15%仍在第一位，后面通过减少teamind的频率，实现方式主要是1、用图替代文字， 2、图片的alt 去掉teamind 关键词

二、 移动端适配 + 用户多设备需求

开发时间： 7月20 —— 8月15左右
开发周期： 三周左右
需求背景： 之前不支持移动端只读， 需要在新版本上，让移动端用户也能通过只读的方式参与进来，并且由之前的用户单设备，改为用户可以多设备参与
重难点： 移动端只读去掉所有事件， 降低代码耦合， 尽量减少对已有功能的干扰， 多设备支持 。 移动端的不同机型的兼容问题
移动端只读： 策略是将元素所有的事件evented设置为false， 可以通过canvas.getObject().forEach(item=>item.evented = false ) 来实现， 但是时机不太好找， 而且需要对初始化， 新增、更新元素等时候都进行此设置， 耦合强、代码多， 而且在后面的回调更新中很容易就会将设置的evented又重新设置为true， 造成只读失败。 最后通过查看fabric事件源码，发现所有元素事件的触发都会走_checkTarget 方法， 最后选择在此处加一行代码优雅有效的解决了问题
降低样式代码耦合： 为了减少移动端代码对之前代码的影响， 将一些页面改造差异大的部分， 进行了移动端的重写， 对差异小，只是隐藏的部分， 通过mobile.css 的方式进行集中改写， 减少对js相关代码的侵入， 遇到的问题是， 对于mobile.css的文件的载入，在本地开发时是可以进行区分的， 但是在上线打包时发现没有进行区分， 也就是说，打包时不会进行判断，在载入样式文件， 而是将所有文件都进行了打包。 最后的解决方案是，对移动端的css文件最外层添加了mobile_wrapper 这个类， 防止变量名的重复对其他端造成影响
多设备支持： 将之前的用户userid改为支持多设备的userid+deviceType组成的新的用户id， 多用户的光标、登陆登出等相关问题的解决
移动端的不同机型的兼容问题：

• 一些字体在安卓字号缺失， 600以后的字重 在汉字上不会继续加重，但是英文上会加重到700
• onPointerDown 在一些移动端机型上不能兼容，如小米原声浏览器， 需要onMouse和onTouce替换
• 纯CSS属性pointer-events：none解决遮罩层滚动穿透问题
• 解决鼠标在元素上时，滚动画板无法缩放问题，解决方案时禁止元素的鼠标事件，然后过100毫秒再unset
• 移动端目录去掉hover，pc端的鼠标hover在移动端会只显示，而无法失去hover的状态

  三、 move-mode 需求 ( 小手拖动画布 )

  开发时间： 8月20 —— 8月27
  开发周期： 一周
  需求背景： 增加小手拖动功能， 避免之前的鼠标在选择拖拽时对元素的一些干扰，造成不好的拖拽体验
  重难点： 主要通过对所有元素evented的事件处理， 在move-mode模式下，去掉所有事件， 取消时恢复， 监听空格快捷键， 监听鼠标的按下和打开， 及时处理手的‘抓住’和‘松开’的效果
  问题及解决：
  产生的bug主要来自于evented事件的处理， 之前是很简单粗暴的进行了处理， 实则一些元素本身是不需要加事件的， 例如用户的光标
  图片的事件处理，造成的bug主要是由于图片的evented设置的实际错误， 不能单纯在初始化时和消息的更新时处理， 因为图片是又三个不同元素处理的， 在大量图加载中设置evented会产品没有设置成功的问题， 后面通过对图片加载完后的设置（fabric.Image.fromURL）中解决了这一系列问题

  四、 其他

  1、代码的统一风格、代码质量、git提交规格的处理 链接

  2、unstated-next 解析 链接