老师，请检查，哪里需要改进

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Module 的基本用法</title>
    <link rel="stylesheet" href="./css/slider.css" />
  </head>
  <body>
    <div class="slider-layout">
      <div class="slider">
        <div class="slider-content">
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/1.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/2.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/3.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/4.jpg" alt="1" class="slider-img"
            /></a>
          </div>
        </div>
      </div>
    </div>
   <!-- <script src="./js/base.js"></script>
   <script src="./js/index.js"></script> -->
 
   <script src="./js/index.js" type="module"></script>
  </body>
</html>

base.js:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

import DEFAULTS from './defaults.js';
import {ELEMENT_NODE,SLIDER_ANIMATION_CLASSNAME} from './constant.js';
 
 
// 父类
class BaseSlider {
  constructor(el, options) {
    if (el.nodeType !== ELEMENT_NODE)
      throw new Error('实例化的时候，请传入 DOM 元素！');
 
    // 实际参数
    this.options = {
      ...DEFAULTS,
      ...options
    };
 
    const slider = el;
    const sliderContent = slider.querySelector('.slider-content');
    const sliderItems = sliderContent.querySelectorAll('.slider-item');
 
    // 添加到 this 上，为了在方法中使用
    this.slider = slider;
    this.sliderContent = sliderContent;
    this.sliderItems = sliderItems;
 
    this.minIndex = 0;
    this.maxIndex = sliderItems.length - 1;
    this.currIndex = this.getCorrectedIndex(this.options.initialIndex);
 
    // 每个 slider-item 的宽度（每次移动的距离）
    this.itemWidth = sliderItems[0].offsetWidth;
 
    this.init();
  }
 
  // 获取修正后的索引值
  // 随心所欲，不逾矩
  getCorrectedIndex(index) {
    if (index < this.minIndex) return this.maxIndex;
    if (index > this.maxIndex) return this.minIndex;
    return index;
  }
 
  // 初始化
  init() {
    // 为每个 slider-item 设置宽度
    this.setItemsWidth();
 
    // 为 slider-content 设置宽度
    this.setContentWidth();
 
    // 切换到初始索引 initialIndex
    this.move(this.getDistance());
 
    // 开启动画
    if (this.options.animation) {
      this.openAnimation();
    }
  }
 
  // 为每个 slider-item 设置宽度
  setItemsWidth() {
    for (const item of this.sliderItems) {
      item.style.width = `${this.itemWidth}px`;
    }
  }
 
  // 为 slider-content 设置宽度
  setContentWidth() {
    this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
  }
 
  // 不带动画的移动
  move(distance) {
    this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
  }
 
  // 带动画的移动
  moveWithAnimation(distance) {
    this.setAnimationSpeed(this.options.speed);
    this.move(distance);
  }
 
  // 设置切换动画速度
  setAnimationSpeed(speed) {
    this.sliderContent.style.transitionDuration = `${speed}ms`;
  }
 
  // 获取要移动的距离
  getDistance(index = this.currIndex) {
    return -this.itemWidth * index;
  }
 
  // 开启动画
  openAnimation() {
    this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
  }
 
  // 关闭动画
  closeAnimation() {
    this.setAnimationSpeed(0);
  }
 
  // 切换到 index 索引对应的幻灯片
  to(index) {
    index = this.getCorrectedIndex(index);
    if (this.currIndex === index) return;
 
    this.currIndex = index;
    const distance = this.getDistance();
 
    if (this.options.animation) {
      return this.moveWithAnimation(distance);
    } else {
      return this.move(distance);
    }
  }
 
  // 切换上一张
  prev() {
    this.to(this.currIndex - 1);
  }
 
  // 切换下一张
  next() {
    this.to(this.currIndex + 1);
  }
 
  // 获取当前索引
  getCurrIndex() {
    return this.currIndex;
  }
}
 
export default BaseSlider;

Slider.js:

import BaseSlider from './base.js';
import keyboardEvent from './keyboardEvent.js';
class Slider extends BaseSlider {
    constructor(el, options) {
      super(el, options);
      this._bindEvent();
    }
 
    _bindEvent() {
        keyboardEvent.bindEvent(this);
    }
  }
  
export default Slider;

defaults.js:

// 默认参数
const DEFAULTS = {
    // 初始索引
    initialIndex: 0,
    // 切换时是否有动画
    animation: true,
    // 切换速度，单位 ms
    speed: 300
  };
export default DEFAULTS;

constant.js:

1 2	`export const ELEMENT_NODE = 1;` `export const SLIDER_ANIMATION_CLASSNAME =` `'slider-animation';`

index.js:

1 2	`import Slider from` `'./Slider.js';` `new` `Slider(document.querySelector('.slider'));`

keyboardEvent.js:

const keyboardEvent = {
    bindEvent(slider){
        document.addEventListener(
            'keyup',
            ev => {
              if (ev.keyCode === 37) {
                slider.prev();
              } else if (ev.keyCode === 39) {
                slider.next();
              }
            },
            false
          );
    }
}
export default keyboardEvent;

weixin_慕码人7523200 2021-12-12

源自：Module 模块 4-4 自由编程

收起

1回答

好帮手慕然然 2021-12-13 09:44:08

同学你好，代码实现很棒，基本不需要改进，继续加油，祝学习愉快！

收起回答

提问者 weixin_慕码人7523200 #1

基本不需要改进不行呀，老师，哪里写的不够完美尽管说，我是一个追求完美的人

2021-12-13 12:25:28
好帮手慕然然回复提问者 weixin_慕码人7523200 #2

同学你好，代码已经很完美了，习题要求也都实现了，老师没有发现需要改进的地方。祝学习愉快！

2021-12-13 13:26:32