Javascript开发是否预留退路?

亚泰汉子

亚泰汉子

2016-02-20 01:03

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

早上收到一封邮件,问的正好是我一直如哽在喉的事情:

对于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的使用而影响到内容,让机器无法抓取和识别。

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

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

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

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

(本文来源于图老师网站,更多请访问http://m.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,如果用户愿意选择网页形式来访问,就会被强加很多个性化内容,桀桀桀,喜欢的继续看,不喜欢的关掉页面离开,这也算双向选择罢

展开更多 50%)
分享

猜你喜欢

Javascript开发是否预留退路?

Web开发
Javascript开发是否预留退路?

JavaScript库开发规则

Web开发
JavaScript库开发规则

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

mvc模式分离javascript开发

Web开发
mvc模式分离javascript开发

用jQuery简化JavaScript开发分析

Web开发
用jQuery简化JavaScript开发分析

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript表单验证是否为中文

Web开发
JavaScript表单验证是否为中文

你是否理解JavaScript的执行顺序?

Web开发
你是否理解JavaScript的执行顺序?

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

设定Word 2000文本的“纸张大小”方法

设定Word 2000文本的“纸张大小”方法

免费资源:7个效果非常棒的jQuery 3D效果插件

免费资源:7个效果非常棒的jQuery 3D效果插件
下拉加载更多内容 ↓