这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

0 前面的话

这是参加青训营的第三天，今天主要学的JS，因为之前学的都不太牢固，这次听月影老师讲的也是懵懵懂懂的，但由于近期事情较多，有三四个论文算法要复现，老师还push搞科研，还有课程大作业要做，另外开源也快要开始了，所以就没时间系统地复习JS了，只能在做大项目的时候带着学一下。今天后面听月影老师的话略有感触，前端工程师也要学算法的。其实我现在也不知道以后到底想走前端还是后端，所以只能前端后端的项目都多做一点感受一下，觉得哪个更适合自己就走哪条路。

1 JavaScript 编码原则之各司其责

写好JS的一些原则

各司其职
让HTML、CSS、JS职能分离
组件封装
好的ui组件具备正确性、复用性和可拓展性
职能抽象
应用函数式编程思想

JavaScript 编码原则之组件封装

这里参考了一篇文章，原文链接：blog.csdn.net/qq_52151772…

什么时候需要封装

如果一块内容在项目中出现了两次就要考虑是否应进行封装一个组件、一个函数、一个css 只要是需要多次使用的都可以考虑封装

封装原则

封装的组件必须具有高性能，低耦合的特性，封装的组件为子组件，引用封装组件的地方叫父组件

为了实现高新能、低耦合应该从这几个方面下手:

1.数据从父组件传入（子组件本身尽量不要生产数据，如果需要生成数据，只能在组件内部进行使用，不要传递出去。）
props: {
	num:{
		type: Number,
	}
}
对于通过props传入的参数，不建议对其进行操作，因为会同时修改父组件里面的数据（如果修改的话，控制台中也会报错的），如果需要修改数据，可以传递给父组件，让父组件去修改（在父组件中处理事件）。
如果一定要在子组件中使用，在父组件传入时进行一次深拷贝。
--------------------------------------------------
2.在父组件中处理事件（父组件中处理的事件是和后端交互的事件，比如发起的axios的请求，但并不是所有的事件都放到父组件中处理，比如组件内部的一些交互行为，或者处理的数据只在组件内部传递，就可以在子组件中处理。）

// 子组件中
<div @click="changeApproval"></div>
changeApproval(id) {
  this.$emit("pushId", id);
}

// 父组件中
<common-dialog @pushId="getId"></common-dialog>

getId(id) {
  this.approvalForm.approval = id;
}
--------------------------------------------------
3.记得留一个slot（详细上方连接）
一个通用的组件，往往不能完美的适应所有的应用场景，所以在封装组件的时候，只需要完成组件的80%的功能，剩下的20%让父组件通过slot解决。
--------------------------------------------------
4.不要依赖vuex
如果要抽离组件尽量不要使用vuex来实现参数的传递，因为vuex是用来管理组件状态的，虽然可以用来传参，但是不推荐，可以选择放到localstorage中，或者通过props传递等方式。
--------------------------------------------------
5.合理使用scoped
样式中添加scoped可以让样式只对当前组件生效，但是一味使用scoped，会产生重复代码，所以需要有一个全局的样式，组件内只写针对于组件的样式，避免重复的样式代码。
--------------------------------------------------
6.组件具有单一职责
封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可。