##这是我参与「 第五届青训营 」伴学笔记创作活动的第 3 天##
一、说在前面
本堂课老师没有介绍JavaScript的基础语法知识，而是从另一个角度去剖析如何去写出优雅的Javascript代码，老师通过举例和一步步优化代码的过程向我们展示原则的一些应用。
二、重要知识点介绍
写好JS的一些原则
1.各司其责：HTML、CSS和JS职能分离，HTML负责内容，CSS负责样式，JS负责行为，代码写在同一个地方不代表违背了这个原则，该原则只是指明了他们都应该负责的范畴。
2.组件封装：好的UI组件应具备正确性、扩展性和复用性。
3.过程抽象：应用函数编程思想。
举例和代码优化
原则一之深夜食堂
效果图：
最终的代码版本：深夜食堂（代码来源：十年踪迹） - 码上掘金 (juejin.cn)
主要是满足用户在浏览时的一些需求：切换白天模式和夜间模式，但是夜间模式切换其实是样式，尽量用CSS实现，而不是JS。
总结：
1.HTML／CSS／JS各司其责
2.应当避免不必要的由JS直接操作样式
3.可以用class来表示状态
4.纯展示类交互寻求零JS方案
原则二之轮播图
效果图：
代码版本之一：轮播图（代码来源：十年踪迹） - 码上掘金 (juejin.cn)
最终代码版本：轮播图final（代码来源：十年踪迹） - 码上掘金 (juejin.cn)
结构：HTML 轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
表现：CSS 使用CSS绝对定位将图片重叠在同一个位置；轮播图切换的状态使用修饰符（modifier）；轮播图的切换动画使用CSS transition。
行为：JS API
getselecteditem 获取当前的图片元素
getselecteditemindex获取当前的图片元素在列表中的下标
slideto轮播到列表中的某一元素
slidenext轮播下一张图片
slideprevious轮播上一张图片
插件化:
总结：
1.组件设计的原则：封装性、正确性、扩展性、复用性
2.实现组件的步骤（组件封装的基本方法）：结构设计、展现效果、行为设计（API（功能） Event（控制流））
3.三次重构：插件化（例：手气不错）、模板化（重构、解耦）（使易于扩展）、抽象化（组件框架）（将组件的通用模型抽象出来）
原则三
1.用来处理局部细节控制的一些方法
2.函数式编程思想的基础应用
代码1：过程抽象例1（代码来源：十年踪迹） - 码上掘金 (juejin.cn)
常用高阶函数HOF：
以函数作为参数
以函数作为返回值
常用于作为函数装饰器
1.Once
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
2.Throttle
代码：code.juejin.cn/pen/7108192…
3.Debounce
代码：code.juejin.cn/pen/7108193…
小鸟：防抖功能，鼠标快速多次移动时，小鸟不跟随
4.Consumer/2
代码1：code.juejin.cn/pen/7108194…
代码2：code.juejin.cn/pen/7108194…
consumer 也可以延时调用（代码2）
5.Iterative
代码：code.juejin.cn/pen/7108194…
纯函数：无副作用，函数可预期的 输入被确定，即输出被确定
系统的非纯函数越多的话，系统的可维护性越差
高阶函数都是纯函数
编程范式：命令式与声明式
1.命令式的编程语言（面向对象/面向过程）（强调怎么做）
2.声明式的编程语言（强调做什么）（更加简洁）
3.例子：
Toggle（命令式）代码：code.juejin.cn/pen/7108195…
Toggle（声明式）代码：code.juejin.cn/pen/7108195…
Toggle（三态）代码：code.juejin.cn/pen/7108195…
Javascript同时拥有命令式和声明式的编码方式
总结
1.过程抽象/HOF/函数装饰器
2.命令式/声明式
交通灯的状态切换
版本一:code.juejin.cn/pen/7108196…
效果图：
版本二（数据抽象）:code.juejin.cn/pen/7108196…
版本三（过程抽象）:code.juejin.cn/pen/7108196…
版本四（异步+函数式）:code.juejin.cn/pen/7108196…
判断是否是4的幂
洗牌
错误写法的代码：code.juejin.cn/pen/7108202…
错误做法：分布不均匀的算法
正确的代码写法：code.juejin.cn/pen/7108203…
使用生成器：code.juejin.cn/pen/7108203…
分红包
切西瓜法：code.juejin.cn/pen/7108203…
抽牌法：code.juejin.cn/pen/7108204…
要考虑钱够不够分！？
切西瓜法：选取比较大的那块继续进行拆分
抽牌法：空间复杂度高
三、课后个人总结
老师通过许许多多的实例充分为我们展示了“各司其责、组件封装、过程抽象”三大原则，主要目的是为了提高我们的代码优化意识，让我们不只是会写代码。而是懂得如何去写好的代码，老师认为写代码最应该关注的是其使用场景，他认为同时不能忽略基础的算法问题，要学好数学，写出优雅的算法。由于之前没有学习JS的基础语法，所以对于老师这堂高阶的课程吸收得有点困难，但是对于老师讲的例子都充满了十分的好奇，相信我会找出充裕的时间去慢慢摸索、学习和掌握！大家一起加油吧！
四、学习资料补充
课件链接：跟着月影学 JavaScript（上）.pptx - 飞书云文档 (feishu.cn)
如何写好 JS1
如何写好 JS2
学习 javascript 基础语法
developer.mozilla.org/en-US/docs/…
五、参考引用
【前端专场 学习资料一】第五届字节跳动青训营 - 掘金 (juejin.cn)
六、一点疑问
如何用快捷键取消多行注释/进行多行注释？🐣
