跟着月影学JavaScript（下）| 青训营笔记

iam阿缪
149 阅读5分钟

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

组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

示例： 用原生 JS 写一个电商网站的轮播图，应该怎么实现如下图的效果？

image.png

版本一（API无交互）

结构：HTML

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

<div id="my-slider" class="slider-list">
    <ul>
        <li class="slider-list__item--selected">
          <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
        </li>
    </ul>
</div>

表现：CSS

  • 使用 CSS 绝对定位将图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符（modifier）
  • 轮播图的切换动画使用 CSS transition
`#my-slider{
    position: relative;
    width: 790px;
   }

.slider-list ul{
    list-style-type:none;
    position: relative;
    padding: 0;
    margin: 0;
   }
   
.`slider-list__item,
.slider-list__item--selected{
    position: absolute;
    transition: opacity 1s;
    opacity: 0;
    text-align: center;
   }
   
.slider-list__item--selected{
    transition: opacity 1s;
    opacity: 1;`
   }`

行为：JS

行为:API

image.png 
class Slider{
    constructor(id){
        this.container = document.getElementById(id);
        this.items = this.container
        .querySelectorAll('.slider-list__item, .slider-list__item--selected');
    }
    getSelectedItem(){ //得到当前轮播图正在显示的li
        const selected = this.container
        .querySelector('.slider-list__item--selected');
        return selected
    }
    getSelectedItemIndex(){ //获取当前轮播图的显示li的下标
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    slideTo(idx){ //轮播到指定的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 = (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);  
    }
}
const slider = new Slider('my-slider');
slider.slideTo(3);

接下来就可手动调用API来使用轮播图，添加定时器。手动添加下面圆点和控制左右移动按钮，但是这些控制的按钮和组件的状态是有状态耦合的，如果在未来更改需求修改起来的话会很复杂，因此在设计的时候轮播图片和这些按钮是独立的，进而在控制流部分需要进行解耦。

版本二（控制流交互）

使用自定义事件来解耦。

结构：HTML

在HTML上实现圆点下标和左右移动的按钮。

<a class="slide-list__next"></a>
<a class="slide-list__previous"></a>
<div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
</div>

表现：CSS

给圆点和左右移动按钮添加样式。

/*下面是四个小圆点的样式*/ 
.slide-list__control-buttons, 
.slide-list__control-buttons--selected
{ 
  display: inline-block; 
  width: 15px; 
  height: 15px; 
  border-radius: 50%; 
  margin: 0 5px; 
  background-color: white; 
  cursor: pointer; /*设置鼠标移动到这个元素时显示为手指状*/ 
}
/*当选择后，小圆点的颜色变成红色*/ 
.slide-list__control-buttons--selected 
{ 
  background-color: red; 
}

行为：JS

行为：控制流

可自动轮播也可手动控制交互。

  // 鼠标经过某个小圆点，就将此圆点对应的图片显示出来，并且停止循环轮播
  controller.addEventListener('mouseover', evt=>{
    const idx = Array.from(buttons).indexOf(evt.target);
    if(idx >= 0){
      this.slideTo(idx);
      this.stop();
    }
  });

  // 鼠标移开小圆点，就继续开始循环轮播
  controller.addEventListener('mouseout', evt=>{
    this.start();
  });

  // 注册slide事件，将选中的图片和小圆点设置为selected状态
  this.container.addEventListener('slide', evt => {
    const idx = evt.detail.index
    const selected = controller.querySelector('.slide-list__control-buttons--selected');
    if(selected) selected.className = 'slide-list__control-buttons';
    buttons[idx].className = 'slide-list__control-buttons--selected';
  })

// 点击左边小箭头，翻到前一页
const previous = this.container.querySelector('.slide-list__previous');
if(previous){
  previous.addEventListener('click', evt => {
    this.stop();
    this.slidePrevious();
    this.start();
    evt.preventDefault();
  });
}
// 点击右边小箭头，翻到后一页
const next = this.container.querySelector('.slide-list__next');
if(next){
  next.addEventListener('click', evt => {
    this.stop();
    this.slideNext();
    this.start();
    evt.preventDefault();
  });
}

总结：基本方法

  • 结构设计
  • 展现效果
  • 行为设计
    1. API （功能）
    2. Event （控制流）

以上的优化只做到了封装性和正确性，缺少扩展性和复用性

我们将上面的基本代码进行改进，完成 重构 轮播图组件。

重构：插件化

解耦

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

在constructor中把控制圆点和上下页移动轮播图的功能抽离出来成为一个个插件函数，然后再在组件里面添加一个注册函数registerPlugins()API，轮播图调用时候，只需要把每个插件函数通过这个函数注册进去就行了，去除就是把插件函数注销掉就行了。通过这样的方法，将用户控制的操作从组件中抽离出来，做成插件，这样就提高了组件的可扩展性

function pluginController(slider){
  // 对小圆点的操作控制流
  const controller = slider.container.querySelector('.slide-list__control');
  
  if(controller){
    const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--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();
    });
    
    // 注册slide事件，将选中的图片和小圆点设置为selected状态
    slider.addEventListener('slide', evt => {
      const idx = evt.detail.index
      const selected = controller.querySelector('.slide-list__control-buttons--selected');
      if(selected) selected.className = 'slide-list__control-buttons';
      buttons[idx].className = 'slide-list__control-buttons--selected';
    });
  }  
}

重构：模板化

解耦

将HTML模板化，也就是让JavaScript来渲染组件的HTML，这样更易于扩展

image.png

在JS代码中使用一个render()函数来渲染，使用一个数组来存图片的路径。通过这样HTML模块化后，如果我们注释掉圆点部分的插件，相其他部分的功能也不会受到影响，那么在HTML中相应的圆点也不会有，需要新的插件，只要重新写好插件直接往里面注册就可以了。

 class Slider{
            constructor(id, opts = {images:[], cycle: 3000}){
              this.container = document.getElementById(id);
              this.options = opts;
              this.container.innerHTML = this.render();
              this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
              this.cycle = opts.cycle || 3000;
              this.slideTo(0);
            }
            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>`;
        }

重构：抽象化（组件框架）

抽象

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

image.png

我们将模板化中的registerPlugins(...plugins)、render()组件抽离出来放在Component类中，然后通过继承的方式将其继承该子类Slider，这样就能抽象出一个Component类，这个类体系相对完整，可以相当于是一个很小的组件框架。

 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) {
              /* abstract */
              return ''
            }
      }

总结

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

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

  • 三次重构

    1. 插件化
    2. 模板化
    3. 抽象化（组件框架）
avatar
文章
阅读
粉丝