`

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是否开启,网站应至少提供最基本的功能,而不是直接使用户无法访问。

分享到:
评论

相关推荐

    javascript上下无缝图片滚动

    要实现这样的效果,主要涉及以下几个关键知识点: 1. **DOM操作**:JavaScript 可以通过操作 Document Object Model (DOM) 来改变网页内容。在图片滚动效果中,需要获取图片元素,调整它们的位置和可见性。 2. **...

    JavaScript算24点小游戏

    综上所述,实现JavaScript算24点小游戏涉及到众多JavaScript基础知识及编程技巧,包括事件处理、DOM操作、数组算法、递归、数学逻辑、错误处理、性能优化、用户体验设计、模块化编程以及测试调试等。通过这个项目,...

    javascript添加背景水印

    要实现JavaScript背景水印功能,我们需要考虑以下几个关键点: 1. **创建元素**:首先,需要在HTML文档的部分创建一个或多个元素(如),作为水印的载体。这些元素的CSS样式将被设置为透明度较低,角度倾斜,以及...

    JavaScript上一张下一张效果

    7. **响应式设计**:考虑网页在不同设备和屏幕尺寸上的显示效果,确保JavaScript代码兼容各种视口大小,如使用媒体查询进行适配。 8. **性能优化**:为了提高页面加载速度,可以考虑预加载下一幅图片,或者利用懒...

    javascript游戏24点源码

    8. **性能优化**:对于大规模的计算,如24点问题,可能需要考虑性能优化,例如使用缓存避免重复计算,或者利用JavaScript的异步特性来改善用户体验。 在阅读和学习这个源码时,你可以重点关注上述几个方面,同时...

    JavaScript五子棋

    下面我们将深入探讨这个项目涉及的关键技术点。 首先,JavaScript作为主要的编程语言,它是网页动态交互的核心。在五子棋游戏中,JavaScript负责处理用户输入、游戏逻辑计算、棋盘状态更新以及界面渲染等一系列任务...

    javascript日历

    6. **兼容性**:考虑到不同浏览器对JavaScript和CSS的支持程度,开发者需要确保日历控件在主流浏览器上都能正常工作,这可能需要使用polyfills或者条件语句来处理兼容性问题。 7. **扩展性与模块化**:如果日历控件...

    编写javascript插件,来扩展已有的JavaScript功能.zip

    在编写JavaScript插件时,需要注意以下几点: 1. **封装性**:确保插件代码结构清晰,易于理解和维护。 2. **可扩展性**:设计插件时应考虑未来可能的功能扩展。 3. **兼容性**:考虑到不同浏览器和JavaScript环境的...

    教你一天玩转JavaScript(三)——使用JavaScript完成图片轮播的效果

    在本教程中,我们将深入探讨如何使用JavaScript来创建一个动态且引人入胜的图片轮播效果。JavaScript作为客户端编程语言,为网页增加...动手实践是学习JavaScript最好的方式,祝你在探索JavaScript的道路上不断进步!

    JavaScript函数式编程.pdf

    JavaScript函数式编程的知识点非常丰富,涉及很多方面的内容,下面将详细介绍几个核心知识点。 1. 函数式编程基础 函数式编程(Functional Programming)是一种编程范式,它将计算视为数学函数的评估,并且避免...

    RSA 使用java 和javascript进行加解密

    虽然RSA提供了一种强大的加密方式,但在实际应用中还需注意以下几点: - 长度限制:RSA加密后的数据长度受公钥大小限制,通常不适用于加密大量数据,更适合加密对称密钥或数据摘要。 - 私钥保护:私钥必须在服务器上...

    javascript实现rsa加解密

    在PHP和Java之间互用RSA加解密时,需要注意以下几点: - **密钥兼容性**:确保生成的密钥对在不同语言环境下能够被正确解析和使用。 - **编码一致性**:在加密和解密过程中,保持一致的字符编码,例如UTF-8。 - **...

    原生态javascript 右边栏

    在创建原生态JavaScript的右边栏时,开发者可能会涉及以下几个关键知识点: 1. **DOM操作**:JavaScript可以用来动态地修改HTML文档对象模型(DOM),创建、修改或删除DOM元素。在右边栏的实现中,这可能包括创建一...

    几个最简单的JavaScript dropdown menu

    下面我们将详细探讨如何使用JavaScript创建简单下拉菜单及其相关知识点。 1. HTML结构: 创建一个下拉菜单首先需要定义HTML结构,通常包含一个`<ul>`元素作为主菜单容器,每个菜单项由`<li>`元素表示,子菜单则嵌套...

    完美javascript日历大集合

    在JavaScript中,创建一个日历组件通常涉及到以下几个关键知识点: 1. **DOM操作**:JavaScript通过DOM(Document Object Model)接口与HTML文档交互,用于创建、查询、修改和删除页面元素。在日历组件中,这可能...

    Javascript打印乘法表

    使用JavaScript实现乘法表,我们可以学习到以下几个关键知识点: 1. **变量与数据类型**:在JavaScript中,首先我们需要定义变量来存储乘法表的范围(如1到10)。可以使用`let`或`var`关键字来声明变量,例如`let ...

    翻页展示JavaScript特效

    在实现翻页展示JavaScript特效时,通常会涉及到以下几个关键技术点: 1. **DOM操作**:Document Object Model (DOM) 是HTML和XML文档的结构化表示,JavaScript通过DOM API可以访问和修改文档的各个元素。在翻页效果...

    JavaScript资料

    4. **浏览器兼容性**:开发者需要考虑不同浏览器对JavaScript的解析差异,通常使用jQuery等库来处理兼容问题。 5. **框架和库**:JavaScript有众多流行的框架和库,如React、Vue、Angular,它们简化了开发过程并提高...

    javascript-tree-menu

    在实现Tree Menu时,需要注意以下几点: 1. **数据结构**:首先,你需要一个表示菜单层次的数据结构,通常是一个嵌套的对象或数组。每个菜单项包含文本、链接、以及子菜单(如果有的话)。 2. **DOM操作**:使用...

Global site tag (gtag.js) - Google Analytics