尧图网站建设 
简介面向计算机专业学生的购物网站前端期末项目基于HTML、CSS、JavaScript与jQuery构建包含登录、主页、购物车、留言板和个人中心五个子页面覆盖登录验证、轮播图、下拉菜单、倒计时、Tab切换、固定导航栏、留言板、购物车增删结算及退出登录等常见交互模块。压缩包共50个文件以37张JPG图片素材为主体涵盖商品及分类配图另含5个HTML页面、5个CSS样式、1个JavaScript脚本和1个WebM演示视频整体大小48.78MB结构清晰便于直接运行或二次开发。已完成的主页模块完成度较高可单独拆除登录验证后复用购物车模块的添加、删除与结算逻辑完整适合作为课程设计参考或功能改造模板。资源发布后已有20750人学习说明其对各阶段前端学习者均有实用价值无论是期末作业参考还是前端交互练习都能从中获得完整落地方案。1. javascript网页设计期末作业最需要的不是模板而是一套能讲清逻辑的购物网站前端javascript网页设计期末作业最怕的不是没思路而是网上扒下来的模板要么堆满特效、要么一开控制台全是报错。这份资源是一套完整的购物网站前端商品展示、分类筛选、搜索排序、购物车增删改、结算模拟都在技术栈就是 html、css、javascript 和 jquery没有后端、没有构建工具双击 index.html 就能跑。你能改交互、换商品、调样式也能把每一段代码当作答辩时解释自己“想清楚了”的证据。适合两类人一是期末作业需要“能跑而且说得清”的前端方向学生二是刚学完 JavaScript 想拿一个真实场景练手的新人。2. 目录结构与页面骨架数据驱动渲染是购物网站的核心思路2.1 文件划分与页面骨架这套项目总共四个文件加一个图片目录结构非常干净适合当作课程作业直接提交。我拆包之后第一件事就是把目录树打出来看shopping-site/ ├── index.html # 唯一入口页面所有内容都在这 ├── css/ │ └── style.css # 全部样式含栅格布局与响应式断点 ├── js/ │ ├── data.js # 商品数据数组模拟后端接口 │ ├── cart.js # 购物车逻辑含 localStorage 持久化 │ └── main.js # 页面渲染、筛选、搜索、事件绑定入口 └── img/ # 商品图片目录说明一下每个文件的职责边界data.js 里只放数据不放任何操作逻辑cart.js 只负责购物车本身的增删改查和存储main.js 负责把数据和页面绑在一起。这样拆的好处是答辩时你能直接说出来“我这里数据层和视图层是分开的”而不是所有代码挤在一个 script 标签里。页面骨架是经典的 header main footerheader 放搜索框和购物车入口main 里左侧是分类菜单、右侧是商品网格底部结算表单作为页面内嵌区块不跳转页面。2.2 商品数据的渲染链路商品数据是纯数组加对象字面量每一件商品都有独立 id这是整个项目能跑起来的前提。main.js 里用 jQuery 的 each 配合模板字符串把数据铺到页面上// js/main.js 中商品渲染的核心片段 $(function () { // 从 data.js 中取全局商品数组 window.GOODS const goods window.GOODS; // 遍历商品数组拼好 HTML 后一次性插入 .goods-grid $.each(goods, function (index, item) { const card div classgoods-card>/* css/style.css 商品网格核心样式 */ .goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; padding: 20px; } .goods-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; transition: box-shadow 0.2s ease; } .goods-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }auto-fill 加 minmax(240px, 1fr) 的组合是这套布局的精华。它的意思是每一列最小 240px在容器足够宽时尽量多排几列多余的宽度按比例分配给各列。窗口从手机宽度拉到桌面宽度商品列数会自动从一列变成四列不需要写一行媒体查询。这是比较聪明的做法能让答辩老师看到你不是只会用固定宽度。如果想让商品卡片更紧凑把 minmax 里的 240px 改小到 200px 即可如果想让卡片更舒展改成 280px 也可以。购物车和结算表单用的是页面内嵌的抽屉式弹层通过 display: none 和 display: block 切换不依赖任何动画库交互手感虽然朴素但在课程作业这个级别足够稳。3. 购物车交互实战事件委托、数量边界与总价精度3.1 事件绑定为什么动态元素必须用事件委托购物车里的商品是用户点“加入购物车”之后才出现在页面上的这类动态生成的元素如果用 $(.btn-delete).click(fn) 直接绑定你会发现根本点不动。原因在于绑定发生在元素存在之前。标准解法是事件委托把监听挂到不会消失的父容器上让事件冒泡过来再判断目标是谁// js/cart.js 购物车容器的事件委托 $(document).on(click, .btn-add, function () { const id $(this).data(id); cart.add(id); }); $(document).on(click, .btn-inc, function () { const id $(this).closest(.cart-item).data(id); cart.changeQty(id, 1); }); $(document).on(click, .btn-dec, function () { const id $(this).closest(.cart-item).data(id); cart.changeQty(id, -1); });逻辑上所有以 .btn- 开头的按钮都挂在 document 上监听事件触发时 jQuery 会检查实际点击的目标是否匹配选择器。好处是什么不管购物车列表被清空重绘多少次按钮永远能点。参数上changeQty 的第二个参数传 1 或 -1 表示增加或减少一件而不是传入目标数量这样调用方不需要先查当前数量再算差值逻辑更集中。注意 .closest(.cart-item) 是向上找最近的购物车行而不是找兄弟节点这能避免拿到错误的 id。3.2 数量边界库存上限与最小值为 1购物车数量不能无限加也不能减到负数或 0。很多作业代码在这里只写了点击加一、点击减一没考虑边界结果就是把数量减成了 0 甚至负数结算时总价变成负数这是最典型的翻车现场。这一版用了一个 clamp 思路// js/cart.js 数量变更与边界限制 cart.changeQty function (id, delta) { const item this.items.find(function (i) { return i.id id; }); if (!item) return; // 下限是 1上限是库存量 stock const next Math.min(Math.max(item.qty delta, 1), item.stock); if (next item.qty) { // 说明要么已经在库存上限要么已经到最小量 1 return; } item.qty next; this.save(); this.render(); };Math.min(Math.max(value, 1), item.stock) 这个嵌套写法是一次性把上下限都夹住的标准写法读起来就是一行的 clamp。当 next 和当前数量相等时直接 return可以避免无效的保存和重绘。这里的关键参数是 item.stock也就是每件商品数据里的库存字段data.js 里我给每件商品都写了 stock从 3 到 20 不等。这个设计的答辩价值在于你能解释清楚为什么点加号加不上去——不是 bug是库存限制。如果想让互动更友好可以在返回 false 的同时弹一条提示“已达库存上限”。3.3 总价计算穿插重绘与精度处理购物车里每张订单行都要显示小计底部要有合计。我推荐的做法不是每次操作都全量遍历所有商品而是分两层行小计在渲染单行时就算好合计用 reduce 汇总购物车 items// js/cart.js 渲染购物车列表与合计 cart.render function () { if (this.items.length 0) { $(.cart-list).html(p classcart-empty购物车还是空的/p); $(.cart-total).text(0.00); return; } let html ; $.each(this.items, function (_, item) { const subtotal item.price * item.qty; html div classcart-item>// js/cart.js localStorage 持久化读写 cart.save function () { // 只存必要字段避免把方法也序列化进去 const plain this.items.map(function (item) { return { id: item.id, qty: item.qty, name: item.name, price: item.price, stock: item.stock, img: item.img }; }); localStorage.setItem(shopping_cart, JSON.stringify(plain)); }; cart.load function () { const raw localStorage.getItem(shopping_cart); if (!raw) return []; try { const arr JSON.parse(raw); // 防御解析出来的必须是非空数组才能用 return Array.isArray(arr) ? arr : []; } catch (e) { // 解析失败就清掉脏数据回退到空购物车 localStorage.removeItem(shopping_cart); return []; } };逻辑上的关键点有两个。第一save 时不能直接把 this.items 整个 set 进去因为 this.items 里的对象可能带有原型方法和临时字段JSON.stringify 会把可枚举属性全部序列化存进去的是冗余数据读回来也会带着脏属性。所以先 map 成一个纯数据对象再存。第二load 里最好加 try catch因为 localStorage 里的内容理论上可以被用户手动改坏或者上一条存储格式不兼容。JSON.parse 抛异常后如果不处理整个初始化流程就崩了页面白屏。4.2 判断数据类型进货校验里的防御式编程从 localStorage 读回来的数组里面的 id 到底是不是数字、price 能不能用于计算这些都不能想当然。在加入购物车之前做一层防线能拦住绝大多数运行时异常// js/cart.js 加购时的数据校验 cart.add function (id) { const goodsItem window.GOODS.find(function (g) { return String(g.id) String(id); }); if (!goodsItem) { console.warn(商品不存在: id , id); return; } // 判断数据类型确保价格能参与计算 if (typeof goodsItem.price ! number || isNaN(goodsItem.price)) { console.error(商品价格不合法:, goodsItem.price); return; } const existed this.items.find(function (i) { return String(i.id) String(id); }); if (existed) { // 已有同款商品数量加一且不超过库存 this.changeQty(existed.id, 1); } else { this.items.push({ id: goodsItem.id, name: goodsItem.name, price: goodsItem.price, stock: goodsItem.stock, qty: 1, img: goodsItem.img }); this.save(); this.render(); } };这里面用到了两处 javascript 判断数据类型的操作String(g.id) String(id) 是为了把可能从>// js/main.js 搜索防抖 let searchTimer null; $(#search-input).on(input, function () { clearTimeout(searchTimer); const keyword $(this).val().trim(); // 300ms 内没有新输入才真正执行筛选 searchTimer setTimeout(function () { const filtered window.GOODS.filter(function (item) { return item.name.toLowerCase().includes(keyword.toLowerCase()) || item.desc.toLowerCase().includes(keyword.toLowerCase()); }); renderGoods(filtered); }, 300); });核心参数是 300ms 的延时。clearTimeout 先把上一次未执行的定时器清掉这样用户连续输入时只有最后一次输入停住 300ms 后才会触发筛选。include 匹配用 toLowerCase 把双方都转成小写避免“手机”和“手机壳”这类大小写不一致的问题。筛选函数 renderGoods(filtered) 和首次渲染用的是同一个渲染函数只是入参不同这是项目里复用性最好的一个设计点。如果想把筛选结果为空的情况也做掉在 renderGoods 里判断数组长度为空就渲染一条“没有找到相关商品”的提示这个细节放进作业里是加分项。5. 期末作业避坑指南五个必踩的坑与解法5.1 脚本加载顺序$ is not defined 与页面白屏现象打开 index.html 控制台报Uncaught ReferenceError: $ is not defined整个页面白屏什么都渲染不出来。原因script 标签的加载顺序不对。jQuery 放在 main.js 之后加载浏览器按顺序执行脚本main.js 里的 $(function(){...}) 在运行时 jQuery 还没定义。期末作业最常见的翻车就是把顺序写成 data.js、main.js、jquery.min.js。解决把 jquery.min.js 放到最前面并且放在 之前如果用了外链 CDN本地演示没网一样会挂。我建议直接把 jquery.min.js 下载到 js/vendor 目录里不依赖外网。检查顺序时记住一句话谁先被用到谁就先加载。5.2 动态生成的按钮点不动事件绑定时机失效现象页面首次加载时静态写死在 HTML 里的按钮能点商品卡片里动态生成的“加入购物车”按钮怎么点都没反应。原因动态按钮是在文档加载完成后才被 append 进 DOM 的直接用 $(window).ready 里绑定 .click 只能绑到当时已经存在的元素。解决使用事件委托把监听挂在 document 或不变的容器上如$(document).on(click, .btn-add, fn)。这个坑基本是 javascript 事件机制里最经典的考题答辩时被问到的概率非常高。想展示你对原理的理解可以补一句“事件冒泡到 document 时jQuery 内部会重新匹配 target 是否符合选择器。”5.3 刷新后购物车变成 [object Object]直接把对象塞进了 localStorage现象加购成功刷新页面后购物车列表显示“[object Object]”控制台不报错。原因localStorage 只能存字符串直接 setItem(cart, this.items) 时 JavaScript 会把数组自动转成字符串“[object Object]” 就是数组 toString 之后的结果。解决存储前必须 JSON.stringify读取时 JSON.parse。这是本地存储使用里最泛滥的错写上localStorage.setItem(cart, JSON.stringify(this.items))一行就能解决。5.4 总价出现 0.30000000000000004浮点精度不做展示层处理现象一件商品单价 0.1买三件合计显示 0.30000000000000004。原因计算机用二进制存浮点数0.1 本身就无法精确表达乘 3 后误差累积。这不是 jQuery 的问题是 javascript 保留两位小数操作使用不当的典型场景。解决展示层统一用 total.toFixed(2)参与计算的变量保持原始数字。注意不要在 price 上先 toFixed 再乘 qty因为 toFixed 返回字符串字符串乘法会重新转数字绕了一圈误差还在展示层仍然可能出问题。正确的做法是“先算完再格式化”。5.5 图片挂掉相对路径与 index.html 的层级关系现象本地双击打开 index.html部分商品图片显示为裂图但在编辑器里直接打开图片就能看。原因图片路径写成img srcimg/goods1.jpg是没问题的问题通常出在把整个项目放在子目录里运行时路径层级不对或者有的人把 index.html 单独拷出去图片和 css 都不见了。解决推荐直接以项目根目录为相对路径基准确保 img/ 和 css/ 跟 index.html 同级。如果图片路径写的是../img/...说明你很可能把页面放在了两层目录下容易出问题。这里没有玄学一句“保持文件结构不变”就能讲清楚。6. 交付前加分的验证技巧控制台自查与交互打磨作业写完了别急着交先花十分钟做一遍自检。打开控制台切到 Console 面板刷新页面正常状态下应该没有任何红色报错最多允许一条黄色警告。然后手动操作一遍搜索一个不存在的词、把商品加到库存上限、清空购物车后重新加购、刷新页面确认购物车还在。这四条过一遍最常见的运行时问题基本都能暴露。控制台里还有一个容易被忽略的技巧直接在 Console 执行Object.keys(window.GOODS[0])可以查看商品对象的所有字段确认 id、price、stock 这些关键字段的类型对不对。看见 price 是 string 类型立刻去 data.js 里把引号去掉看见 stock 是 undefined所有库存边界判断都会失效。这一步做完交互细节再打磨一下空购物车的提示文案、结算按钮对空购物车的禁用状态、以及搜索无结果时的占位文字这三处是老师演示时大概率会点到的位置。从那以后我每次写完前端项目都会强制自己走一遍“控制台无报错 关键流程手动点一遍 刷新后状态检查”的验收流程这套习惯就是从拆这个购物网站项目时养成的。你能把这个项目的代码一行行讲清楚比堆十个特效在答辩中都管用。希望帮到你。本文还有配套的精品资源点击获取 JavaScript购物网站前端：从数据渲染到购物车交互的完整逻辑
简介面向计算机专业学生的购物网站前端期末项目基于HTML、CSS、JavaScript与jQuery构建包含登录、主页、购物车、留言板和个人中心五个子页面覆盖登录验证、轮播图、下拉菜单、倒计时、Tab切换、固定导航栏、留言板、购物车增删结算及退出登录等常见交互模块。压缩包共50个文件以37张JPG图片素材为主体涵盖商品及分类配图另含5个HTML页面、5个CSS样式、1个JavaScript脚本和1个WebM演示视频整体大小48.78MB结构清晰便于直接运行或二次开发。已完成的主页模块完成度较高可单独拆除登录验证后复用购物车模块的添加、删除与结算逻辑完整适合作为课程设计参考或功能改造模板。资源发布后已有20750人学习说明其对各阶段前端学习者均有实用价值无论是期末作业参考还是前端交互练习都能从中获得完整落地方案。1. javascript网页设计期末作业最需要的不是模板而是一套能讲清逻辑的购物网站前端javascript网页设计期末作业最怕的不是没思路而是网上扒下来的模板要么堆满特效、要么一开控制台全是报错。这份资源是一套完整的购物网站前端商品展示、分类筛选、搜索排序、购物车增删改、结算模拟都在技术栈就是 html、css、javascript 和 jquery没有后端、没有构建工具双击 index.html 就能跑。你能改交互、换商品、调样式也能把每一段代码当作答辩时解释自己“想清楚了”的证据。适合两类人一是期末作业需要“能跑而且说得清”的前端方向学生二是刚学完 JavaScript 想拿一个真实场景练手的新人。2. 目录结构与页面骨架数据驱动渲染是购物网站的核心思路2.1 文件划分与页面骨架这套项目总共四个文件加一个图片目录结构非常干净适合当作课程作业直接提交。我拆包之后第一件事就是把目录树打出来看shopping-site/ ├── index.html # 唯一入口页面所有内容都在这 ├── css/ │ └── style.css # 全部样式含栅格布局与响应式断点 ├── js/ │ ├── data.js # 商品数据数组模拟后端接口 │ ├── cart.js # 购物车逻辑含 localStorage 持久化 │ └── main.js # 页面渲染、筛选、搜索、事件绑定入口 └── img/ # 商品图片目录说明一下每个文件的职责边界data.js 里只放数据不放任何操作逻辑cart.js 只负责购物车本身的增删改查和存储main.js 负责把数据和页面绑在一起。这样拆的好处是答辩时你能直接说出来“我这里数据层和视图层是分开的”而不是所有代码挤在一个 script 标签里。页面骨架是经典的 header main footerheader 放搜索框和购物车入口main 里左侧是分类菜单、右侧是商品网格底部结算表单作为页面内嵌区块不跳转页面。2.2 商品数据的渲染链路商品数据是纯数组加对象字面量每一件商品都有独立 id这是整个项目能跑起来的前提。main.js 里用 jQuery 的 each 配合模板字符串把数据铺到页面上// js/main.js 中商品渲染的核心片段 $(function () { // 从 data.js 中取全局商品数组 window.GOODS const goods window.GOODS; // 遍历商品数组拼好 HTML 后一次性插入 .goods-grid $.each(goods, function (index, item) { const card div classgoods-card>/* css/style.css 商品网格核心样式 */ .goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; padding: 20px; } .goods-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; transition: box-shadow 0.2s ease; } .goods-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }auto-fill 加 minmax(240px, 1fr) 的组合是这套布局的精华。它的意思是每一列最小 240px在容器足够宽时尽量多排几列多余的宽度按比例分配给各列。窗口从手机宽度拉到桌面宽度商品列数会自动从一列变成四列不需要写一行媒体查询。这是比较聪明的做法能让答辩老师看到你不是只会用固定宽度。如果想让商品卡片更紧凑把 minmax 里的 240px 改小到 200px 即可如果想让卡片更舒展改成 280px 也可以。购物车和结算表单用的是页面内嵌的抽屉式弹层通过 display: none 和 display: block 切换不依赖任何动画库交互手感虽然朴素但在课程作业这个级别足够稳。3. 购物车交互实战事件委托、数量边界与总价精度3.1 事件绑定为什么动态元素必须用事件委托购物车里的商品是用户点“加入购物车”之后才出现在页面上的这类动态生成的元素如果用 $(.btn-delete).click(fn) 直接绑定你会发现根本点不动。原因在于绑定发生在元素存在之前。标准解法是事件委托把监听挂到不会消失的父容器上让事件冒泡过来再判断目标是谁// js/cart.js 购物车容器的事件委托 $(document).on(click, .btn-add, function () { const id $(this).data(id); cart.add(id); }); $(document).on(click, .btn-inc, function () { const id $(this).closest(.cart-item).data(id); cart.changeQty(id, 1); }); $(document).on(click, .btn-dec, function () { const id $(this).closest(.cart-item).data(id); cart.changeQty(id, -1); });逻辑上所有以 .btn- 开头的按钮都挂在 document 上监听事件触发时 jQuery 会检查实际点击的目标是否匹配选择器。好处是什么不管购物车列表被清空重绘多少次按钮永远能点。参数上changeQty 的第二个参数传 1 或 -1 表示增加或减少一件而不是传入目标数量这样调用方不需要先查当前数量再算差值逻辑更集中。注意 .closest(.cart-item) 是向上找最近的购物车行而不是找兄弟节点这能避免拿到错误的 id。3.2 数量边界库存上限与最小值为 1购物车数量不能无限加也不能减到负数或 0。很多作业代码在这里只写了点击加一、点击减一没考虑边界结果就是把数量减成了 0 甚至负数结算时总价变成负数这是最典型的翻车现场。这一版用了一个 clamp 思路// js/cart.js 数量变更与边界限制 cart.changeQty function (id, delta) { const item this.items.find(function (i) { return i.id id; }); if (!item) return; // 下限是 1上限是库存量 stock const next Math.min(Math.max(item.qty delta, 1), item.stock); if (next item.qty) { // 说明要么已经在库存上限要么已经到最小量 1 return; } item.qty next; this.save(); this.render(); };Math.min(Math.max(value, 1), item.stock) 这个嵌套写法是一次性把上下限都夹住的标准写法读起来就是一行的 clamp。当 next 和当前数量相等时直接 return可以避免无效的保存和重绘。这里的关键参数是 item.stock也就是每件商品数据里的库存字段data.js 里我给每件商品都写了 stock从 3 到 20 不等。这个设计的答辩价值在于你能解释清楚为什么点加号加不上去——不是 bug是库存限制。如果想让互动更友好可以在返回 false 的同时弹一条提示“已达库存上限”。3.3 总价计算穿插重绘与精度处理购物车里每张订单行都要显示小计底部要有合计。我推荐的做法不是每次操作都全量遍历所有商品而是分两层行小计在渲染单行时就算好合计用 reduce 汇总购物车 items// js/cart.js 渲染购物车列表与合计 cart.render function () { if (this.items.length 0) { $(.cart-list).html(p classcart-empty购物车还是空的/p); $(.cart-total).text(0.00); return; } let html ; $.each(this.items, function (_, item) { const subtotal item.price * item.qty; html div classcart-item>// js/cart.js localStorage 持久化读写 cart.save function () { // 只存必要字段避免把方法也序列化进去 const plain this.items.map(function (item) { return { id: item.id, qty: item.qty, name: item.name, price: item.price, stock: item.stock, img: item.img }; }); localStorage.setItem(shopping_cart, JSON.stringify(plain)); }; cart.load function () { const raw localStorage.getItem(shopping_cart); if (!raw) return []; try { const arr JSON.parse(raw); // 防御解析出来的必须是非空数组才能用 return Array.isArray(arr) ? arr : []; } catch (e) { // 解析失败就清掉脏数据回退到空购物车 localStorage.removeItem(shopping_cart); return []; } };逻辑上的关键点有两个。第一save 时不能直接把 this.items 整个 set 进去因为 this.items 里的对象可能带有原型方法和临时字段JSON.stringify 会把可枚举属性全部序列化存进去的是冗余数据读回来也会带着脏属性。所以先 map 成一个纯数据对象再存。第二load 里最好加 try catch因为 localStorage 里的内容理论上可以被用户手动改坏或者上一条存储格式不兼容。JSON.parse 抛异常后如果不处理整个初始化流程就崩了页面白屏。4.2 判断数据类型进货校验里的防御式编程从 localStorage 读回来的数组里面的 id 到底是不是数字、price 能不能用于计算这些都不能想当然。在加入购物车之前做一层防线能拦住绝大多数运行时异常// js/cart.js 加购时的数据校验 cart.add function (id) { const goodsItem window.GOODS.find(function (g) { return String(g.id) String(id); }); if (!goodsItem) { console.warn(商品不存在: id , id); return; } // 判断数据类型确保价格能参与计算 if (typeof goodsItem.price ! number || isNaN(goodsItem.price)) { console.error(商品价格不合法:, goodsItem.price); return; } const existed this.items.find(function (i) { return String(i.id) String(id); }); if (existed) { // 已有同款商品数量加一且不超过库存 this.changeQty(existed.id, 1); } else { this.items.push({ id: goodsItem.id, name: goodsItem.name, price: goodsItem.price, stock: goodsItem.stock, qty: 1, img: goodsItem.img }); this.save(); this.render(); } };这里面用到了两处 javascript 判断数据类型的操作String(g.id) String(id) 是为了把可能从>// js/main.js 搜索防抖 let searchTimer null; $(#search-input).on(input, function () { clearTimeout(searchTimer); const keyword $(this).val().trim(); // 300ms 内没有新输入才真正执行筛选 searchTimer setTimeout(function () { const filtered window.GOODS.filter(function (item) { return item.name.toLowerCase().includes(keyword.toLowerCase()) || item.desc.toLowerCase().includes(keyword.toLowerCase()); }); renderGoods(filtered); }, 300); });核心参数是 300ms 的延时。clearTimeout 先把上一次未执行的定时器清掉这样用户连续输入时只有最后一次输入停住 300ms 后才会触发筛选。include 匹配用 toLowerCase 把双方都转成小写避免“手机”和“手机壳”这类大小写不一致的问题。筛选函数 renderGoods(filtered) 和首次渲染用的是同一个渲染函数只是入参不同这是项目里复用性最好的一个设计点。如果想把筛选结果为空的情况也做掉在 renderGoods 里判断数组长度为空就渲染一条“没有找到相关商品”的提示这个细节放进作业里是加分项。5. 期末作业避坑指南五个必踩的坑与解法5.1 脚本加载顺序$ is not defined 与页面白屏现象打开 index.html 控制台报Uncaught ReferenceError: $ is not defined整个页面白屏什么都渲染不出来。原因script 标签的加载顺序不对。jQuery 放在 main.js 之后加载浏览器按顺序执行脚本main.js 里的 $(function(){...}) 在运行时 jQuery 还没定义。期末作业最常见的翻车就是把顺序写成 data.js、main.js、jquery.min.js。解决把 jquery.min.js 放到最前面并且放在 之前如果用了外链 CDN本地演示没网一样会挂。我建议直接把 jquery.min.js 下载到 js/vendor 目录里不依赖外网。检查顺序时记住一句话谁先被用到谁就先加载。5.2 动态生成的按钮点不动事件绑定时机失效现象页面首次加载时静态写死在 HTML 里的按钮能点商品卡片里动态生成的“加入购物车”按钮怎么点都没反应。原因动态按钮是在文档加载完成后才被 append 进 DOM 的直接用 $(window).ready 里绑定 .click 只能绑到当时已经存在的元素。解决使用事件委托把监听挂在 document 或不变的容器上如$(document).on(click, .btn-add, fn)。这个坑基本是 javascript 事件机制里最经典的考题答辩时被问到的概率非常高。想展示你对原理的理解可以补一句“事件冒泡到 document 时jQuery 内部会重新匹配 target 是否符合选择器。”5.3 刷新后购物车变成 [object Object]直接把对象塞进了 localStorage现象加购成功刷新页面后购物车列表显示“[object Object]”控制台不报错。原因localStorage 只能存字符串直接 setItem(cart, this.items) 时 JavaScript 会把数组自动转成字符串“[object Object]” 就是数组 toString 之后的结果。解决存储前必须 JSON.stringify读取时 JSON.parse。这是本地存储使用里最泛滥的错写上localStorage.setItem(cart, JSON.stringify(this.items))一行就能解决。5.4 总价出现 0.30000000000000004浮点精度不做展示层处理现象一件商品单价 0.1买三件合计显示 0.30000000000000004。原因计算机用二进制存浮点数0.1 本身就无法精确表达乘 3 后误差累积。这不是 jQuery 的问题是 javascript 保留两位小数操作使用不当的典型场景。解决展示层统一用 total.toFixed(2)参与计算的变量保持原始数字。注意不要在 price 上先 toFixed 再乘 qty因为 toFixed 返回字符串字符串乘法会重新转数字绕了一圈误差还在展示层仍然可能出问题。正确的做法是“先算完再格式化”。5.5 图片挂掉相对路径与 index.html 的层级关系现象本地双击打开 index.html部分商品图片显示为裂图但在编辑器里直接打开图片就能看。原因图片路径写成img srcimg/goods1.jpg是没问题的问题通常出在把整个项目放在子目录里运行时路径层级不对或者有的人把 index.html 单独拷出去图片和 css 都不见了。解决推荐直接以项目根目录为相对路径基准确保 img/ 和 css/ 跟 index.html 同级。如果图片路径写的是../img/...说明你很可能把页面放在了两层目录下容易出问题。这里没有玄学一句“保持文件结构不变”就能讲清楚。6. 交付前加分的验证技巧控制台自查与交互打磨作业写完了别急着交先花十分钟做一遍自检。打开控制台切到 Console 面板刷新页面正常状态下应该没有任何红色报错最多允许一条黄色警告。然后手动操作一遍搜索一个不存在的词、把商品加到库存上限、清空购物车后重新加购、刷新页面确认购物车还在。这四条过一遍最常见的运行时问题基本都能暴露。控制台里还有一个容易被忽略的技巧直接在 Console 执行Object.keys(window.GOODS[0])可以查看商品对象的所有字段确认 id、price、stock 这些关键字段的类型对不对。看见 price 是 string 类型立刻去 data.js 里把引号去掉看见 stock 是 undefined所有库存边界判断都会失效。这一步做完交互细节再打磨一下空购物车的提示文案、结算按钮对空购物车的禁用状态、以及搜索无结果时的占位文字这三处是老师演示时大概率会点到的位置。从那以后我每次写完前端项目都会强制自己走一遍“控制台无报错 关键流程手动点一遍 刷新后状态检查”的验收流程这套习惯就是从拆这个购物网站项目时养成的。你能把这个项目的代码一行行讲清楚比堆十个特效在答辩中都管用。希望帮到你。本文还有配套的精品资源点击获取