如何写 好 JavaScript | 青训营笔记

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

1、什么是JS

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

2、写好JS的一些原则

• 各司其责

  让HTML、CSS和JavaScript职能分离。

• 组件封装

  好的UI组件具备正确性、扩展性、复用性。

• 过程抽象

  应用函数式编程思想。

举例：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式

• HTML/CSS/JS 各司其责
• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案

3、组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

举例：用原生 JS 写一个电商网站的轮播图，应该怎么实现？

基本方法：

• 结构设计

  轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。

• 展现效果

  • 使用 CSS 绝对定位将图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符（modifier）
  • 轮播图的切换动画使用 CSS transition

• 行为设计

  1. API （功能）
  2. Event （控制流）使用自定义事件来解耦。

思考：改进空间？

• 插件化

  解耦

  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系

• 模板化

  解耦

  • 将HTML模板化，更易于扩展

总结：

• 组件设计的原则：封装性、正确性、扩展性、复用性

• 实现组件的步骤：结构设计、展现效果、行为设计

• 三次重构

  1. 插件化
  2. 模板化
  3. 抽象化（组件框架）

4、过程抽象

什么是过程抽象

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

什么是高阶函数

高阶函数就是函数中可以传入另一个函数作为参数的函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

常用的高阶函数

• Once：对某个操作的执行次数进行限制
• Throttle：节流函数，限制函数触发的频率，每个delay时间间隔，最多只能执行函数一次
• Debounce：减少函数触发的频率，在一定延迟后才执行。从触发开始到延迟结束，只执行函数一次
• Consumer：接受一个输入参数并且无返回的操作，如果某一类操作不需要返回接口，可以对该类操作抽取逻辑。
• Iterative：支持多个参数迭代求解

5、编程范式

命令式

 let list = [1, 2, 3, 4];
   let mapl = [];
   for(let i = 0; i < list.length; i++) {
     mapl.push(list[i] * 2);
   }

声明式

 let list = [1, 2, 3, 4];
   const double = x => x * 2;
   list.map(double);

总结：

• 过程抽象 / HOF / 装饰器
• 命令式 / 声明式

6、总结

本次学习中，我对js的学习和认识有了进一步的提升，在老师的逐步操作以及详细的代码讲解里，我对如何写好js代码有了更清楚的认知，而且老师一步步引导思考下一步的改进空间，这对我来说是比较有效的接收学习知识的方法，我把一些基本的点记录下来，写进笔记，然后做日常回顾。