如何学好JavaScript（1）|青训营笔记

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

结论一：

• HTML/CSS/JavaScript各司其职
• 应该避免不必要的由JavaScript直接操作的样式
• 有状态变化可以调用伪类选择器
• 纯展示类交互寻求0JS方案

组件封装

• 组件是指web页面上抽出来一个个包含模板（HTML），功能（JS），和样式（CSS）的单元，好的组件有封装性，正确性，扩展性，复用性

举例：电商轮播图

结构：HTML

• 轮播图是典型的列表结构，可以用ul无序列表实现

表现：CSS

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

行为：JavaScript

• 总结：

  • 结构设计

  • 展现效果

  • 行为设计

  1. API （功能）
  2. Event （控制流）

• 重构代码

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

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

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

• 三次重构

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

高阶函数介绍

Once函数

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

function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }
复制代码

HOF函数

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

function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }
复制代码

编程范式

命令式编程

• 告诉编辑器如何去做

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

声明式编程

• 告诉编辑器做什么。如何做的部分被封装到高阶函数（如map等）

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

\