总结跟月影学JS|青训营笔记

Aaron450
148 阅读2分钟

总结跟月影学JS|青训营笔记

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

1.写好JS的一些原则

各司其职

让HTML、CSS和JavaScript职能分离。 例如写一段JS，控制一个网页，让它支持浅色和深色的两种模式。在编写代码的过程中，应尽量避免用JS修改网页的背景色和文字的颜色，可以用class来表示状态，且纯展示类交互寻求零JS方案,直接通过CSS代码来控制CSS样式。

组件封装

好的UI组件具备正确性、扩展性、复用性。 例如，用原生JS写一个电商的轮播图。

基本方法：

  1. 结构设计
  2. 展现效果
  3. 行为设计：API（功能）、Event（控制流）

例如月影老师展示的： code.juejin.cn/pen/7108187… 但是问题也很明显，不够灵活，当改动某项功能时需要改动的地方较多，需要通过重构来优化代码

三次重构：

1. 插件化

解耦：

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

2. 模块化

解耦：

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

3. 抽象化（组件框架）

抽象：

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

过程抽象

  • 用来处理局部细节控制的一些方法
  • 函数式编程思想的基础应用 · image.png 例如 操作次数限制：
  1. 一些异步交互
  2. 一次性的HTTP请求
  const list = document.querySelector('ul');
  const buttons = list.querySelectorAll('button');
  buttons.forEach((button) => {
    button.addEventListener('click', (evt) => {
      const target = evt.target;
      target.parentNode.className = 'completed';
      setTimeout(() => {
        list.removeChild(target.parentNode);
      }, 2000);
    });
  });

高阶函数（HOF）

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

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

image.png

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

常用高阶函数

  • Once
  • Throttle
  • Debounce
  • Consumer
  • Iterative

image.png

  function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }

2.编程范式

命令式与声明式

image.png

 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)

例如

  • Toggle - 命令式
  • Toggle - 声明式
  • Toggle - 三态

image.png

个人总结

本次课程内容是丰富，月影大佬果然是名不虚传的，讲课的难度对于我来说难度比较大，直接将代码的形式让我有一些迷迷糊糊的，课上很多部分跟不上节奏，这也让我发现了自己的不足，还是要去找找其它的资料去继续学习，以好好消化月影老师的干货。

avatar
文章
阅读
粉丝