这是我参与[第五届青训营]笔记创作活动的第三天

本课堂重点内容：

JavaScript 好代码的标准
HTML/CSS/JS 各司其职
组件的定义解析及特征
组件封装的基本方法
利用原生 JS 实现电商网站轮播图
过程抽象概念
高阶函数使用模式
JavaScript 编程范式
代码写作关注事项
代码规范

详细知识点介绍：

如何写好 JS：

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

组件封装

组件是指Web页面上抽出来一个个包模板(HTML)、样式(CSS)和功能(JS)的单元。组件应当具有封装性、正确性、扩展性、复用性。

结构设计：HTML

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

展现效果：CSS

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

行为 JS:

行为设计 API： API 设计应保证原子操作，职责单一，满足灵活性。

// Slider
+getSelectedlitem()
+getSelectedlitemindex()
+slideTo()
+slideNext()
+slidePrevious()

行为设计控制流： 使用自定义事件来解耦。

过程抽象：

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

操作次数限制：

一些异步交互，一次性的HTTP请求

Once

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

高阶函数

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

实践练习例子：

交通灯：状态切换

创建一个 setState 函数，函数有形参state，用以给 traffic的className赋值，值为传递给形参的值。然后在函数 start 中，通过 while 循环重复调用循环中的代码，按照定时给函数 setState 传递不同的className，从而达到交通灯的循环变化

const traffic = document.getElementById('traffic');

function wait(time){
  return new Promise(resolve => setTimeout(resolve, time));
}

function setState(state){
  traffic.className = state;
}

async function start(){
  //noprotect
  while(1){
    setState('wait');
    await wait(1000);
    setState('stop');
    await wait(3000);
    setState('pass');
    await wait(3000);
  }
}

start();

个人课后总结：

JavaScript具有非常多的特性，需要结合文档进行深入了解
在保证代码运行正常的情况下寻求更优解

跟着月影学 JavaScript | 青训营笔记