这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
JS的课程时长比较长，因此我准备使用两天时间学习
JS入门好书推荐
首先推荐一些JS参考书籍
- 犀牛书
- 红宝书
- 蝴蝶书(比较薄，更适合快速入门)
写好JS的一些原则
各司其职
让HTML、CSS、JS各司其职
结构、表现、行为分离，结构代码写入HTML文件中，表现代码写入CSS文件中、行为代码写入JS文件中。
实例：如何让JS控制网页实现深色、浅色两种浏览模式？
采用事件监听器+判断实现浏览器模式切换
优化：样式代码抽象成类，将深色样式代码放在CSS文件内
进一步优化：直接使用CSS的高级功能(伪类选择器)切换主题
结论
- 应当避免不必要的由JS直接操作样式
- 可以用class表示状态
- 纯展示类交互寻求零JS方案
组件封装
好的UI组件具备正确性、扩展性、复用性
组件实例：采用JS实现轮播图
轮播图是一个典型的列表结构，可以使用无序列表实现
表现
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符(modifier)
- 轮播图的切换动画使用CSS transition
行为
使用JS API实现切换行为，由于此处主要用轮播图举例，因此下文中面向组件开展内容讲解
组件实现三部曲
结构设计、展现效果、行为设计
组件优化重构基础三部曲
行为优化：JS插件化
采用自定义事件解耦
这里展示了一个传参相关的柯里化内容，通过柯里化传参优化组件，讲授人称其为“插件化”
结构优化：HTML模板化
在JS中写一个render()方法在HTML文件中插入标签及内容
此外，CSS一样可以采用相同方式模板化
进一步优化：组件通用模型抽象
将组件通用模型抽象出来，这里主要涉及class继承
这种设计方法的缺点是没有涉及组件嵌套问题(父子组件)等问题
过程抽象
应用函数式编程思想
什么是过程抽象？
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数用法与Once()实例
高阶函数是指
- 以函数作为参数
- 以函数作为返回值
- 常用于函数装饰器
采用高阶函数与闭包结合的写法将函数作为参数传入，保证函数只被调用一次，once()过程
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程被称为过程抽象
也就是说抽象出的
once()方法可以在其他事件中使用，达到“控制事件只执行一次”的需求
存在常用高阶函数(大作业中需要用到)
- Once() -> 本次课程讲授的实例涉及
- Throttle -> 实现简单的节流函数、防抖函数(也就是俗称的“防抖节流”)
- Debounce
- Consumer / 2
- Iterative
也就是说常用高阶函数是个有限集合，初学者只需要知道上述这些就可以在日常工程中愉快使用高阶函数啦
So 为什么使用高阶函数？高阶函数和纯函数相比有什么区别？
- 纯函数更容易测试函数的正确性，非纯函数越多系统的可维护性越差
- 高阶函数一般也是纯函数
总结
基础知识点
命令式&声明式编程范式、参数柯里化、this指向、JS的class写法、高阶函数、闭包、纯函数&非纯函数
JS入门感想
这门课需要JS入门后对JS语法基础知识有一定认识，授课人采用一个轮播图实例讲解了JS的组件实现思想，适合我这样的入门级小白学习。此外，今天的课里也能窥探到一些掘金项目组前端的开发规范，令我受益匪浅。
