【字节青训营记录】如何写好JS（上）

写好JS的一些原则

各司其责

例：写一段JS，控制网页切换深色模式

组件封装

例：封装一个轮播图

初步想法

1. 结构设计：HTML

htmlCopy
<div>
  <ul>
    <li class="slider-list__item--selected"></li>
    <li class="slider-list__item"></li>
    <li class="slider-list__item"></li>
  </ul>
</div>

2. 表现：CSS

3. JS

• getSelectedItem()
• getSelectedItemIndex()
• slideTo()
• slideNext()
• slidePrevious()
• start()
• end()

处理状态耦合

插件化

JavaScriptCopy
class Slider{
  constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item--selected','.slider-list__item--selected')
    this.cycle = cycle;
  }
  // 不让slider知道插件的存在，于是通过依赖注入的方式注册插件。遍历运行插件构造的方法
  // 这样插件就从实例中独立出来
  registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected')
    return selected;
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem);
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className="slider-list__item--selected"
    }
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (this.items.length+currentIdx+1)%this.items.length;
    this.slideTo(nextIdx)
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length+currentIdx-1)%this.items.length;
    this.slideTo(previousIdx)
  }
  addEventListener(type,handler){
    this.container.addEventListener(type,handler)
  }
  start(){
    // 先清除旧定时器
    this.stop();
    this._timer = setInterval(() => {
      this.slideNext()
    }, this.cycle);
  }
  stop(){
    clearInterval(this._timer)
  }
}

// 实现插件
// 实现一排controller
function pluginController(slider){
  const controller = slider.container.querySelector('.slider-list__item')
  if(controller){
    const buttons = controller.querySelectorAll('.slide-list__controller,.slide-list__controller--selected');
    controller.addEventListener('mouseover',evt=>{
      const idx = Array.from(buttons).indexOf(evt.target);
      if(idx>=0){
        slider.slideTo(idx);
        // 停止自动轮播
        slider.stop();
      }
    })
    controller.addEventListener('mouseout',evt=>{
      slider.start()
    })
    slider.addEventListener('slide',evt=>{
      const idx = evt.detail.index;
      const selected = controller.querySelector('.slide-list__controller');
      if(selected){
        selected.className="slide-list__controller"
      }
      buttons[idx].className="slide-list__controller--selected"
    })
  }
}
// 实例化slider
const slider = new Slider('my-slider')
// 注册插件
slider.registerPlugins(pluginController)
// 启动slider
slider.start()

HTML模板化

JavaScriptCopy
class Slider{
  constructor(id,opts={images:[],cycle:3000}){
    // 初始化
  }
  render(){
    const images = this.options.images;
    const content = images.map((image)=>`
      <li class="slider-list__item">
        <img src=${image}
      </li>
    `.trim();
    return `<ul>${content.join('')}</ul>`
    )
  }
}

过程抽象

JavaScriptCopy
class Component{
  constructor(id,opts={name,data:[]}){
    this.container = document.getElementById(id);
    this.options = opts;
    this.container.innerHTML = this.render(opts.data);
  }
  registerPlugins(...plugins){
    plugins.forEach((plugin)=>{
      const pluginContainer = document.createElement('div');
      pluginContainer.className = `.${name}__plugin`;
      pluginContainer.innerHTML = plugin.render(this.options.data);
      this.container.appendChild(pluginContainer);

      plugin.action(this)
    })
  }
  render(data){
    // 抽象方法，交由具体类实现
    return ''
  }
}

总结