又是一波前端知识点总结

总结的点都杂七杂八，但愿能找到对你有所帮助的，没有的也没关系嘛！😄

1. vue强制渲染某个组件

$forceupdate 使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

由于某些场景 $forceupdate 不起作用，所以用下面的hack方法。一般来说，这种强制渲染某个组件的情况不多，在组件内部应该处理好内部的渲染。

<my-comp v-if="show"></my-comp>
<script>
data() {
    return {
        show: true
    }
},
methods: {
    reRender() {
        this.show = false
        this.$nextTick(() => {
            this.show = true
        })
    }
}
</script>

必须用v-if，v-show不行
在$nextTick回调中重新赋值，否则vue会忽略show的第一次赋值

2. iview 组件的api相比 vuetify 来说少很多

比如 tree 组件，标题的名字写死成

title   标题   String | Element String

而 vuetify 则提供了一个api

item-text  default | name

这样vuetify就灵活一些，可以根据后台的字段去更改key，不管后台用的什么字段，前台都可以不用处理数据就可以渲染出来；相反iview需要遍历数据，给每个子项加上title。
其他还有很多组件，vuetify的api数量是其他框架的2到3倍，这意味着vuetify的可扩展性更强，可定制性更高。

3. toC的页面最好不要用UI框架。

因为框架的css被封装在组件内部，要去修改样式很麻烦，还有一些操作逻辑也被封装在内部，修改同样麻烦。况且toC的页面变化多样，自己写组件更灵活，可操作性更强。
除非UI框架提供的API很多，在很大程度上做到定制，目前来看，vuetify是做的最好的，其提供的api之多是iview或者element的两到三倍。

4. 选择一个UI库，比如vuetify，如果找不到合适的组件。可以去github上找单个的组件支持，不要局限在一个框架里，一个app同时用多个UI框架也没有什么不行，关键是整体风格要保持一致。

5. 国内的UI框架不太重视响应式

比如element-ui，iview， ant design等。具体表现在移动端组件少，table在移动端没有滚动条。如果要想要用这些框架，又想实现响应式的时候，可以用单个响应式的组件替换，比如table。需要某些移动端组件，再去github上找。

6. vue里的ref和v-for一起使用时，得到的引用将会是一个包含了对应数据源的这些子组件的数组

当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

<div v-for="item in list" :ref="item.code" @click="handleClick(item.code)">{{item.title}}</div>

handleClick(code) {
   ~~let dom = this.$refs[code]~~ // 错误的写法
    let dom = this.$refs[code][0]
}

vue的一些api在特殊情况下会出现不一致的情况，这点比较蛋疼，需要对文档比较熟悉。

7. 阿里飞冰（ice-works）

可以选择现有组件和模板等，快速搭建一个后台系统，非常方便，省去了很多写代码的时间，是做外包项目的一把利器。
可以快速搭建原型，展示demo等，后续再在代码上进行二次开发。

8. Gitlab不仅仅可以作为代码仓库，还可以作为项目管理工具，通过标签，里程碑，提交历史，代码审核流程等。

以后在公司里，如果做项目管理或者code review都可以用gitlab来做。

9. css 背景图片background-size的几种适用范围

css 背景图片background-size的几种适用范围

10. 作为TL，安排工作计划，协调各种资源也是需要花费时间的，这些时间需要考虑在内，必然会减少编写代码的时间。这一点要清楚。

11. 怎么评估工期

需求非常明确而且经常这样做：自己评估时间 * 1.5
需求不够清晰，有可能变，但是代码和技术方案熟悉：自己评估的时间 * 2
需求不够清晰，代码和技术方案也是新的，需要探索：自己评估的时间 * 2.5 or 3

自己评估的时间一般会留点 buffer，自我感觉应该没问题，实际上开发过程可能会有各种会议、需求和技术方案变更或者突发事件。所以多留一点 buffer 会更好，因为这个时间点可能是下游运营活动上线时间点，评估后业务方觉得太长可以砍需求拆成两期或者调整上线预期，但一旦设置了时间点，不应该跳票。如果你比预期早完成上线，皆大欢喜，如果你一次次的告知业务方还需要延期一两天，效果正好相反。

12. 无缝滚动组件

无缝滚动组件

13. 前端的工作要紧密结合产品和ui，整个前端展现出来的效果是三者相互合作创造出来的，而不是某一方。前端的一部分价值不仅仅体现在写代码上面，还体现在和ui，产品共同创造好的界面和交互效果。

14. 软件具有熵增的特性（体系总是自发地像混乱度增大的方向变化），长期维护的项目总会遇到可维护性逐渐降低的问题。

15. 代码风格统一工具

使用 editorconfig 协助兼容开发工具的代码格式化。
使用 eslint 检查代码。
使用 prettier 格式化代码。（可以理解为prettier是 eslint —fix 的加强版，用 prettier 来代替 eslint-fix）
手动修改剩下的有问题的地方，或者有些地方很难用规则来判断的时候，就需要手动修改。

16. 使用husky和prettier统一代码风格

npm install --save-dev prettier pretty-quick husky

package.json里配置

"husky": {
    "hooks": {
        "pre-commit": "pretty-quick --staged"
    }
},

需要注意的事，安装包之后，package-lock.json也需要提交commit，否则hooks不会执行（不知道为什么）!

17. 使用.editorconfig，一定要用indent_style = space，如果用tab，不管怎么设置编辑器，tab都为4

18. 提高团队代码质量的想法

code review 要更加仔细，保证每个人的代码质量，哪怕进度慢一点（同时，自己写代码的时间减少了，但是这样是值得的，如果只是自己写代码，只能保证自己的代码，但是code review能帮大家的代码都提高，团队共同提高的效益肯定比自己一个人要大）
在code review 发现的问题，在会议上提出来，让大家商量解决办法，同时避免以后出现相同的问题，这样大家的代码质量都能提高
目前的问题：

大家会写大量重复的代码，不管是js还是css，碰到两处以上会调用的代码，应该要封装起来
变量命名不按照规范，并且不注意语义化。代码不仅仅是写给计算机执行的，同时是写给人看的，最要命的是给别人看。好的代码，一看变量，就大概知道这个变量是干嘛的，或者方法是干什么的，而不好的变量命名只会让程序出现歧义
写代码不注意代码量，一写千里，一个单文件组件能写到2000行，方法的行数也要注意。这里建议：单文件组件行数不大于1000，超出应该要拆分出来；方法行数不能超出100行，超出拆分
多个if else 应该用switch，看起来更舒服，逻辑更清晰
拼接字符串尽量用模版字符串语法
不要使用 var 定义变量（用eslint控制）
data 方法里不要的变量定义尽量精简；如果是模板里没有使用，不需要在data里定义，可以直接挂在vue实例上，或者写一个局部变量代替
学会使用计算属性，ex:

data() {
    return {
        arr: [
            {status: true, foo: 1},
            {status: false, foo: 2}
        ]
    }
}
computed {
    // 用计算属性代替，而不是每次手动计算一次
    activeArr() {
        return this.arr.filter(i => i.status)
    }
}

Prefer early exit

// bad
function someFunction(someCondition) {
  if (someCondition) {
    // Do Something
  }
}

// good 逻辑更清晰，避免过度else if
function someFunction(someCondition) {
  if (!someCondition) {
      return;
  }
  // Do Something
}

19. 精读《为什么专家不再关心技术细节》

技术细节学习难度不大，在需要深入的时候再深入了解最佳。
想要做成事，需要更宏观的技术思维，所以专家渐渐变得眼光宽阔，格局很大。
专家拥有快速学习技术细节的能力，只是这已不是其核心竞争力，所以与其写技术细节的文章，比如写方法论的思考带来的价值更大。
指引方向比走路更重要，专家都要逐渐成为引路人。
技术最终为业务服务，懂技术细节和让业务先赢没有必然的关系，所以在深入技术细节之前，要先理解业务，把握方向，防止技术细节出现路线问题。

20. rgba转16进制函数

function hexify(color) {
  var values = color
    .replace(/rgba?\(/, '')
    .replace(/\)/, '')
    .replace(/[\s+]/g, '')
    .split(',');
  var a = parseFloat(values[3] || 1),
      r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
      g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
      b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
  return "#" +
    ("0" + r.toString(16)).slice(-2) +
    ("0" + g.toString(16)).slice(-2) +
    ("0" + b.toString(16)).slice(-2);
}

var myHex = hexify('rgba(255,232,186,0.4)'); // "#f5faf3"

21. material-design-icons-iconfont 包和 eslint 包有冲突，安装了eslint后 material-design-icons-iconfont 就被删除了，需要重新安装一次。

22. eslint 检查.vue文件

安装eslint-plugin-vue
在.eslintrc.js里加上plugin
在lint里加上 --ext .js,.vue

plugins: [
    'vue'
]
eslint ./src --fix --ext .js,.vue

23. vue-cli3 创建的项目，将static文件夹移除了，静态文件可以放到public文件夹，可以直接用localhost:8080/xxx.json访问

24. 用ts的时候也不是说所有的变量都要加类型限制，只需要在自定义的变量，多方调用的地方加，而第三方的类型，如果有类型声明可以加，不加影响也不大。

25. $emit 加自定义参数

$emit 加自定义参数

26 renderless component

renderless component
探索Vue高阶组件

27. eslint 检查以下代码报错解决方法

{ path: '/login', name: 'Login', component: () => import('@/views/login/Login'), hidden: false }

解决方法，在.eslintrc.js里添加以下代码，并安装该插件

parserOptions: {
    parser: "babel-eslint"
}

npm install babel-eslint --save-dev

28. iview里validate找不到该属性的ts报错解决办法

import {Form} from 'iview'
// iview 里有比较全的 ts 类型定义，可以用起来
type IForm = Form

(this.$refs.form as IForm).validate((valid: boolean | undefined): void => {
  if (valid) {
    this.$Message.success('Success!');
    const resp = login({username: '', password: ''})
  }
})

stackoverflow参考

29. pont-engine 配合 swagger

pont-engine

30. npm安装包的时候如果指定包的依赖版本使用~而不使用^?

链接

npm install xx -E

31. this.$refs.xxx.$el TS报错的问题

this.$refs.xxx as Vue).$el

32 TS 中这种代码要怎么写比较优雅？

 ((this.$refs['iconClose' + index] as Vue[])[0].$el as HTMLElement).style.visibility = 'visible';

33. vue-cli3 里运行npm run build --report 不能生成report.html文件

// 用以下命令替代
npx vue-cli-service build --report

// 在package.json里加上以下 然后运行 npm run report
"report": "vue-cli-service build --report"
npm run report

34. vue-cli3 项目里查看webpack原本的配置文件

// output.js 就是webpack的配置文件
// 它默认显示的是开发环境的配置
vue inspect > output.js

// 显示生产环境的配置
vue inspect --mode production > output.js

35. ts 引入 css 变量模块报错

// 引入css变量只能用require 用import会报找不到模块
const cssVar = require('@/styles/var.styl')

链接

36. node从.env文件加载环境变量

npm i dotenv --save
const dotenv = require('dotenv');
dotenv.config();

链接

37. iview 国际化导致 $modal 方法报错

用

Vue.use(IView, {
  i18n: (key: string, value: string) => i18n.t(key, value)
});

替代

Vue.locale = () => {};

38. vue和typescript开发时keep-alive无效解决方法

vue和typescript开发时keep-alive无效解决方法

39. github 上fork别人代码提交pr的操作步骤

github 上fork别人代码提交pr的操作步骤

git remote add upstream URL
// eg. git remote add upstream git@github.com:vuejs/vue-ssr-docs.git
// 然后在自己的master分支上提交代码 push 提交pr

// 同步源仓库的代码
git fetch upstream
git merge upstream/master

40. 浏览器里可以使用buffer，但是和node运行的结果不一样,浏览器得到的是Uint8Array

Uint8Array MDN

// 浏览器
import {Buffer} from 'buffer'
console.log(Buffer.from('111'))  // Uint8Array(3) [49, 49, 49]

// node
Buffer.from('111')  // <Buffer 31 31 31>

41. 使用vue-loader打包的项目，默认使用的是vue.runtime.js, 只包含运行时，因为编译阶段已经被解析成render函数了。

webpack的Vue项目中,import Vue from 'vue' 默认导入的是vue.runtime.common.js
webpack 可以修改配置来更换导入的文件

resolve: {
    alias: {
        // 修改Vue倍导入时包的路径
        "vue$" : "vue/dist/vue.js"
    }
}

42. github ping 不通的问题

github ping 不通的问题

// 修改host文件
sudo vim /private/etc/hosts

// 将下面内容粘贴进去
151.101.185.194 github.global.ssl.fastly.net
192.30.253.112 github.com
151.101.184.133 assets-cdn.github.com
151.101.184.133 avatars0.githubusercontent.com
151.101.112.133 avatars1.githubusercontent.com

43. 关于package.json 一些字段的含义

main 指定项目的入口文件程序在使用这些第三方包时就是去加载main字段所指定路径的文件(CommonJS规范)
module 也是项目的入口文件，是Es Module 规范。如果main 和 module 同时存在，会优先使用module字段（支持tree shaking）

package.json 的 module 字段

private 为true时，不可发布到npm
files 在npm publish的时候选择发布哪些文件可以填一个文件夹地址

npm publish过滤部分文件

44. js 里的 void 0

void其实是javascript中的一个函数，接受一个参数，返回值永远是undefined。可以说，使用void目的就是为了得到javascript中的undefined

为什么不直接使用undefined呢？主要有2个原因：

使用void 0比使用undefined能够减少3个字节。虽然这是个优势，个人但感觉意义不大，牺牲了可读性和简单性
undefined并不是javascript中的保留字，我们可以使用undefined作为变量名字，然后给它赋值,, 但在chrome 中打印出来的是 undefined

45. css var() 的使用方法

demo
和scss结合