Javascript开发是否预留退路?

2016-02-20 01:03 4 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的Javascript开发是否预留退路?懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)早上收到一封邮件,问的正好是我一直如哽在喉的事情:

对于web开发中的预留退路问题,我一直犹豫不决。在安全方面,自然是不能完全相信JavaScript,这点是确定的。但在用户体验方面,是否真的需要处处预留退路,照顾那些不支持JS或者对JS支持不好的用户吗?而UED工程师们又一直在说,不预留退路会惹恼数量不少的用户,但却从没有人提起具体会是多少用户、多少比例。不知道YY大神手里有这方面的数据吗?记得YY您在建立Limbo混沌海的时候,就选择了不预留退路的方式,不知当初又是出于什么原因这样考虑的呢?非常想听听您对预留退路问题的看法,期待您的回信。

这种设计观念,或者说原则,不管它叫什么名字,比如预留退路/平稳退化(Graceful Degradation),渐进增强(Progressive Enhancement),不唐突的javascript(Unobtrusive JavaScript)从UE的角度来说是非常重要的,它的重要性不仅仅来自有多少比例的用户不开启javascript支持,而是因为如今访问web的方式正在变的越来越丰富多样,平板电脑(Tablet PC),上网本(netbook),掌上电脑(UMPC/MID),手机,iphone/ipod touch,这些平台有完全不同的性能,屏幕尺寸,浏览器,和操作方式,它们对javascript的支持也可能不一致(比如我以前抱怨过iphone的差别)。很多严肃的网站还需要考虑到可访问性(Accessibility),要保证能支持屏幕阅读器之类的设备,让那些有视觉缺陷的用户也可以无障碍的使用。此外还有语义网方面的要求,随着web2.0带来的海量信息,互联网也在向一台超级计算机的方向发展,需要靠网络本身去处理网络上的信息,而不是靠人的肉眼去一张网页一张网页的识别,现在的网页不仅仅是供人阅读,同样也需要面向机器,所以不能因为javascript的使用而影响到内容,让机器无法抓取和识别。

不过,以上这些观念有两方面的局限性:

第一,它们仅仅适用于传统的,文档式的网页,互联网的原始形态,只是内容的组织形式和传播手段,对于多数网页来说,内容才是根本,JS只是锦上添花,或者说是调料,最重要的是保证内容的完整语义,可访问性,以及适应过去/现在/未来的多种平台的能力。但是,除了文档类型的网页,现在也开始兴起大量的web应用,它们是在线的服务,也是在线的软件,对它们来说,浏览器是一个容器,网页是一种界面呈现方式,数据是异步获取的,频繁变化的,而且是细粒度的(比如并非一篇完整的文章,而是一若干来自数据库的字段),虽然同样以内容为中心,但是在这个语境里,内容是指纯粹的数据,而并非整块整块的HTML,一旦缺少了界面的交互功能,缺少了JS程序的支持,数据根本就无法呈现,也就根本不具备访问这些应用的条件,对于这种类型的网页来说,预留退路并非是不可侵犯的信条。

更多情况下,网页是复合的,会同时包含文档和软件应用的特点,于是就应该有选择的采纳那些适用于自己的原则,比如把JS和CSS与内容有效的分离,兼容多种平台,保证核心内容能被搜索引擎抓取,等等。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

有一个很好的例子是土豆网的播放页,这是在土豆网全站当中,最重要同时也是web应用特征所占比例最大的页面之一,javascript和flashplayer对它来说是必不可少的基础运行环境,所以你可以看到它的html设计跟其他页面有很大差别:

script标签出现在html顶部在其他网页里,我们习惯把css放在顶部,js放在底部,让页面先呈现,之后再附加行为,但是在播放页面里,播放器是最重要的内容,播放器加载的速度是最关键的用户体验。 HTML里会包含JS代码只有一处,就是TUI.player.load,理由同样是为了保证播放器加载速度这个核心用户体验,不得不祭出document.write这种非常不提倡的必杀技来写入flash元素 有大量内容通过AJAX获取比如评论,还有侧栏里的某些模块。因为它们是分离的数据,并非主要内容 没有使用正常的流式布局player和toolbar都是脱离文档的独立区域,采用绝对定位 侧栏上的视频截图并没有把原始文件地址放在src属性里延迟加载,如果不拖动滚动条,很多图片就不会无意义的下载

但是在很多方面同样也要做到Unobtrusive:

对于核心内容,比如视频信息,作者信息,都是遵循文档式网页的设计原则,对搜索引擎友好 在豆单播放页里,播放器下面的界面列表虽然是一个界面元素,但是也应该包含在文档的语义中,所以采用html的UL/LI来实现

第二个局限性是:这些原则早晚会过时。以前WaSP成员们千辛万苦推广这些观念的时候,互联网上到处都是惨不忍睹的网页,建立标准和规范,进行观念的革新,这些需求胜过了对技术的应用,而现在web标准早已普及,web应用需要进一步发展。以前Douglas Crockford,PPK在传道的时候,国外的网站还必须支持ie5.5甚至5.0之类的浏览器,恶劣的环境让web设计者和开发者们必须自我约束JS的使用,避免形成门槛。而现在,ie6在国外的占有率已经开始低于firefox(20%),很多网站已经开始放弃对ie6的支持,google和yahoo也在引导用户替换ie6。刚才我提到过,通过各种移动设备访问web的用户正在迅速增多,而这些设备对JS的支持不一致,但是这就像桌面电脑上的发展过程一样,同样是一个暂时现象,随着webkit变成iphone,android,palm pre这些新平台的统一标准,Mozilla也在积极把XUL技术应用到移动平台,环境的变化其实比桌面电脑要快的多。

我认为Graceful Degradation,Progressive Enhancement,Unobtrusive JavaScript这类东西都不适合过度的鼓吹,它们只是基础概念,是在特定时期特定环境中形成的经验和指导,而不应该是束缚前端开发人员和产品设计人员的教条,实际上,这些保守的观念来自技术的局限,而技术的局限不是我们逃避使用技术的理由,相反,我们可以仍然使用技术来打破这些局限,我们需要的是像ie7.js,excanvas.js,jquery.js这样的解决方案,而不是在开发中畏首畏尾,把每个前端开发者都教唆成原教旨主义者(上次我们公司的小麦对我说:前端开发都有这种倾向我要说这是历史遗留的伤痕,将在世代中流传下去)

最后回复两个邮件里的问题

关于用户的统计数据,土豆网是有的,可以想象由于多数用户比较大众和小白,IE6的比例相当高,比较冏的是,腾讯TT的比例也很高,等同于Firefox,我必须说它那种跟QQ绑定在一起,经常无意中启动,启动之后就设置为默认浏览器的套路,确实很强大在普通用户当中,默认是强大的力量,默认的通常就是最熟悉的,最熟悉的就是最好的不过,统计数据有时并不能真正反映出用户数量,比如Opera用户在你的统计数据里只占到0.01%,你就要思考一下究竟是Opera用户确实只有这么多,还是你的网站对Opera支持太差,导致人家都不来

关于我的blog其实我很早就计划重做这个blog了,现在的版本是一年半前的,从技术上来说很幼稚,我都懒得优化和修补了但是,即使重做,我仍然不会把别人的用户体验放在第一位,就像侧栏里说明的那样:优先满足个人喜好。blog有很多类型,有的是个人媒体,有的是文集,有的是日记,有的是个性化空间,而我想要的blog是个人信息聚合,除了满足阅读的需求,必然还要包含大量个性化内容,也就是说,用户首先是我,其次才是读者和我的好友,而对于阅读者来说,浏览方式不止一种,比如我自己就更习惯用google reader来阅读blog,如果用户愿意选择网页形式来访问,就会被强加很多个性化内容,桀桀桀,喜欢的继续看,不喜欢的关掉页面离开,这也算双向选择罢

来源:https://www.tulaoshi.com/n/20160220/1633132.html

延伸阅读
标签: Web开发
2008年,对于JavaScript来说是非常振奋人心的一年,很多高人加入到JavaScript和Web开发的阵营中来,浏览器厂商在技术上互相竞争,渲染引擎和JavaScript解释引擎的性能不断提高,越来越多的人开发出各种基于JavaScript的神奇演示,让更多的人了解JavaScript的魅力所在。这篇是一个小结,也预示着一个更加辉煌的2009的开始。 原文标题 :200...
标签: Web开发
原文:http://www.quirksmode.org/js/support.html 原文作者:Peter-Paul Koch 以下为对原文的翻译: 判断对象存在的方法 很快你就会注意到,JavaScript的部分功能在部分浏览器中无效。如果你要使用一些脚本的高级特性,你首先要检查浏览器是否支持要使用的对象,本文具体说明判断的正确方法。 通过判断浏览器的...
标签: Web开发
如何用javascript判断录入的日期是否合法 function IsValidYear(psYear) {     var sYear = new String(psYear);     if(psYear==null)     {         return false;     }     if(isNaN(psYear)==true)   &nb...
标签: Web开发
判断访问者的浏览器是否支持JavaScript和Cookies 许多网站需要客户端做许多复杂的工作,比如:用客户端 JavaScript 进行数据合法性校验,这需要客户浏览器的JavaScript enabled;使用 Session 变量记录身份等信息,需要浏览器 Cookies enabled。因此,有必要确定用户浏览器中的这些选项被打开。在我的网站中,我使用了一串简洁的代码实...
对Web标准的修订做得越多, Web开发的正确方向越值得怀疑。InfoWorld的Neil McAllister对Web开发的现状与未来做了很好的思考。最近,ECMAScript 4标准被弃用,统一为ECMAScript 3.1,如果任ECMAScript 4发展,Javascript将带来巨大变化,Adobe的Ed Rowe告诉作者,大部分人对Javascript一类语言存在障碍,这是为什么Adobe当初加入ECMAScript 4阵...

经验教程

345

收藏

73
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部