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

课堂内容

一、如何写好JavaScript

1.各司其职（让HTML、CSS和JavaScript职能分离）

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

2.组件封装（好的UI组件具备正确性、扩展性、复用性）

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：
  • 结构设计
  • 展现效果
  • 行为设计
• 三次重构
  • 插件化
    • 将控制元素抽取成插件
    • 插件与组件之间通过依赖注入方式建立联系
  • 模板化
    • 将HTML模板化，更易于扩展
  • 抽象化（组件框架）
    • 将组件通用模型抽象出来

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

• 声明式

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

四、写代码应该关注？

• 风格
• 效率
• 约定
• 使用场景
• 设计
• ......

以上就是我总结的第三节课的内容了，内容有疏漏还请见谅，有错误还请指正。这节课很大一部分是在跟着老师敲代码，理论的内容并不多，大家学习理论的同时也要动手实践，只有这样我们才能将知识掌握得更好，希望我们一起进步，顺利结营！