Web2.0 Forms 和“可降解的”Javascript

Web2.0, WebDev @ 21 November 2006, “10 Comments”

我一直认为网页标准的普及和支持是Web2.0发展中的非常重要的推动力量之一,一是CSS让网页设计和维护更容易,二是Javascript让用户互动更友好,这使得更简洁更友好的web 2.0界面更流行更受欢迎。

同时,越来越多的控制转移到了用户手中,比如Firefox的NoScript扩展让用户可以关闭或者开启所有或者某些网页上的Javascript。这就使得一些网站的页面在Javascript被关闭的时候,不能或者部分不能使用。例子:在豆瓣上对东西评价打分的界面在关闭Javascript后就失效了,似乎也没有其它手段可以做评价和打分。

这是不是有点吹毛求疵呢?那再看看Amazon上类似页面的处理,用户可以对一件商品做评价,和标记自己是否拥有,界面如下所示:

amazon page with javascript enabled

也是使用了Ajax,不需要重新载入页面;把Javascript关掉,刷新页面,由于Javascript被关闭,页面此处则显示一个“Rate this item”的链接,链接到的页面出现以下这个界面,一个简单的“web 1.0”的表单:

amazon page with javascript disabled

这就是“可降解的”(Degradable)Javascript的应用的例子,在浏览器不支持或者不完全支持Javascript的时候,仍然能够正常展现和提供页面所有功能。虽然用户体验不如Javascript开启的时候好,但用户仍然能够完成他想要做的事情。

需要关闭Javascript么?有些情况下,是的,比如出于速度和安全的考虑,比如使用不支持或者完全支持Javascript的浏览器(不,不只是Lynx,还有移动终端上)。更重要的是,不能因为用户选择关闭Javascript,就不让他们使用到某些功能。尊重用户的选择,这应该更是web2.0的精神和力量的所在吧。

那么,既要支持javascript被关闭的情况,又要有Ajax,会不会增加开发的难度呢?Jeremy Keith, DOM Scripting的作者,不这么认为,在他的书里也提到Progressive enhancement(渐进增强)的开发过程和Hijax的手段,简单地说,就是

  1. 首先以传统的或者说web1.0的方式设计和实现网页;
  2. 在1的基础上,添加Javascript实现Ajax,优化用户互动;

因为即使使用Ajax,所有处理还是在服务器端完成的。更多关于progressive enhancement和Degradable Javascript可参考:

10 Responses to “Web2.0 Forms 和“可降解的”Javascript”

  1. Red Sox Says:

    我倒是觉得,象amazon那样支持no-javascript的功能,有当然最好,但是如果没有,也没太大影响。

    因为现在太多的功能,太多的网站,都已经必须要javascript了。几年以前的hotmail,如果没有enable javascript,就已经不能登录进去了。(嘿,我刚才又试了一下亲爱的gmail。不出意外,没有javascript它只有一个错误信息,连登陆页都没有)浏览器本身也在不断发展,以前没有的功能现在也加上去了,以后没准连disable javascript都没有了。

    当然progressive enhancement的设计还是需要的,这样可以把客户端和服务器端的开发分开。还有就是一些和安全方面相关的功能,需要保证没有javascript也不要造成安全漏洞。

    网页标准的普及是个大问题。比如现在firefox支持的canvas,因为IE不支持,所以基本没法用,头疼的很。不知道什么时候各浏览器才能达成最终的一致。

  2. Yining Says:

    Hi Redsox,

    Javascript关闭的时候Gmail可以用,登录后会自动进入“Basic HTML” mode。

    各浏览器是没有都完全遵守网页标准,但是都遵守的标准的交集已经越来越大了,再加上各种Hacks(主要针对IE)已经足够让开发者做到页面能够在不同浏览器下保持基本的显示和互动的统一。

    我现在已经要求自己和程序员在开发页面的时候先不做Ajax,而是传统的页面GET和POST,过阵子在这小结一下。

  3. Red Sox Says:

    是是,google是可以用basic mode浏览,而且样子还不错。昨天是我没看清楚。这里要顺便complain一下google的那个页面。google是崇尚简单,但是那个页面太简单了,简单的象一个错误信息,所以我昨天都没看。:(

  4. 我的维基[7tm.cn] Says:

    javascript是个好东东

  5. xyb Says:

    如果你试试用手机上的opera之类浏览器浏览豆瓣,就会看到不需要ajax功能也能评分的页面。从实际情况来说,用IE或者firefox等现代浏览器上网,而又把javascript关掉的用户恐怕万中也无一吧?如果简单的关闭现代浏览器的javascript功能,以此制造一种极其特殊的环境来测试网站的可用性,感觉不是特别公平,而且意义也不大。不过amazon的这种设计确实很不错,以后豆瓣也可以这样来做 :)

  6. Yining Says:

    xyb, 举个例子:一些大企业比如银行的IT安全政策是电脑上员工帐号里浏览器是禁用javascript的,而且浏览器安全设置员工自己是不能改动。

    其实,我要说的主要是建议网站开发从传统的页面POST/GET开始的progressive enhancement。

  7. xyb Says:

    哦,是这样子,谢谢Yining的讲解。

  8. albertlee Says:

    got it
    豆瓣确实考虑到了降解 ajax,但做的还较为粗略,评分这里将进一步改进。

  9. Yining Says:

    谢谢两位doubaners(doubanians?)的关注 :)

  10. summer Says:

    非常注意细节,这就是用户体验。

Leave a Reply