这是我参与「第五届青训营 」伴学笔记创作活动的第三天
课程重点
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
详细知识点介绍
什么才是好的JavaScript代码?
- 各司其职
- 组件封装
- 过程抽象
写一段JS,控制一个网页，让它支持浅色和深色两种浏览模式。如果是你来实现， 你会怎么做?
例：深夜食堂
结论
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含模板(HTML) 、功能(JS) 和样式(CSS) 的单元。好的组件具备封装性、正确性、扩展性、复用性。
例：用原生JS写一个电商网站的轮播图，应该怎么实现
总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API (功能)
- Event (控制流)
改进空间
总结
- 组件设计的原则:封装性、正确性、扩展性、复用性
- 实现组件的步骤:结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化(组件框架)
抽象过程
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例：操作次数限制
- 一些异步交互
- 一次性的HTTP请求
Once
为了能够让只执行一-次"的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
编程范式
命令式与声明式
总结
- 抽象过程/HOF/装饰器
- 命令式/声明式
课后个人总结
了解了高阶函数的定义。这使得我们可以更灵活地操作函数，更方便地复用代码。声明式编程则强调将程序的描述与具体实现分离，使得代码更加可读和维护性更强。结合使用高阶函数和声明式编程可以使得代码更具可读性和可维护性，提高编程效率。
