[青训营]-javaScript

用户7353605197616
111 阅读3分钟

这是我参加青训营活动的第四天

image.png 这节课月影老师告诉我们写好JavaScript（包括其他语言）的三大原则 ① 各司其责 ② 组件封装 ③ 过程抽象

1、各司其责

首先来看一个常见的网页特效

这个效果我们有很多方法能够实现，看看几种常见的方法：

  • 方法一

const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(e.target.innerHTML === '🌞') {
      body.style.backgroundColor = 'black';
      body.style.color = 'white';
      e.target.innerHTML = '🌜';
    } else {
      body.style.backgroundColor = 'white';
      body.style.color = 'black';
      e.target.innerHTML = '🌞';
    }
  });

我们来看看上面这段JavaScript代码的逻辑

  1. 获取切换按钮元素
  2. 给按钮绑定鼠标点击事件
  3. 获取页面body元素
  4. 判断当前按钮元素是🌞还是🌜
  5. 是🌞就将页面的背景色改成黑色，字体颜色改成白色，并将按钮元素变成🌜
  6. 否则说明按钮就是🌜，我们就将页面背景色改为白色，字体改为黑色，并将按钮元素变成🌞

既修改了元素的样式，也修改了元素的结构,这不符合我们各司其责的原则。

  • 方法二

const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(body.className !== 'night') {
      body.className = 'night';
    } else {
      body.className = '';
    }
  });

body,
html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  padding: 10px;
  box-sizing: border-box;
  transition: all 1s;
}

#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  background: inherit;
}

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}

body.night #modeBtn::after {
  content: '🌜';
}
  1. 通过给button加after伪元素，提供🌞与🌜的内容，这样就不用JS来修改页面的结构了
  2. 通过设定night类名，让页面背景变黑字体颜色变白，实现黑色模式，并且加入过渡效果
  3. 这样元素就可以通过设置不同的类名展示不同的样式了

通过给button加after伪元素，提供🌞与🌜的内容，这样就不用JS来修改页面的结构了通过设定night类名，让页面背景变黑字体颜色变白，实现黑色模式，并且加入过渡效果这样元素就可以通过设置不同的类名展示不同的样式了

  • 结论

image.png

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

2、组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。

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

  • 基本方法

    • 结构设计

    • 展现效果

    • 行为设计

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

  • 重构：插件化

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

  • 重构：模板化

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

  • 组件框架

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

  • 总结

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

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

    • 三次重构

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

3、过程抽象

用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。

  • 高阶函数

以函数作为参数或者以函数作为返回值的函数称为高阶函数

image.png

  • 编程范式

image.png 命令式：关注怎么做

声明式：关注做什么

处理复杂逻辑时，推荐使用声明式，抽象程度更高，拓展性更强

  • 总结

image.png

  • 过程抽象 / HOF / 装饰器
    • 不仅可以对数据进行抽象，也可以对过程进行抽象
    • 对函数的操作可以用高阶函数抽象，利于复用且不修改原有函数代码(非侵入式)
    • 代码库中要多用纯函数
    • 命令式 / 声明式
  • 命令式 / 声明式
    • JavaScript既可以编写命令式的代码，也可以编写声明式的代码。
    • 多写声明式代码，抽象程度更高，拓展性更强
avatar
文章
阅读
粉丝