- 浏览: 114868 次
- 性别:
- 来自: 湖南
文章分类
最新评论
-
一步一个天涯:
good.
tomcat配置热启动,我试过有用的方式 -
yuechen323:
哥们!!看了你博客的大部分文章,写的都非常的通俗易懂,谢谢~ ...
我在java中碰到的设计模式 -
悲剧了:
...
jstl
Javascript使用上的几点考虑
关键字: js、对于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是否开启,网站应至少提供最基本的功能,而不是直接使用户无法访问。
发表评论
-
主题:IT工作检讨书
2010-09-16 17:44 1014由于上周请假的事情,被上级要求写一份检讨书且不少于100字,并 ... -
这里有自己收集整理的关于SVN的东西,1——SVN基本使用手册 2——Subversion 错误信息一览表.3——svn的一些常见问题
2010-08-28 09:29 1259这里我会把我自己整理的东西都贴出来,后面我还会把文档供给大家下 ... -
主题:别为大公司卖命
2010-08-28 09:27 7421.大公司最大的困扰,就是无法准确测量每个员工的贡献。它会 ... -
Javascript——悟透JavaScript
2010-08-27 16:20 967Javascript——悟透JavaS ... -
一个关于得到数字个数的问题?
2010-08-26 10:46 738一个关于得到数字个数的问题? 关键字: java应 ... -
电信拨号器
2010-08-26 10:38 935电信拨号器 关键字: 电信拨号程序、swing ... -
关于RSS的聚合---OPML
2010-08-26 10:34 1649关于RSS的聚合---OPML 关键字: rss,o ... -
hibernate集合映射inverse和cascade详解 (转载)
2010-08-26 10:31 736hibernate集合映射inverse和cascad ... -
互联网高性能系统构建思路
2010-08-26 10:30 667互联网高性能系统构 ... -
程序员修炼之七杀秘技
2010-08-26 10:30 750程序员修炼之七杀秘技 关键字: 程序员修炼、java ... -
Java多线程编程
2010-08-26 10:26 667Java多线程编程 关键 ... -
浅析Hibernate下数据批量处理方法
2010-08-26 10:25 773浅析Hibernate下数据批量处理方法 关键字: ... -
高级程序员如何应对职场压力?
2010-08-26 10:24 686高级程序员如何应对职场压力? 关键字: 应用职场压力 ... -
认识Web网站的性能测试工具
2010-08-26 10:23 901认识Web网站的性能测试工具 关键字: web网站、 ... -
WebServices秘诀:设计SOA
2010-08-26 10:20 622WebServices秘诀:设计SOA 关键字: w ... -
XFire 入门
2010-08-26 10:20 704XFire 入门 关键字: xfire入门 【 ... -
HttpClient入门
2010-08-26 10:19 735HttpClient入门 关键字: httpclie ... -
JavaScript——延迟加载技术
2010-08-26 10:15 896JavaScript——延迟加载技术 文章分类:We ... -
经典算法——鸡尾酒排序(冒泡算法改良)
2010-08-26 10:12 827经典算法——鸡尾酒 ... -
封闭开发是为何?
2010-08-26 10:00 2509封闭开发是为何? 加班 ...
相关推荐
ACCP6.0的课程相对于ACCP5.0增加了DB2关系型数据库系统,DB2具有很好的网络支持能力,每个子系统可以连接十几万个分布式用户,可同时激活上千个活动线程,对大型分布式应用系统尤为适用。DB2具有较好的可伸缩性,...
getUTCDay 方法 使用全球标准时间(UTC)返回 Date 对象的星期几的值。 getUTCFullYear 方法 使用全球标准时间(UTC)返回 Date 对象的年份。 getUTCHours 方法 使用全球标准时间(UTC)返回Date 对象的小时数。 ...
内容概要: 这段代码定义了一个包含标题、段落、...在实际使用这段代码时,开发者需要注意以下几点: 考虑到不同浏览器和设备的兼容性,进行充分的测试。 考虑到用户体验,确保动画效果不会过于干扰内容的阅读和理解。
javascript的官方文档 这些方便实用的信息将帮助您了解 JScript 的各个部分。 在“字母顺序的关键字列表”中,可以找到按字母顺序列出的所有 JScript 语言的主题。如果只需要查看某个主题(例如对象),则有对该主题...
事件会执行几次?先执行冒泡还是捕获? Day384:JavaScript 中如何实现一个类?怎么实例化这个类? Day383:说下 React 的 useEffect、useCallback、useMemo Day382:说一下 setTimeout 和 setInterval 的区别,包含...
完成项目后,我解决了分针无法提前推进的问题,从而使秒针越过了12点就跳过了几秒钟。 分针也向后旋转90度。 我为此创建了一个修复程序,但是当我在Safari中对其进行检查时,我发现它在那里不起作用! 那是因为...
要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他...
react 脚手架初始化,社区比较火的有cra(create-react-app)和umi,从以下几点进行对比最终选择了比较贴合项目的umi。 最终考虑到一个项目需要快速搭建需要许多成型的插件支持所以采用了umi。antd真香!!!@...
FlexBuzz FlexBuzz 是 FizzBuzz 算法的高性能纯 Javascript 实现,应该考虑替代 fizzbuzz 包。 FlexBuzz 的最初开发是由赞助的。 非常感谢他们!用法使用运行 flexbuzz.js: $ node flexbuzz.js [limit]其中可选...
考虑以下几点: 保龄球游戏由 10 帧组成 在每一帧中,玩家可以投掷一两次,实际数量取决于罢工和备用 A Strike = 第一轮击倒所有 10 个销钉 备用 = 所有 10 个销钉在一个框架的两卷内都被击倒 一次击球的奖励是接...
是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到...是的,它非常有意思,但是在你高兴之前让我申明几点:1.这不会是全功能的库。我们有很多方法要写,但是它不是jQuery。我们将会做足工作来让你感受到在你
最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节。是,这也没错,jQuery对...
如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题。...Javascript里的事件系统是我想到的第一个突破点。为什么会是javascript的事件系统呢?我们都知道web前端包含三个技术:html、css和j
如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。 写得很烂。可能大家看不出...
关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同、用户自行设置等问题)。 2.要考虑网络传输的耗时。 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader...
在创建新的请求请求之前,请考虑以下几点 应该从develop to develop分支发出pull请求,以便可以对其进行正确测试,并且不能直接在master上下载。 master分支应该是最新发布的tag的副本,没有任何尚未发布的其他新...
使用 AES 加密算法时需要注意以下几点: 密钥长度:AES 支持不同的密钥长度,包括 128、192 和 256 位。通常情况下,密钥长度越长,加密强度越高,但同时也会增加加密和解密的时间和成本。在选择密钥长度时需要综合...