这是我参与「第五届青训营 」伴学笔记创作活动的第3天，下面跟我一起看看青训营第三天讲了什么吧~
今天主要介绍的是Javascript的基础内容，对于我这样的小白有些地方还是比较难理解。
1.写好Javscript的基本原则
- 各司其职
- 组件封装
- 过程抽象
2.深夜食堂调整样式得到的启示
- 避免使用不必要的由JS直接操作样式
- 可以使用class表示状态
3.组件：WEB页面上包括HTML(模板）、功能（JS)和样式（CSS)的单元
好的组件应该具有封装性、正确性、扩展性、复用性
4.一个轮播图的组成
- 结构：用无序列表(ul)来实现（HTML)
- 表现：用绝对定位将图片重叠到同一个位置；切换使用修饰符（CSS)
- 行为：API设计要保持原子操作（JS)
5.组件封装（实现组建的步骤）
- 结构设计
- 展示效果
- 行为设计：包括API(功能）和EVENT(控制流）两部分
6.三次重构
- 插件化：解耦：把控制元素抽取成插件；插件和组件通过依赖注入建立关系
- 模板化：HTML模板化，更容易拓展
- 抽象化：将通用的组件模型抽象出来
7.过程抽象：用来处理局部细节控制的一些方法
- 一个形象的比喻：我们把函数看成一个输入和输出的盒子，我们可以去做函数过程本身的抽象来解决通用性问题。我们可以把过程抽象想象成一个房间，房间的门、窗和房间本身都是数据，但是我们开门、开窗这个动作是一个过程，过程抽象也就是将开门、开窗的动作抽象。
- 比如我们要处理这样的一个问题：不管单击多少次，都只执行以此，这个时候我们就可以用到once函数
function once(fn) {
return function(...args) {
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
}
}
}
buttons.forEach((button)=>{
button.addEventListener('click', once((evt) => {
const target = evt.target;
target.parentNode.className = 'completed';
setTimeout(()=>{
list.removeChild(target.parentNode);
},2000);
}))
});
由此我们可以引入高阶函数的概念： 高阶函数以函数作为参数和返回值，once函数就是一个典型的高阶函数。常见的高阶函数包括once函数，Throttle函数(节流函数），Debounce函数(防抖函数）等。
8.为什么我们要使用高阶函数而不是普通函数呢？
-
纯函数：无状态，结果唯一确定，比如高阶函数
-
非纯函数：有状态，调用次序/时间不同，得到的结果就不同 纯函数本身结果可控，且更易于测试。因此我们应在实践中，利用高阶函数（纯函数）减少非纯函数的使用，从而增加系统的稳定性和可靠性。
