第五届字节跳动青训营前端进阶学习笔记（二）JavaScript编码规范

news2024/11/26 11:53:30

文章目录

- - 1.前言
  - 2.写好JS的一些基本原则

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

1.前言

本次课程主要讲解了有关JavaScript编码原则和代码优化的相关问题。

重点内容：

HTML、CSS、JS各司其责
具备正确性、扩展性、复用性的组件封装
函数式编程思想
代码优化

2.写好JS的一些基本原则

各司其责
组件封装
过程抽象

各司其责

首先，良好的前端代码应该是HTML、CSS和JS三部分代码各司其责的，也就是各自控制各自所负责的部分。主要需要注意以下几点：

避免不必要的由JS直接操作CSS
使用class来切换样式而不是修改style
能单独使用CSS实现的样式，尽量使用CSS，追求纯展示性内容0JS

比如在下面的一个例子中：

我们来实现一个深色模式切换的功能，通常会按照下面这种形式实现

这样当我们点击切换按钮的时候，页面就会切换到深色模式显示。

但是上述代码还存在很强的优化空间，首先，我们可以通过class来优化这一过程，减少DOM的操作次数。

此外，我们还能使用纯CSS的方法来实现这一功能。借助label标签和:checked伪类的特性，我们在不借助JS代码的情况下，实现了切换界面深浅主题的功能。

组件封装

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

下面我们来封装一个轮播图组件

HTML结构：

CSS样式：

alt="image.png" />

- JS代码：

首先，构建轮播图组件的基本结构、展现效果和行为。

下一步，我们开始构建轮播图的控件，轮播图控件我们通过自定义事件的方式来控制原点控制的状态切换，以此来与轮播图组件解耦。

这里，我们在Silder的构造函数里，定义控件的方法。并且新增了start和stop方法，用来实现具体的控件行为。

class Slider {
      constructor(id, delay=3000) {
        this.container = document.querySelector(`#${id}`);
        this.sliders = document.querySelectorAll('.slider__item, .slider__item--selected');
        this.delay = delay;

        const controlContainer = document.querySelector('.slider__control');
        if(controlContainer) {
          const controls = document.querySelectorAll('.slider__control-item, .slider__control-item--selected');
          controlContainer.addEventListener('mouseover', evt=> {
            const idx = Array.from(controls).indexOf(evt.target);
            if(idx >= 0) {
              this.toslider(idx);
              this.stop();
            }
          });

          controlContainer.addEventListener('mouseout', evt=> {
            this.start();
          })

          this.container.addEventListener('silde', evt => {
            const idx = evt.detail.index;
            const selected = document.querySelector('.slider__control-item--selected');
            if(selected) {
              selected.className = 'slider__control-item';
            } 
            controls[idx].className && (controls[idx].className = 'slider__control-item--selected');
          })
        }

        const pre = document.querySelector('.slider__control--previouse');
        if(pre) {
          pre.addEventListener('click', evt => {
            this.stop();
            this.preslider();
            this.start();
            evt.preventDefault();
          })
        }
        
        const next = document.querySelector('.slider__control--next');
        if(next) {
          next.addEventListener('click', evt => {
            this.stop();
            this.nexslider();
            this.start();
            evt.preventDefault();
          })
        }
        
      }
      getCurrent() {
        const current = document.querySelector('.slider__item--selected');
        return current;
      }
      getCurrentIndex() {
        return Array.from(this.sliders).indexOf(this.getCurrent());
      }
      toslider(idx) {
        const current = this.getCurrent();
        if(current) {
          current.className = 'slider__item';
        }
        this.sliders[idx] && (this.sliders[idx].className = 'slider__item--selected');

        const detail = {
          index: idx
        };
        const event = new CustomEvent('silde', {bubbles: true, detail});
        this.container.dispatchEvent(event);
      }
      preslider() {
        const idx = this.getCurrentIndex();
        this.toslider((this.sliders.length + idx - 1) % this.sliders.length);
      }
      nexslider() {
        const idx = this.getCurrentIndex();
        this.toslider((idx + 1) % this.sliders.length);
      }
      start() {
        this.stop();
        this.timer = setInterval(()=>this.nexslider(), this.delay);
      }
      stop() {
        clearInterval(this.timer);
      }
    }