如何写好JS(1) | 青训营笔记

玉玉1
67 阅读3分钟

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

今天和月影大佬学习了JavaScript，虽然只有短短的三小时，但是干货满满，我也还在吸收内容中，遂以笔记的形式记录一下自己理解的内容。

写好JS的一些原则

各司其职

让HTML、CSS和JavaScript职能分离

组件封装

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

过程抽象

应用式函数编程思想

如果让你完成点击按钮完成样式切换可以怎么做？

这个问题不难，很多小伙伴看到就能想到怎么解决，让我们看看最简单的思路是什么样子的

    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 = "🌞";
                }
            });

这么做就能够完成一个最简单的样式转换了，但是这么做不好的地方在于不能够符合我们上述所说的各司其职功能，也就是说JS中实际上是是在操作CSS样式，并且如果我们有不止两种样式，那么代码就会变得复杂且难以阅读，所以我们可以将CSS部分专门写在css文件中，然后JS文件仅进行className的变化就能更加直观有效的完成功能，如:

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

总结

image.png

  • HTML/CSS/JS各司其职
  • 应该避免不必要的由JS直接操作样式
  • 纯展示类交互寻求零JS方案

组件封装

组件是指web网页上抽取出一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元，好的组件具备分装性、正确性、拓展性、复用性, 接下来我们以实现原生轮播图作为例子

结构(HTML)

轮播图是一个典型的列表结构，我们可以使用无序图ul元素来实现

表现(CSS)

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

行为(JS)

给图片轮播添加各种事件响应和行为(API)

以上做法是正确的，但是让我们想想是否能够继续优化，这里我们想到的是使用重构:插件化；通过解耦能够将控制元素抽取成插件，然后组件之间通过依赖注入的方法建立练习，下图所示的就是抽象化的过程。

image.png

总结

  • 组件设计的原则: 封装性、正确性、拓展性、复用性
  • 实现组件的步骤: 结构设计、展现效果、行为设计
  • 三次重构
    1. 插件化
    2. 模板化
    3. 抽象化

过程抽象

过程抽象: 用来处理局部细节控制的一些方法、函数式编程思想的基础应用

 应用场景: 操作次数限制，例如一些异步交互、一次性的HTTP请求

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

高阶函数 HOF

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

常用的高阶函数有

  • once
  • Throttle
  • Debounce
  • Consumer 2
  • iterative

编程规范

命令式与声明式，命令式和声明式的出发点如下图

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

声明式的好处在于声明式能够更好的进行复用

avatar
文章
阅读
粉丝