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

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

如何写好 JavaScript

1. 写好JS的一些原则

• 各司其责

  让HTML、CSS和JavaScript职能分离。

• 组件封装

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

• 过程抽象

  应用函数式编程思想。

• HTML/CSS/JS 各司其责

• 应当避免不必要的由 JS 直接操作样式

• 可以用 class 来表示状态

• 纯展示类交互寻求零 JS 方案

2. 组件封装

• 结构设计

• 展现效果

• 行为设计

  1. API （功能）

  2. Event （控制流）

3. 重构

a. 插件化

解耦

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

b. 模板化

解耦

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

c. 组件框架

抽象

• 将组件通用模型抽象出来

4. 总结

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

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

• 三次重构

  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);
    }

常用高阶函数

HOF

• Once Once
• Throttle Throttle
• Debounce Debounce
• Consumer Consumer
• Consumer2 2
• Iterative Iterative

编程范式

命令式与声明式

1. 命令式

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

2. 声明式

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

总结

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

课后总结

本节课含金量依旧很高，虽然是基础班，但是内容完全不是啊（鄙人太菜了~），总的来说吧，月影老师讲的都是实际工作中很有价值的经验和思考，对于如何写好 JavaScript 有了很深的理解。我们应该考虑到API的封装性、可扩展性，还要考虑到功能上的隐藏bug等等。最后期待一波下节课~