内容摘要：去年帮学弟看他的Web课程设计，打开压缩包一看，index.html里塞了800多行，CSS全写在style标签里，JavaScript函数名从aaa排到aaf。我问他为什么这样写，他说能跑就行。这大

去年帮学弟看他的程设Web课程设计，打开压缩包一看，计源index.html里塞了800多行，代码CSS全写在style标签里，程设JavaScript函数名从aaa排到aaf。计源我问他为什么这样写，代码他说能跑就行。程设这大概是计源很多Web课设的真实状态：交上去能拿学分，但代码本身经不起看。代码

课程设计源代码和平时写的程设小demo不一样。demo可以随手写，计源课设得有结构。代码我见过一个做得不错的程设案例，学生用HTML5的计源语义化标签把页面骨架搭得很清楚——header、nav、代码main、aside、footer各司其职。打开他的源码，第一眼就能看懂页面分几块。反观用div堆出来的页面，满屏class="box1"、class="box2"，改一个间距要翻半天。

CSS的组织方式更能看出水平差距。有人把所有样式写在一个文件里，从头写到尾，选择器越写越深，最后出现.main .content .list .item .title span这种五层嵌套。后期想调整个颜色，得用Ctrl+F搜半天。比较合理的做法是按模块拆分，或者至少用注释分段——导航区、内容区、侧边栏、页脚，每段开头标清楚。我自己的习惯是变量先定义好，主色、辅色、间距值集中在顶部，改主题的时候只动那几个值。

JavaScript部分最容易出问题。课设常见的功能无非是表单验证、轮播图、选项卡切换、数据增删改查。有些代码把事件绑定写在HTML标签里，onclick="doSomething()"直接嵌在元素上。这种写法放在2005年没问题，现在看就是反面教材。用addEventListener分离结构、样式和行为，代码可维护性完全不一样。还有个细节：变量命名。用a、b、c或者data1、data2做变量名，过一周自己都看不懂。换成searchInput、submitBtn、userList这种，读代码跟读句子差不多。

数据交互这块，很多课设直接用假数据写死在JS里。如果只是展示静态页面，问题不大。但稍微完整一点的课设，至少应该模拟一下异步请求。用fetch或者XMLHttpRequest去读一个本地JSON文件，把渲染逻辑和数据处理分开。我见过一个学生用setTimeout模拟接口延迟，加载时显示骨架屏，数据到了再替换。这个处理放在课设里算加分项，老师一看就知道你理解了前后端分离的基本思路。

文件目录结构也值得说。有人把所有文件扔在根目录，html、css、js、图片混在一起。稍微整理一下：css文件夹放样式表，js文件夹放脚本，images放图片资源，index.html放在最外层。如果用了第三方库，建个lib或者vendor目录单独放。这个习惯养成了，以后做项目不会乱。

代码注释不用多，但关键位置得有。比如一个复杂的布局计算，或者一段特殊的兼容处理，写一行注释说明为什么这么写。我看过一份课设，轮播图切换的缓动函数旁边写了句“这里用requestAnimationFrame替代setInterval，避免切后台时动画堆积”，就这一句话，能看出作者是真琢磨过。

最后说版本控制。不少学生交课设是直接打包发邮件，改一版存一个文件夹，最后桌面上一排“最终版”“最终版2”“最终版不改了”。用Git管一下，哪怕只是本地仓库，提交记录清清楚楚。答辩的时候老师问某处改动，你能直接diff出来，比翻文件夹有说服力。

课设源代码不用写得多高深，但至少做到自己回头看能看懂，别人接手能改得动。这比多实现两个花哨功能实在得多。