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

世界上只有一种英雄主义，那就是当你认清生活的本质之后，依然热爱生活。

一、本堂课重点内容：

• 本堂课的知识要点有哪些？ 主要讲解了js的三大编程原则，还有举例子令代码的质量提高与简洁

二、详细知识点介绍：

• 本堂课介绍了哪些知识点？

一、js编码原则-各司其职

（一）例子

切换浏览器的浅色和深色模式

1.版本1

2.版本2

3.版本2更好，相比版本1js做了css的事情，版本2取消了css的工作

4.版本3

纯css，无js，利用label和input显示一样效果，display：none的input

5.html、css和js要各司其职，html负责结构、css决定样式、js决定行为，不必越俎代庖

二、js编码原则-组件封装

（一）例子

1.轮播图html

2.css

3.js

4.圆点与箭头

利用a标签做箭头、span做圆点

5.组件封装总结与思考

6.重构组件

将插件与组件用关系注入，不需要该插件时就不必同时在多个地方删改该插件的相关代码，只需在js中注释掉该插件的功能 7.抽象组件

8.总结

组件的封装性与html、css和js的各司其职并不冲突。组件封装是将三者合并在同一个文件中，但是各司其职表示的是它们的内容不会涉及到其他的内容。

 

三、js编码原则-过程抽象

（一）过程抽象

函数有输入和输出

（二）高阶函数

一般将函数进行传参后会以函数作为返回值

（三）编程范式

Js拥有两种特点，命令式与声明式，声明式相对方便简介。

四、代码质量优化

（一）交通灯状态转换例子

1.applyState是一个递归的方式，利用了数据封装的方法

2.或者利用异步操作实现，利于扩展和富有灵活性

3.最自然的方法，利用异步操作的方式 （二）判断是否是4的幂

1.可以对该数进行取模，判断结果 （三）洗牌的算法

1.错误的算法

会使得牌的出现概率不均匀

2.正确的算法

可以利用数学归纳法证明

努力去做好每一件事情，然后去接受它们的事与愿违，或者成功了就好好庆祝一番。