# 前端常用解决方案

# 问题

• git 配置多个SSH-Key (opens new window) (opens new window)

• 使用Visual Studio Code对Node.js进行断点调试 (opens new window) (opens new window)

• iframe刷新，单页应用保持当前路由 - sessionStorage

• pc兼容性，safari底部莫名有个横条 - 禁用/卸载迅雷插件

• npm查看全局安装过的包 - npm list \-g \--depth 0

• npm管理员彻底删除包 - npm unpublish <package-name> \--force

• svg-icon - css能控制svg颜色等，但内部fill属性优先级大于外层fill或css属性

• 跳页锚点 - 考虑兼容性，使用隐藏的a标签作为暗锚即可

• 长文字只能控制在n行内 - vue-clamp (opens new window) (opens new window),原理使用Element.getClientRects()这个API

• span包含长文字不换行 - 块级元素自动换行，内联元素分两种：全英文内联元素不会自动换行，包含中文过长会换行

• 'abc'[0] = 'a' - 深入理解JavaScript类数组 (opens new window) (opens new window)

• git命令删除远程分支 - git push origin --delete branchName

• axios get请求参数，要么带在url，要么设置到config.params中，不能设置到config.data（该选项会设置在body中，post请求才这样做）。 -- github axios (opens new window) (opens new window) / GET request does not send data (JSON) (opens new window) (opens new window)

• 统一的项目开发环境，检验node版本 -- package.json中engines字段配置即可。JavaScript工程项目的一系列最佳实践策略 (opens new window) (opens new window)

• 部署代码报错：cannot read property 'startsWith' of undefined (opens new window) (opens new window) -- 使用了动态导入（如import或requext.context等API），但没有创建对应的路径。

• function(...args){ console.log(args)} -- 解构后，args是个数组对象

• 后台302重定向一定需要是在页面上（window.location.href） -- 不能通过ajax请求让后端页面重定向，ajax只接收json/txt/stream等格式

• Vue后台权限方案 (opens new window) (opens new window) - 原理通过登录获得用户拥有的roles，然后根据整个前端路由表（meta包含这个路由项是哪些roles有权限访问），最后根据两者交集得到routers并通过router.addRoutes动态添加

• 面包屑导航 (opens new window) (opens new window) - $route.matched，这个API完美解决

• export * from './child' (opens new window) (opens new window) - ES6模块导入，重构将大文件拆分成多个小文件

• 当前页下载文件 (opens new window) (opens new window) 通过H5中，给a标签加download属性

• 拖拽动态改变宽度 (opens new window) (opens new window) 依赖原生mousedown/move/up事件

• 拖拽事件 - dragenter、dragleave

• webworker (opens new window) (opens new window) 可用于拆分出一些复杂逻辑，比如大文件上传、文件批量下载、轮询等。- 实用的封装webpack worker loader - workerize-loader (opens new window) (opens new window)

• electron的render进程也可以直接使用nodejs api

• debug vue源码 (opens new window) (opens new window)

• github fork后同步源更新 (opens new window) (opens new window) 提pr必会

• github 把子目录发布到远程gh-pages (opens new window) (opens new window) 发布个人项目必会

• 解决git pull/push每次都需要输入密码问题，一行命令：git config --global credential.helper store

• jest 报错 SyntaxError: Unexpected string (opens new window) (opens new window)

• CSS样式使HTML标签占满父容器的方法 (opens new window) (opens new window)

• 简易Redux写法 (opens new window) (opens new window)

• 遇到vue和vue render不匹配时，升级到相同即可。注意升级vue的同时需要升级vue-template-compile

• 强制把本地develop分支推送到远程master分支 (opens new window) (opens new window)

• .npmrc指定scope域对应的源路径registry (opens new window) (opens new window): @myscope:registry=https://mycustomregistry.example.org

• 骨架屏通过ssr注入到html template文件中 - github中项目源码 (opens new window) (opens new window)

• MacOS 本地80端口被占用 (opens new window) (opens new window)

  1. 查询：sudo lsof -n -P | grep :80
  2. 杀掉其中的node应用id：sudo kill 1000

# 技术选型

• svg图标: vue-svgicon (opens new window) (opens new window)
• 日期选择: vue-datepicker-local (opens new window) (opens new window)
• 表单验证: vuelidate (opens new window) (opens new window)
• node中客户端http请求库选择 superagent
  • 建议选择superagent,支持链式调用以及post json数据解析。node环境中不建议axios，因为axios请求需要qs等第三方库进行post数据stringfy，而且不支持发送嵌套的object数据。
• 富文本编辑器 vue-quill-editor (opens new window) (opens new window)
  • 底层使用quill (opens new window) (opens new window)，较好的界面和扩展性
• markdown编辑器 tui.editor (opens new window) (opens new window)
• 复制到剪切板 clipboard.js

# 工具集

• css代码片段 (opens new window) (opens new window)
• licecap (opens new window) (opens new window) - 录屏gif工具
• ProcessOn (opens new window) (opens new window) - 在线画图
• Charles - 抓包工具配置教程 (opens new window) (opens new window)
• transactional-email-templates (opens new window) (opens new window) 响应式html邮件模板
• 在线图片压缩工具
  • squoosh (opens new window) (opens new window)
  • tinypng (opens new window) (opens new window)
• 在线svg
  • badgen-service (opens new window) (opens new window) 在线图标生成服务
  • sb (opens new window) (opens new window) 在线多种svg图标

# Github优秀源码

• Vue
  • vue-element-admin (opens new window) (opens new window) 完整的项目案例，界面精良，较多的第三方组件方案（icon、permission...）
• React
  • react-redux-todo (opens new window) (opens new window) 经典的react-redux TodoList示例
  • react-pxq (opens new window) (opens new window) 清晰易懂的react入门项目
  • git-history (opens new window) (opens new window) react hooks实例
  • redux后台管理系统 (opens new window) (opens new window): redux
• NodeJS
  • node-elm (opens new window) (opens new window) 基于express的项目
  • koa-ts 基于koa + typescript的项目模板：
• JS
  • 30-seconds-of-code (opens new window) (opens new window) 短小精悍的js代码片段
• Common
  • quicklink (opens new window) (opens new window) 兼容性好的页面资源预加载解决方案
  • clean-code-typescript (opens new window) (opens new window) ts最佳实践
  • 《深入理解TypeScript》 (opens new window) (opens new window)
  • free-programming-books (opens new window) (opens new window) 学习加油站
  • 33-js-concepts (opens new window) (opens new window) js必须知道的33个概念
  • docker_practice (opens new window) (opens new window) / docker-tutorial (opens new window) (opens new window) docker学习
  • minipack (opens new window) (opens new window) 极简版webpack打包，对webpack模块原理非常有帮助

# 优秀文章

• Node.js 中的依赖管理 (opens new window) (opens new window) 介绍npm依赖、版本号规则、npm vs yarn

• 浏览器内核、JS 引擎、页面呈现原理及其优化 (opens new window) (opens new window) 介绍渲染引擎和JS引擎（V8/JavaScriptCore等），以及它们如何“画”一张网页

• 前端解读控制反转(IOC) (opens new window) (opens new window) 最容易理解的前端控制反转，案例清晰

• React

  • setState为什么不会同步更新组件状态 (opens new window) (opens new window) 为什么setState不同步
  • React 源码剖析系列 － 不可思议的 react diff (opens new window) (opens new window) 详细说了react diff细节以及注意点
  • Immutable 详解及 React 中实践 (opens new window) (opens new window) imuutable在react中实践
  • React Fiber对现有代码的影响 (opens new window) (opens new window) 浅显易懂的讲述了fiber来由以及影响
  • React v16.3之后的组件生命周期函数 (opens new window) (opens new window) 说明了fiber架构给生命周期带来的影响

• VueI18n源码解析 (opens new window) (opens new window) 原理跟vuex异曲同工，都是创建监听对象data，并watch变动，更新view。建议阅读

• Effective前端3：用CSS画一个三角形 (opens new window) (opens new window)