软件开发与创新课程设计 第一周作业

一、来源

  这是一个由同学个人开发的小米商城前端练习项目。作为学习成果，该项目包含了登录页和首页两个核心页面，采用HTML、CSS和JavaScript实现。项目的设计目标是模拟小米商城的视觉风格和基础交互体验，注重页面的展示效果，体现了作者对前端布局和基础交互逻辑的掌握。

---

二、运行环境

• 操作系统： Windows。
• 软件： Visual Studio Code。
• 必要插件： Live Server。
• Web浏览器： Edge。

---

三、问题及重构思路

1. 轮播图不能无限轮播

  现象：当切换到最后一张图片时，再次点击“下一张”按钮无法继续循环到第一张，或者从第一张点击“上一张”时无法跳到最后一张，轮播在两端停止。
  改善方案：实现轮播图的自动循环切换，同时同步更新指示器的选中状态，通过opacity控制图片显隐，视觉过渡更柔和。点击右侧按钮时，手动切换到下一张轮播图，同时暂停再重启自动轮播，避免手动操作与自动轮播冲突。点击左侧按钮时，手动切换到上一张轮播图，通过while处理索引负数的情况，实现从第一张切到最后一张的循环效果。点击指示器圆点，直接切换到对应轮播图；鼠标悬停轮播图时暂停自动轮播，离开后恢复自动轮播。

2. 页面下滑后无法回到顶部

  现象：当用户向下滚动浏览较长页面后，如果想返回导航栏或重新浏览顶部内容，只能手动滑动鼠标滚轮，非常不便。
  改善方案：先给window绑定scroll事件，页面滚动时会持续触发这个函数。pageYOffset获取页面垂直滚动的距离，记录当前页面滚动的位置。页面滚动不足400px时，回顶部按钮隐藏；页面超过400px时，按钮显示。根据页面滚动状态，动态修改右侧悬浮菜单的top值，保证菜单始终处于合理的视觉位置，避免与页面内容重叠。

---

四、修改后的部分代码

点击查看代码

var banner_imgs = document.getElementsByClassName('banner-img');
var circles = document.getElementsByClassName('btn-circle');
var index = 0;
circles[index % banner_imgs.length].style.backgroundColor = '#fff';
var interval_id;
function interval() {
    interval_id = setInterval(function () {
        index++;
        for (var i = 0; i < banner_imgs.length; i++) {
            banner_imgs[i].style.opacity = 0;
        }
        banner_imgs[index % banner_imgs.length].style.opacity = 1;
        for (var i = 0; i < circles.length; i++) {
            circles[i].style.backgroundColor = '#33333380';
        }
        circles[index % banner_imgs.length].style.backgroundColor = '#fff';
    }, 6000)
}

interval();

var box_right = document.getElementsByClassName('box-right');
box_right[0].addEventListener('click', function () {
    clearInterval(interval_id);
    for (var i = 0; i < banner_imgs.length; i++) {
        banner_imgs[i].style.opacity = 0;
    }
    index++;
    index = index % banner_imgs.length;
    banner_imgs[index].style.opacity = 1;
    for (var i = 0; i < circles.length; i++) {
        circles[i].style.backgroundColor = '#33333380';
    }
    circles[index].style.backgroundColor = '#fff';
    interval();
})

点击查看代码

window.addEventListener('scroll', function () {
    var scroll_top = this.window.pageYOffset;
    if (scroll_top >= 400) {
        var return_top = document.querySelector('.return-top');
        return_top.classList.remove('right-menu-hidden');
        var right_menu = document.querySelector('.right-menu');
        right_menu.style.top = '253px';
    }
    else {
        var return_top = document.querySelector('.return-top');
        return_top.classList.add('right-menu-hidden');
        var right_menu = document.querySelector('.right-menu');
        right_menu.style.top = '360px';
    }
})

---

五、重构项目的测试截图

---

六、总结

  原生JS开发往往导致DOM操作、事件监听和业务逻辑混杂在一起。在修改轮播图时，最大的难点是逆向推导原作者的逻辑脉络，如索引变量的命名、函数的作用域，避免破坏现有的定时器或点击事件，这比重写一个功能更耗时、更易出错。
  从逆向软件工程的角度来看，真正的难点往往不在于写代码，而在于理解别人为什么那样写代码以及如何在保持原有生态的前提下注入新生命。