正确做法是用<picture>+srcset按设备像素比和视口宽度自动选图，input[type="number"]设min/max/step防误输，localStorage存取购物车需初始化默认值并实时保存，表单提交应绑定submit事件并preventDefault。
用 <picture> + srcset 加载不同尺寸的农产品图
手机看草莓特写要高清，桌面看整页九宫格又不能拉伸模糊——硬塞一张 4K 图只会拖慢首屏。直接写 <img src="strawberry.jpg"> 是最常见也最伤体验的做法。
正确做法是让浏览器按设备像素比和视口宽度自动选图：
<picture> <source media="(max-width: 768px)" srcset="strawberry-400w.jpg 1x, strawberry-800w.jpg 2x"> <source media="(min-width: 769px)" srcset="strawberry-800w.jpg, strawberry-1200w.jpg 2x"> <img src="strawberry-800w.jpg" alt="新鲜草莓"> </picture>
-
<source>的media控制断点，srcset中的2x对应高 DPI 屏幕（如 iPhone、MacBook） - 必须保留
<img>作为降级兜底，否则不支持<picture>的老浏览器会空白 - 图片命名建议带宽信息（如
-400w）便于识别，避免用@2x这种 iOS 专属习惯
用 input[type="number"] 实现“限购 5 件”的下单数量控制
用户手动输 999 然后提交，后端才校验超限？这已经晚了。前端限制不是防恶意，而是防误操作+减少无效请求。
别只靠 JS 绑定 change 事件监听，原生属性更稳：
立即学习“前端免费学习笔记（深入）”；
<input type="number"
min="1"
max="5"
value="1"
step="1"
name="quantity"
aria-label="购买数量，最多5件">-
min/max会禁用上下箭头越界、阻止键盘输入非法值（Chrome/Firefox 均生效） - 必须加
step="1"，否则 Safari 允许输小数（比如 1.5 斤苹果？不合理） - 注意：iOS Safari 的
type="number"会唤起数字键盘但不强制校验，仍需 JS 补充blur时修正（例如输 6 自动截为 5）
用 localStorage 缓存购物车，但避开“页面刷新后清空”陷阱
用户加了 3 款蔬菜进购物车，切到详情页再返回，购物车空了？大概率是每次初始化都重置了数组，而不是读取已有数据。
关键不在存，而在“怎么读”和“何时存”：
const cart = JSON.parse(localStorage.getItem('farm-cart') || '[]'); // 注意默认值是字符串'[]'- 必须用
|| '[]'，不能写|| []，否则JSON.parse(undefined)报错 - 修改后立即存：
localStorage.setItem('farm-cart', JSON.stringify(cart))，不要等提交才存——关掉标签页就丢了 - 避免存 DOM 节点或函数，只存纯对象/数组；农产品字段建议固定为
{id, name, price, quantity}，别混入imgUrl等冗余字段
用 button[type="submit"] 触发表单，而非 onclick 调用 JS 提交
点击“立即下单”没反应？查控制台发现 Uncaught TypeError: submitOrder is not defined——因为把 JS 函数名写错了，或者 script 加载顺序不对。这种错误本可避免。
表单提交逻辑应绑定在语义化行为上：
<form id="order-form"> <!-- 地址、支付方式等字段 --> <button type="submit">立即下单</button> </form>
- JS 里用
document.getElementById('order-form').addEventListener('submit', handleSubmit) - 这样即使 JS 加载失败或报错，按钮依然能触发表单默认行为（比如跳转到 PHP 处理页）
- 务必在事件回调中调用
event.preventDefault()，否则页面会刷新——这是新手最常漏的一行
农产品页面的交互链路短但容错要求高：图得清、数得准、车得留、单得发出去。每个环节的“默认行为”和“降级路径”比炫技更重要。
