javascript 编码规范-第五届字节跳动青少年训练营后端进阶学习笔记（二）JavaScript编码标准

bendan520 javascript

2023-09-02 0 6,408 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

文章目录

1. 序言

本课程主要讲解JavaScript编码原理和代码优化相关问题。

重要内容：

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

责任

首先，好的后端代码应该是这样的：HTML、CSS、JS代码三部分各司其责，即各自控制自己负责的部分。主要注意事项如下：

例如，在下面的反例中：

我们来实现一个黑模式切换功能，通常有以下几种方式实现

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

不过上面的代码还有很大的优化空间。首先，我们可以通过类来优化这个过程，减少 DOM 操作的次数。

据悉，我们可以使用纯CSS来实现这一功能。利用label标签和:checked伪类的特点，我们实现了不依赖JS代码切换界面深色和浅色主题的功能。

组件封装

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

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

alt="图片.png"/>

-JS代码：

首先，建立轮播组件的基本结构，展示其功效和行为。

下一步javascript 编码规范，我们开始构建轮播控件。对于轮播控件，我们通过自定义storm来控制origin控件的状态切换，从而与轮播组件进行前馈。

在这里javascript 编码规范，我们在 Silder 的构造函数中定义控制技术。并添加新的启动和停止方法来实现特定的控制行为。

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