又是一波前端知识点总结

总结的点都杂七杂八，希望能找到对你有所帮助的，没有的也不要紧嘛！😄

1. vue强制渲染某个组件

$forceupdate 使 Vue 实例从新渲染。注意它仅仅影响实例自己和插入插槽内容的子组件，而不是全部子组件。

因为某些场景 $forceupdate 不起做用，因此用下面的hack方法。通常来讲，这种强制渲染某个组件的状况很少，在组件内部应该处理好内部的渲染。
这个例子仍是由于使用某个库后发现了一个bug，后面才想到如下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. 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在特殊状况下会出现不一致的状况，这点比较蛋疼，须要对文档比较熟悉。

3. Gitlab不只仅能够做为代码仓库，还能够做为项目管理工具，经过标签，里程碑，提交历史，代码审核流程等。

之后在公司里，若是作项目管理或者code review均可以用gitlab来作。

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

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

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

6. 怎么评估工期

• 需求很是明确并且常常这样作：本身评估时间 * 1.5
• 需求不够清晰，有可能变，可是代码和技术方案熟悉：本身评估的时间 * 2
• 需求不够清晰，代码和技术方案也是新的，须要探索：本身评估的时间 * 2.5 or 3

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

7. 无缝滚动组件

无缝滚动组件

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

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

10. 代码风格统一工具

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

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

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

package.json里配置

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

须要注意的事，安装包以后，package-lock.json也须要提交commit，不然hooks不会执行（不知道为何）!

12. 使用.editorconfig，必定要用indent_style = space，若是用tab，无论怎么设置编辑器，tab都为4

13. 提升团队代码质量的想法

1. code review 要更加仔细，保证每一个人的代码质量，哪怕进度慢一点（同时，本身写代码的时间减小了，可是这样是值得的，若是只是本身写代码，只能保证本身的代码，可是code review能帮你们的代码都提升，团队共同提升的效益确定比本身一我的要大）
2. 在code review 发现的问题，在会议上提出来，让你们商量解决办法，同时避免之后出现相同的问题，这样你们的代码质量都能提升
3. 目前的问题：

• 你们会写大量重复的代码，不论是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
}

14. 精读《为何专家再也不关心技术细节》

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

15. 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"

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

17. eslint 检查.vue文件

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

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

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

19. 用ts的时候也不是说全部的变量都要加类型限制，只须要在自定义的变量，多方调用的地方加，而第三方的类型，若是有类型声明能够加，不加影响也不大。

20. $emit 加自定义参数

$emit 加自定义参数

21. renderless component

renderless component
探索Vue高阶组件

22. eslint 检查如下代码报错解决方法

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

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

parserOptions: {
    parser: "babel-eslint"
}

npm install babel-eslint --save-dev

23. 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参考

24. pont-engine 配合 swagger

pont-engine

25. npm安装包的时候若是指定包的依赖版本使用~而不使用^?

连接

npm install xx -E

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

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