# 问题小计

# 渐近式重构

比如之前有个前端是使用PHP模板渲染的项目，现在需要使用 VUE 框架重构，如何渐近式得完成重构。
即重构完的页面就投入生产使用，说白了就是新旧项目都运行在线上，访问的页面有新页面时就跳到新项目没有则跳转旧项目

其实两个项目来回跳转使用的最大问题是于登录权限的问题，解决这个问题一个技巧是两个项目都挂载在同一个域名下，Cookie 种在根域名下，这样只有有一个项目登录了，另一个项目也能使用相同的Cookie 进行微分验证

# 公共组件库的管理

成熟的组件库可以使用 npm
还在完善中的组件库可以使用 gitTree

# 难得在工作真正中使用 Class

一个 Electron 项目，有两个版本：普通版和加强版。两个版本界面一样，功能一致，交互调用的方法也基本一样，只是加强版在某些方法上作用比普通版强一些。于是使用Class来封装这些方法，公共部分放在基类，不同的版本在各自继承实现自己特定功能部分，启动或和打包时通过命令在项目注入全局变量，通过全局变量来 require 普通版或加强版的方法

# 疑难杂证

跨域很常见，有个项目使用 CORS 来处理跨域问题，前后端正常访问没啥问题。直到项目有这么一个需求，下载附件。交互设计为：

前端请求接口
后端返回Buffer内容，文件名放在 Header 头中
前端获取 Buffer 内容转换成blog 然后根据 Header 头中值作为文件名生成文件

问题在第三点 Header 头，在运行时发现总是拿不到后端同学所谓的 Header 头的值。前后端争执不下~ 都说自己没问题~~

这个问题的根本原因是大家遗忘了跨域情况下，允许访问的 Header 属性是有限的，能访问的 Header 属性有：

Accept
Accept-Language
Content-Language
Content-Type （需要注意额外的限制）
DPR
Downlink
Save-Data
Viewport-Width
Width

所以后端需要配置 Access-Control-Allow-Headers 添加自定义的 Header 名！

# 计一次小程序拖动组件使用问题

小程序功能，长按拖动组件进行排序

开发时整个拖动组件是在 movable-area 组件的基础上实现的
基本功能完成后在调整细节时发现长按触发时会有偶发性的 bug，时而能拖动、时而不能拖动
求助谷哥度娘及查看微信小程序社区找解决文案，并没有找到
由于排期问题，跟产品沟通更换个交互方案，先实现了
提测后又重新思考这个问题，并再次认真查看组件的使用文档和社区上提交的问题，并经过自己多方尝试后发现后终于找开问题所在！！

movable-area 组件默认的拖拽方向 none 即上下左右都可以，我这个组件只有上下拖动，所以只赋值了 horizontal，问题就在这里了，设置了 horizontal 就会出现这个 bug，后来改成默认 none 就行了。真是脑阔疼

# 页面迷之卡顿问题

刚接手的项目，有个同事让我帮忙看下有个页面为什么总是迷之卡死。继续排查是一个下拉表单有上千条选择选择导致的。
所以嘛页面卡死无非两个问题

要么复杂的计算把进程堵了
要么就是页面 DOM 元素太多了

# 微信分享配置不生效

如果进入分享的页面是没问题，如果从其它页面使用 router 跳转到要分享的页面，再分享时会出生分享配置不生效的问题

原因：微信的地址栏一直保持着一开始进去的地址
解决方案：使用 window.location 代替 router 跳转