去年帮一个学弟看他的网页JavaScript作业，打开文件那一刻我愣住了——一个电商网站首页，设计商品图片全是作业灰色方块，点击"加入购物车"弹出的网页是`alert('成功')`，然后页面刷新，设计购物车清空。作业他跟我说："能跑就行呗。网页"

能跑和能用是设计两回事。老师布置JavaScript网页设计作业，作业不是网页让你证明自己会写`document.write`，而是设计看你有没有理解浏览器里那套交互逻辑。

DOM操作不是作业背API，是网页理解页面结构

很多作业卡在第一步：拿到元素。我见过有人用`document.getElementsByClassName('btn')[0]`，设计也见过直接用`document.querySelector('.btn')`。作业两种都能用，但后者更灵活，尤其是当你需要选`ul li:nth-child(2) a`这种复杂路径时。

真正的问题不在选择器。有次看一份作业，代码里写了几十个`getElementById`，每个按钮单独绑事件。我问他：如果商品从10个变成100个，你打算复制粘贴100遍？他沉默了。

事件委托是绕不过去的坎。把监听器挂在父容器上，利用`event.target`判断点击来源，代码量直接砍半。这个思路老师上课可能一笔带过，但作业里用不用，一眼就能看出水平。

异步请求别再用XMLHttpRequest了

fetch API现在浏览器支持率超过95%，没理由还抱着XHR不放。但作业里常见的问题是：请求发出去了，数据没回来就渲染页面，结果一片空白。

有个女生的作业让我印象很深。她做的是天气查询，输入城市名，调API显示温度。代码里`fetch`后面跟了`.then`，但没写`async/await`，错误处理只写了`console.log`。我问她：如果用户输入"abc"这种不存在的城市呢？页面会怎样？她试了一下，控制台报错，页面卡在加载动画上转圈。

后来加了`try/catch`，错误时显示"未找到该城市"，加载动画用`finally`关掉。她说："原来还要管这些。"对，作业的分数往往就藏在这些"原来"里。

本地存储不只是localStorage.setItem

购物车作业十有八九要用本地存储。存进去容易，取出来的时候类型转换经常被忽略。`localStorage`只能存字符串，存对象要先`JSON.stringify`，取的时候`JSON.parse`。有人存了数组，取出来直接当数组用，结果`cart.length`返回的是字符串长度。

还有更隐蔽的坑：多个标签页同时打开，一个页面改了购物车，另一个页面不知道。`storage`事件可以监听这种变化，但作业里几乎没人用。我当年也没用，后来做项目被坑了才记住。

写作业和写项目的区别

作业可以只考虑正常流程，项目必须考虑异常。作业可以硬编码数据，项目要对接真实接口。作业交上去就结束了，项目上线才是开始。

但这不是说作业可以随便写。你写的每一行代码都在训练你的思维习惯。习惯用事件委托的人，做项目时不会写出几百个重复监听器。习惯写错误处理的人，上线后不会被用户骂"点了没反应"。

那个学弟后来重写了作业。商品列表用`map`生成，事件委托挂在`ul`上，购物车数据用`localStorage`存，取出来先判断类型。代码从300行缩到180行，功能反而更完整。他跟我说："好像有点明白为什么要学这个了。"

JavaScript网页设计作业，说到底就是让你在浏览器里搭一个能用的东西。能跑是底线，能用是及格，能改是优秀。下次写作业的时候，不妨多问自己一句：如果用户不按我想的方式操作，页面会怎样？

(责任编辑：热点)