购物网站代码

去年帮朋友搭一个卖手冲咖啡豆的小站，他开口第一句是网站“能不能三天上线”。我打开VS Code，代码新建了一个index.html，购物写了不到四十行，网站首页就能跑了。代码购物网站这东西，购物剥开那些花哨的网站UI框架，核心骨架其实薄得很。代码

先看最原始的购物结构。一个商品列表页，网站本质就是代码循环输出数据。假设后端给你一个JSON数组，购物前端用原生JS渲染，网站代码长这样：

const products = [ {  id: 1,代码 name: '耶加雪菲', price: 88, stock: 12 }, {  id: 2, name: '曼特宁', price: 75, stock: 0 }, {  id: 3, name: '瑰夏', price: 198, stock: 3 } ]; const list = document.getElementById('product-list'); products.forEach(p => {  const card = document.createElement('div'); card.className = 'card'; card.innerHTML = ` <h3>${ p.name}</h3> <p>¥${ p.price}</p> <button ${ p.stock === 0 ? 'disabled' : ''}> ${ p.stock === 0 ? '缺货' : '加入购物车'} </button> `; list.appendChild(card); });

这段代码有个细节值得盯一眼：p.stock === 0的判断直接写在了模板字符串里。很多人会把它拆成if-else，但内联三元运算符在列表渲染里更顺手，少写好几行。当然，如果业务逻辑复杂到要判断“预售”“限购”“会员价”，就该抽成独立函数了。

购物车才是真正见功底的地方。我见过一个开源项目，购物车状态用localStorage存，每次增减商品都先读出来、改完再写回去。代码没错，但用户点“+1”的时候页面会闪一下——因为整个列表重新渲染了。后来我把那部分改成只更新数量节点的textContent，闪烁消失，响应快了一个量级。这种微优化在代码层面不起眼，但用户手指能感觉到。

结算流程的代码反而简单得让人意外。一个fetch把购物车数组POST给后端，后端返回订单号和支付链接，前端跳转过去就完事。真正的复杂度全在服务端：库存扣减的原子性、优惠券的叠加规则、支付回调的幂等处理。前端代码在这里更像一个传令兵，把用户意图打包送走，然后等结果。

有个坑我踩过两次。第一次是价格计算，前端用toFixed(2)把19.99 * 3算成59.97，看着没问题。但后端用整数分存储，返回5997，前端再除以100，偶尔会出现59.96999999999999这种鬼东西。后来统一改成前端只做展示，所有金额计算走接口。第二次是商品图片的loading="lazy"属性，加上之后首屏快了40%，但轮播图里的图片因为容器高度没定，懒加载触发时机不对，图片一直不显示。把轮播图排除在懒加载之外才解决。

现在回头看，购物网站代码的难点从来不是“写出来”，而是“写对”。一个addEventListener绑在按钮上，用户快速双击就会发两次请求。加个disabled状态是最简单的防抖，但很多人会忘记在finally里恢复它。代码量不大，细节密度极高。我那个朋友最后上线用了五天，多出来的两天全花在改这些“小问题”上。值。