简介基于JavaScript实现的1号店京东1号店电商网站前端完整代码围绕购物车增删与金额计算、注册账号实时校验、修改密码二次确认、商品添加收藏等核心业务展开涵盖DOM操作、事件监听、Ajax异步请求等实战技巧适合前端初学者、电商项目实训或课程设计参考。压缩包含347个文件以189张jpg产品图、99张png界面图和34张gif动态演示为主配合7个js脚本、6个css样式表与6个html页面从主页、分类列表页、商品详情页到注册页构成完整站点结构整体约3.04MB体积轻量便于本地调试。已有3423人学习使用代码目录层级清楚js与css分离图片素材按页面归类。解压后可直接对照商品详情页中的轮播、规格切换、评论加载以及注册页中的密码强度验证、二次确认逻辑逐一梳理电商前端功能实现流程附带的.idea工程配置可直接导入IDE运行便于快速查看效果并在此基础上拓展二次开发是一份结构完整、上手门槛低的电商前端实战源码。1. 先给“1号店完整代码”定位你要找的不是一个ZIP而是一套前端交互骨架搜索“1号店完整代码”的人大多刚接到商城类项目想研究电商页面怎么写或被布置了“仿照一号店做一套页面”的任务。这个词背后真正要找的不是某个能下载的压缩包而是电商网站里反复出现的那套 JS 交互逻辑商品列表渲染、购物车加减、地区三级联动、登录态持久化。把这套逻辑写明白比存一堆静态 HTML 有价值得多。网上流传的“完整代码”多半是爬虫抓下来的页面快照文件能打开但接口是线上地址图片来自其他域名JS 被压缩成一行本地根本跑不起来。与其在压缩代码里考古不如按一线做法从页面交互反推模块用原生 JS 把骨架写出来。这套骨架不依赖框架改得动、能复用也敢放进真实项目适合会基础 JS、想快速落地商城交互的前端初中级读者。2. 把“完整代码”拆成模块清单先搞清要写哪些JS再动手2.1 为什么网上很多“1号店源码”跑不起来说句实在话1号店现在隶属京东零售体系它的前端资源不会以开源项目的形式发布。你下载到的所谓源码绝大多数是爬虫工具抓出来的页面快照。这类资源有几个共同特征HTML 能打开但图片和 CSS 引用的是线上域名JS 要么缺失要么被打包压缩成一行变量名全是 a、b、c页面里请求的接口地址是线上接口你在本地打开时要么跨域要么 404。这就是“照着代码敲依然跑不出效果”的真相不一定是你姿势不对而是那份资源本身就不具备运行条件。我碰到这种下载包一般直接丢一边只做一件事把页面打开用浏览器开发者工具看它的 DOM 结构和交互效果然后反推它需要哪些 JS 模块。这个方法比对着压缩代码去还原靠谱得多。接下来这张模块清单就是我从电商网站典型页面里反推出来的最小集合也适用于“仿一号店”这类需求。2.2 从1号店典型页面反推JS模块清单模块出现位置核心职责建议函数名全局导航所有页面登录态展示、购物车角标、搜索入口initHeader()商品列表首页/搜索页拉取数据、渲染卡片、筛选、排序renderList()地区联动结算页/地址管理省市区三级下拉loadRegion()购物车购物车页加减商品、勾选、金额计算updateCart()结算提交结算页地址校验、价格核对、下单submitOrder()搜索联想顶部搜索框防抖请求、下拉提示initSearch()需要注意这六个模块不是 1号店 官方文档里的划分而是电商类页面几乎都会遇到的交互点。拿到一个“完整代码”需求时先按这张表对一遍哪些页面需要哪些可以砍。比如只做静态展示地区联动和结算提交可以直接删掉如果客户要求“像一号店一样有购物车”那至少要把商品列表、购物车、持久化这三块做出来。模块先理清代码才不会越写越乱。2.3 最小可跑通的商品列表渲染模板字符串 数据数组先给一个最小骨架不依赖任何框架浏览器直接打开就能看效果。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title一号店风格商品列表骨架/title /head body div idapp/div script // 模拟接口返回的商品数据price 字段单位是“分” const productData [ { id: 1001, name: 进口牛奶 1L, price: 1890, tag: 爆款 }, { id: 1002, name: 坚果礼盒 750g, price: 9900, tag: 满减 } ]; // 把分转换成带两位小数的元 function formatPrice(p) { return (p / 100).toFixed(2); } // 渲染商品列表到指定容器 function renderList(list, containerId) { const container document.getElementById(containerId); container.innerHTML list.map(item div classproduct-card>select idprovince onchangeonProvinceChange(this.value)/select select idcity onchangeonCityChange(this.value)/select select iddistrict/select// 省市区数据实际项目可从接口拉取 const regionData { 浙江省: { 杭州市: [西湖区, 滨江区, 余杭区], 宁波市: [海曙区, 鄞州区] }, 江苏省: { 南京市: [玄武区, 鼓楼区], 苏州市: [姑苏区, 吴中区] } }; const provinceSelect document.getElementById(province); const citySelect document.getElementById(city); const districtSelect document.getElementById(district); let selected { province: , city: , district: }; function fillSelect(selectEl, options) { selectEl.innerHTML option value请选择/option options.map(v option value${v}${v}/option).join(); } function initRegion() { fillSelect(provinceSelect, Object.keys(regionData)); } function onProvinceChange(province) { const cities Object.keys(regionData[province] || {}); selected.province province; selected.city ; selected.district ; fillSelect(citySelect, cities); fillSelect(districtSelect, []); } function onCityChange(city) { const districts (regionData[selected.province] || {})[city] || []; selected.city city; selected.district ; fillSelect(districtSelect, districts); } districtSelect.addEventListener(change, function () { selected.district this.value; }); initRegion();fillSelect 统一处理下拉填充第一项固定是“请选择”避免用户没选就提交造成空值。onProvinceChange 在省变化时把市和区全部重置这一步特别重要否则用户从“浙江省”切到“江苏省”后下拉框里还留着杭州的区提交的数据就会对不上。selected 对象是当前选择的全量状态提交时只需要读一个对象不需要再去 DOM 里逐个找元素取值。注意select 元素的 change 事件只在真实用户操作时触发代码里给 select.value 赋值不会自动触发联动。所以联动的每一级变化都必须显式调用下一级的填充函数不能依赖事件驱动。3.2 购物车加减与金额计算事件委托与浮点处理购物车是电商 JS 里最容易把代码写乱的部分。常见的新手写法是每个按钮一个 onclick每行商品一个 id加减、删除、勾选各写一套函数。这种写法在商品数量固定时没问题一旦列表是接口动态加载的动态生成的按钮就经常绑不上事件。更稳的做法是事件委托。div classcart-list div classcart-item>// 购物车数据模型price 单位依然是“分” const cart { items: [ { id: 1001, name: 进口牛奶, qty: 2, price: 1890 } ] }; function calcTotal(cart) { return cart.items.reduce((sum, item) sum item.price * item.qty, 0); } function renderCart() { const listEl document.querySelector(.cart-list); listEl.innerHTML cart.items.map(item div classcart-item>const CART_KEY yd_cart_v1; function saveCart(cart) { try { localStorage.setItem(CART_KEY, JSON.stringify(cart)); } catch (e) { console.warn(购物车保存失败已降级为内存存储, e); } } function loadCart() { try { const raw localStorage.getItem(CART_KEY); return raw ? JSON.parse(raw) : { items: [] }; } catch (e) { // 数据被篡改或跨版本时宁可清空也不要让页面崩 return { items: [] }; } }CART_KEY 带了 v1 后缀这是版本号。以后购物车结构要是增加字段直接换成 yd_cart_v2代码里做一次迁移逻辑就行不会因为旧数据缺字段导致渲染报错。saveCart 里的 try/catch 不是摆设隐私模式、Safari 旧版本、存储空间写满都会让 setItem 抛异常捕获后至少降级成内存存储页面还能继续用。loadCart 里 JSON.parse 也可能失败原因是旧版本留下了脏数据这里返回空购物车比渲染时崩溃合适得多。登录态 token 也可以用同样的模式key 叫 auth_token读取时检查过期时间字段超过有效期就当未登录。这样刷新页面后头部导航能正确显示“未登录”或“欢迎回来”而不是因为内存变量丢失而闪烁一下登录框。4. 把零散JS组织成能维护的工程公共方法、Mock接口与加载顺序4.1 公共方法文件 common.js请求、存储、URL参数解析把零散函数收拢到一个全局对象里页面文件只调用这个对象维护成本会低很多。我习惯命名为 yd$避免和第三方库冲突。// common.js window.yd$ { // 统一 GET 请求业务码非 0 时抛出错误 get(url, params) { const query Object.keys(params || {}) .map(k ${k}${encodeURIComponent(params[k])}) .join(); return fetch(query ? url ? query : url) .then(res res.json()) .then(json { if (json.code ! 0) { throw new Error(json.msg || 请求业务失败); } return json.data; }); }, // 读 URL 参数支持默认值 query(name, defaultValue) { const val new URLSearchParams(location.search).get(name); return val null ? defaultValue : val; }, // 简单防抖用于搜索联想、滚动加载 debounce(fn, wait 300) { let timer null; return function (...args) { clearTimeout(timer); timer setTimeout(() fn.apply(this, args), wait); }; } };这里最值得说的是 get 方法里对业务码的判断。后端接口约定 code 为 0 表示成功这个 code 不是 HTTP 状态码。很多人只看 HTTP 200 就把 res.json() 当数据用结果页面渲染 undefined就是因为漏了业务码这层判断。encodeURIComponent 对参数值做编码搜索词带中文或特殊符号时不会把 URL 拼坏。query 方法用 URLSearchParams 解析地址栏参数商品详情页、搜索列表页取参数时不用到处写正则。debounce 是搜索联想必备300 毫秒等待时间比较通用滚动加载这种高频事件可以再写一个 throttle原理类似但改成固定间隔执行。4.2 用 Mock 接口把前后端并行起来“完整代码”类项目最尴尬的一点是页面写完了后端接口还没出。常见做法是直接在代码里写死假数据联调时再改成 fetch这样要改很多处。更稳的做法是开发环境拦截 fetch 请求返回约定好的 mock 数据。// mock.js const MOCK { /api/products: { code: 0, data: { list: [{ id: 1001, name: 测试商品, price: 1990, tag: mock }] } } }; if (location.hostname localhost || location.hostname 127.0.0.1) { const originalFetch window.fetch; window.fetch function (url, options) { const mockData MOCK[url]; if (mockData) { return Promise.resolve({ json: () Promise.resolve(mockData) }); } return originalFetch(url, options); }; }mock 只在本机开发环境下启用部署到服务器后 location.hostname 不再是 localhost自然走真实接口。拦截的粒度是 fetch 的 url 字符串所以需要 mock 的接口必须写全路径。mock 数据结构要和接口文档保持一致比如都长成 { code, data } 这样后面切换真实接口时不需要改页面代码。如果接口文档还没定你也可以先用 mock 定结构再让后端按这个结构实现这种前端驱动的方式在电商小团队里很常见。4.3 模块化与加载顺序避免全局函数互相找不到没有用打包器的原生 JS 项目模块化靠的是 script 标签顺序。我一般这样组织目录project/ ├── index.html ├── css/style.css └── js/ ├── common.js ├── mock.js ├── region.js ├── cart.js ├── page-home.js └── init.js页面底部这样引用script srcjs/common.js/script script srcjs/mock.js/script script srcjs/region.js/script script srcjs/cart.js/script script srcjs/page-home.js/script script srcjs/init.js/script公共方法最先加载因为所有页面文件都依赖 window.yd$。mock.js 在业务文件之前加载保证业务代码里的 fetch 调用的已经是包装后的版本。region.js 和 cart.js 是模块文件每个文件用 IIFE 包住内部变量只暴露初始化函数比如 window.initRegion、window.initCart。init.js 最后执行在里面统一调用 DOMContentLoaded 后的入口函数这样即使页面文件加载顺序错了至少错误发生在入口调用时堆栈更容易定位。有人会说原生 JS 不如 Vue 工程化好维护。但现实是很多“仿一号店”需求不允许引入框架要么是部署环境不兼容 ES Module要么是客户要求纯静态页面。这种情况下上面的分层方式虽然朴素却是不容易翻车的一套。5. 避坑电商JS代码最常见的5个翻车现场5.1 动态渲染的DOM点不了事件绑定跑到了渲染之前现象商品列表能正常显示但点击“加入购物车”按钮没有任何反应控制台也不报错。原因代码先执行了 addEventListener后执行 renderList。renderList 用 innerHTML 重写了列表区域之前绑定的按钮元素被销毁新元素身上没有监听器。解决不要给动态按钮单独绑事件改用事件委托把监听器挂在列表容器上。// 正确写法事件委托只绑定一次到容器 document.getElementById(app).addEventListener(click, function (e) { const btn e.target.closest(.add-cart); if (!btn) return; const id Number(btn.closest(.product-card).dataset.id); // 这里按 id 把商品加进购物车 addToCart(id); });closest 会从 e.target 往上找元素直到匹配选择器。这样无论 innerHTML 怎么重绘监听器都稳稳挂在容器上前提是容器本身不能被销毁。如果你用的是表格、列表这种会整体刷新的结构事件委托基本是唯一不需要在渲染后重新绑事件的办法。5.2 金额计算出现 0.30000000000000004现象商品单价 0.1 元买 3 件页面上合计显示 ¥0.30000000000000004。原因JavaScript 的浮点运算遵循 IEEE 7540.1 和 0.2 这类小数在二进制里是无限循环相加后出现尾差。解决不要在数据层用小数。价格统一用“分”存整数计算完再 toFixed(2)。如果接口返回的是“19.90”字符串用 Math.round(parseFloat(19.90) * 100) 转成整数再参与计算。function toCent(priceStr) { return Math.round(parseFloat(priceStr) * 100); } // 示例把“19.90”转成 1990 const priceInCent toCent(19.90);注意不能直接 parseFloat(19.90) * 100 取整结果可能是 1989.9999999999998必须先用 Math.round 兜底。这个转化函数建议放到 common.js 里全项目统一使用。展示时再走 (priceInCent / 100).toFixed(2)保证每个页面看到的金额格式一致。5.3 三级联动刷新后回显失败现象编辑地址页面后端返回了省市区三个值页面刷新后省下拉有值市和区下拉还是空的。原因回显时只给省 select 赋了 value没有触发 onchange所以市级数据没有被填充。前面说过代码里给 select.value 赋值不会触发 change 事件。解决回显时不要依赖事件直接调用联动函数。function echoRegion(province, city, district) { fillSelect(provinceSelect, Object.keys(regionData)); provinceSelect.value province; onProvinceChange(province); // 手动触发填充市 citySelect.value city; onCityChange(city); // 手动触发填充区 districtSelect.value district; selected.province province; selected.city city; selected.district district; }顺序不能乱先渲染省列表再赋值省再调 onProvinceChange 生成市列表赋值市调用 onCityChange 生成区列表最后赋值区。只要顺序对了刷新后就能完整回显。很多踩坑案例都是只写了第一步和最后一步把中间联动函数漏了。5.4 购物车数据在页面刷新后丢失现象加入购物车后刷新浏览器购物车角标归零再进购物车页列表也空了。原因购物车只存在内存变量里刷新导致 JS 重新执行变量重置。解决用 localStorage 持久化并且每次修改后立即保存。关键不是只写一个 saveCart而是把它和所有修改购物车的操作绑定。我习惯把所有改动封装成 addToCart、updateQty、removeItem 三个函数每个函数内部修改完数据都调 saveCart。function addToCart(id) { const item cart.items.find(i i.id id); if (item) { item.qty; } else { // 实际项目里 productMap 来自商品列表数据 cart.items.push({ id, qty: 1, price: productMap[id].price }); } saveCart(cart); renderCart(); }修改数据的入口统一持久化才不会漏。同时要记住loadCart 要放在页面初始化最早的位置渲染函数读取的是 loadCart 的结果而不是一个空的 cart 初始值。如果你在渲染后才调用 loadCart画面会闪一下空购物车体验很差。5.5 接口报错被用户看到裸提示现象接口挂了时页面弹出“TypeError: Cannot read properties of undefined (reading list)”用户以为网站坏了。原因fetch 拿到响应后直接假定结构完整没有校验业务码也没有 try/catch。解决在 common.js 的 get 方法里统一处理非 0 业务码调用方用 catch 显示友好提示。window.yd$.get(/api/products, { page: 1 }) .then(data renderList(data.list, app)) .catch(err { document.getElementById(app).innerHTML p商品加载失败请稍后重试/p; console.error(err); // 细节留在控制台 });错误对象仍然打印到控制台方便开发排查但页面展示的是用户能理解的话。还可以加一个全局错误监听 window.onerror把未捕获异常统一收集上报对排查这种多文件项目特别有用。多文件项目里错误往往发生在某个页面文件内部全局监听能让你第一时间定位到是哪个文件哪一行。6. 验证与优化用这套代码时我最后会做的三件事代码写完不着急发版先把三件事做了。第一件打开开发者工具的 Network 面板模拟 Slow 3G 网络刷新页面看首屏请求数。电商页面的常见死法不是 JS 逻辑错而是图片和脚本请求太多白屏时间太长。我一般会把首屏控制在 20 个请求以内超过就考虑给商品图加懒加载、把非首屏模块的 script 标签挪到页面底部。这个习惯是从一次线上事故学来的页面功能全对但用户手机网络一慢首屏要等三秒钟数据再完整也没人愿意等。第二件检查事件监听器是否重复绑定。用 DevTools 的 Elements 面板选中列表容器切换到 Event Listeners 子面板如果同一个 click 事件下面挂了多个相同的函数说明渲染函数里重复调用了 addEventListener。正确做法是只绑一次或者用事件委托统一挂在父容器上。这个检查我每次重构完都会做因为“点了一下执行两次”这个问题很隐蔽用户不一定能说清但数据统计时会出现重复加购记录。第三件写一个冒烟测试函数把最核心的链路串起来跑一遍加购、改数量、刷新页面、再读购物车。这个测试不需要引入测试框架一个 console 函数就够。function smokeTest() { const bag loadCart(); bag.items.push({ id: 999, qty: 1, price: 100 }); saveCart(bag); const reloaded loadCart(); const ok reloaded.items.length bag.items.length; console.log(ok ? 购物车持久化联调通过 : 购物车持久化联调失败); return ok; } smokeTest();然后还有几个业务向优化搜索联想防抖 300ms滚动加载节流 200ms金额展示统一走一个 formatPrice 入口。这些不是炫技是真实项目里被逼出来的习惯。我自己最开始写商城前端时总想找一份“1号店完整代码”直接套用后来发现别人打包好的资源接口、图片域名、鉴权方式全都不通用真正能带走的只有交互思路。现在我做这类项目会先按上面的模块清单拆页面再逐个实现 JS 交互最后一轮轮验证加优化。这套流程走下来踩坑的次数少了很多交付也快。希望帮到你。本文还有配套的精品资源点击获取