Javascript使用上的几点考虑

Javascript使用上的几点考虑

关键字: js、对于javascript的认知

来源：http://dingyu.me/blog/posts/view/when-no-javascript

其实Javascript的本意是增强客户端的用户体验，但如果使用不当，反倒会适得其反。比如以下几种情况：

滥用Ajax

最典型的，就是Chinaren的校友录。校友录目前的设计很奇怪：先载入HTML后，再使用Javascript把同学们的留言载入并填充到HTML里。我不清楚其用意何在，但每次打开留言页面都绝对不是一次愉快的体验，一是有时候因为网速的原因，等半天只能看到页面布局而不见留言内容，哪怕我这次来只想看看最新的两条留言也不行；二是如此大范围的DOM修改，再加上页面上原有的乱七八糟的元素，经常搞得Firefox响应变慢。

其实像这种页面完全没必要使用Ajax来载入并填充数据，传统的设计不是挺好？我记得2000年前后Chinaren的设计非常清爽，大面积的色块、线条，整个页面的布局显得井然有序，当时还是我学习和临摹的对象之一。现在的Chinaren臃肿不堪，甚至多次直接导致Firefox崩溃。这还是我启用了Flashblock扩展的情况下，现在我要考虑是不是用Greasemonkey重新设计这个页面了。指望用NoScript访问Chinaren？想都别想。

上图是2001年时Chinaren首页的截图，是从我的光盘备份中翻出来的，你注意到那些不同层次的灰色背景和黑色线条了吗？我当时觉得这样的视觉设计非常棒－现在看起来也仍然不错。

链接到网页还是脚本？

先说校内。

在校内上处理好友申请时，我喜欢批量操作。所以按照习惯，按住CTRL（Mac上按Command）然后在一个个"接受"按钮上点过去，以便分别打开新的页面处理每一个申请。可打开了一大堆页面后发现，这个"接受"按钮分明是链接到Javascript脚本的，这个脚本的作用就是在原有页面上展开一个对话框，来让我填写详细的好友信息。于是我现在所面对的情况就是：数个Firefox标签页，每页中不同好友的详细信息对话框，我在第一个标签页中接受好友申请，第二个标签页中此申请还在，而我则一边操作一遍抱怨为何早不告诉我可以在同一个页面上操作。

今天校内发布了新的设计－他们也意识到这个问题并改掉了。目前的设计很棒，"接受"不再是一个链接，而是一个真正的按钮（input标签），上述问题也就不存在了。

当然这个问题相当普遍，如果要对那些有问题的设计做出改进的话，校内的做法值得借鉴。

再说开心。

这个网站本身如何我就不评论了，反正我是被它的垃圾邮件烦得不行，索性注册并试用了一下。登录进去的10秒之内我就感觉非常不爽，因为它的导航链接完全使用了Javascript。我不能打开多个标签页同时查看它导航里的各个内容，通过滥用Javascript，开心网完全剥夺了我的这一权利。我仍旧无法理解把好端端的、标准的、简单的HTML链接替换为Javascript的意义何在。

可访问性（accessibility）一塌糊涂

Web Accessibility Initiative（WAI）对可访问性的定义是"残疾人也应能够使用网站（Web accessibility means that people with disabilities can use the Web）"，其实这个定义本身是不够全面的，因为WAI自己也说可访问性也应包含对非残疾人的考虑，比如支持键盘操作以提升专家用户的使用效率等。

但目前的网站太过于依赖Javascript了，把Javascript一关，很多网站直接瘫痪。好的设计应该具有比较强的包容性，这有点类似于程序中的容错能力，无论CSS/Javascript是否开启，网站应至少提供最基本的功能，而不是直接使用户无法访问。