《JavaScript设计与开发新思维》——2.4 关键的开发方法

简介: 渐进增强(progressive enhancement)在2003年第一次提出,直至今天仍在采用。渐进增强站到了功能退化的反面:功能退化从想要得到的功能开始,在完整功能不受支持的情况下提供备用内容,而渐进增强从最小功能的一个基线开始,然后在此基础上改进—增强用户体验—添加仅在客户支持时有效的“丰富”功能(图2.7)。

本节书摘来自异步社区《JavaScript设计与开发新思维》一书中的第2章,第2.4节,作者:【美】Larry Ullman著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.4 关键的开发方法

在查看代码之前,应该详细地讨论3种开发方法。你选择的方法(可能同时采用不止一种方法)将会影响所编写的代码,更重要的是,影响最终用户的体验。

2.4.1 功能退化
script元素为任何HTML页面添加JavaScript,与此相反的是noscript元素,它用于页面在浏览器不支持JavaScript时提供一个替代信息或者替代内容:

<noscript>Your browser does not support JavaScript!</noscript>
如果JavaScript没有启用,将向用户显示在标记之间放置的任何内容。

统计数字各不相同,但是一般来说,访问网站的大约1%~3%客户出于某种原因无法执行任何JavaScript,这些客户包括:

  • 有意在Web浏览器中禁用JavaScript的人;
  • 运行noscript的人,这个Firefox扩展实现了白名单方法,允许在指定网站的页面上运行JavaScript;
  • 使用读屏器(也就是视力受损者的辅助设备)的人;
  • 使用移动或者游戏设备浏览器的人;
  • 通过不支持 JavaScript 的控制台软件(如命令行程序 wget 或curl)连接的人;
  • 不是实际的人,而是机器人—例如搜索引擎。

这些情况在整个市场上所占比例很小,但是如何处理这些情况完全由你决定,对此有3种方法:

(1)假装无JavaScript客户不存在;

(2)应用功能退化;

(3)应用渐进增强。

在这里我不打算告诉你如何开展工作,但是第一种选择不好,特别是现在,移动和游戏设备的使用不断增多,更不用说还有酝酿中的新技术。可是,许多开发人员并没有认识到有些用户无法执行JavaScript。在他们开发的网站上,最终的结果可能是个损坏的页面,没有关于错误的任何解释。诚然,网站有正当的理由需要JavaScript,但是无JavaScript的客户必须得到有关这一要求的通知。如果对这一可能性没有准备,最终用户会觉得网站不合格,对Web开发人员(和/或拥有这一网站的公司)也有不良的影响。

多年以来,第二种选择是最常见的反应,现在仍然偶尔能看到。功能退化是这样一种策略:你按照自己的意愿设计一个功能完整的网站,然后为无法使用你设计的网站的设备提供一个备用界面,或者表示需要JavaScript的一条信息。听起来很熟悉?是的,这实际上就是noscript标记所完成的工作。功能退化比起简单地忽略问题是个很大的改进,两者之间主要的差别是功能退化让用户知道问题的存在以及相应的解决方案(也就是启用JavaScript)。但是还有一种更好的办法—渐进增强。

2.4.2 渐进增强
渐进增强(progressive enhancement)在2003年第一次提出,直至今天仍在采用。渐进增强站到了功能退化的反面:功能退化从想要得到的功能开始,在完整功能不受支持的情况下提供备用内容,而渐进增强从最小功能的一个基线开始,然后在此基础上改进—增强用户体验—添加仅在客户支持时有效的“丰富”功能(图2.7)。渐进增强不仅确保所有客户都能够使用你的网站,我个人还发现,使用这一方法进行开发更加简单。

screenshot

渐进增强不仅涉及JavaScript,还涉及CSS。描述渐进增强这一主题需要整本书的篇幅(例如Designing with Progressive Enhancement,New Riders,2010),我无法在这里花太多的篇幅,但是对这一处理过程的理解比你想象的要简单。

从一开始,你就应该使用与标准兼容、结构良好、清晰的语义HTML。语义HTML使用HTML标记,清晰地表示内容的意图或者意义,而不是内容表现的方式。例如,你应该停止使用i标记来表示斜体文本,而代之以表示强调的 em。谈到样式,对于语义HTML,所有表现都转移到所属的CSS中。在没有一个标记能表示页面组件意义的情况下,则使用类。实际上,常用的语义类如footer、header和nav都是HTML5中新元素的灵感来源。

在创建一个好的HTML页面之后,应该对其进行验证,确认它没有问题并且不会使浏览器进入怪癖模式。你还应该测试HTML和基本的CSS在所针对的浏览器中是否都能正确显示。完成了这一工作之后,对于能够处理更现代化特性的客户,你就可以改进他们的体验。作为例子,我们回到第1章中讨论过的注册表单。

该表单以及所有表单的基线功能是:当表单提交时,将表单数据发送给一个服务器端脚本。服务器端脚本执行验证并相应作出反应。对于注册表单,这意味着如果数据没有错误,用户被登记到数据库中,否则向用户报告这些错误,使其可以更正并且重新提交表单(参见图1.3)。创建包含表单的语义HTML页面之后,渐进增强过程的下一步是创建处理表单的服务器端脚本,这一步完成了基线功能,并且不包含任何JavaScript(或者高端的CSS)。在这点上,我认为这一方法较为简单:因为你首先确认简单的过程可行,然后再试验更复杂的方法(例如Ajax,它的调试要更难一些)。

最后一步是应用CSS和JavaScript添加更高级的功能和设计层次,但是这些层次需要浏览器的支持。当然,本书的焦点就是JavaScript。为了确定浏览器是否支持一个特性,现代的JavaScript程序员使用第1章中已经提到过的对象检测(object detection)。这一方法创建可靠的跨浏览器JavaScript,不用考虑浏览器的类型或者版本。而且,对象检测有着杰出的简洁性:检查浏览器是否支持特性X,如果支持,则使用特性X。你将在接下来的几页中看到具体的实现。

通过这一过程,适用的浏览器将得到渐进增强,网页也不会遗漏任何客户。这绝对是“鱼和熊掌兼得”的解决方案!

2.4.3 无干扰的JavaScript
在进入实际的代码之前(早该如此,对吗?),还要介绍一个概念;无干扰(Unobtrusive)JavaScript。回到过去的日子,JavaScript常常不受限制地散布在HTML中,例如,一个链接被单击时可能调用一个函数:

<a href="javascript:createWindow();">A Link</a>
或者,表单提交时调用不同的函数:

<form action="somepage.php" method="post"
onsubmit="return validateForm();">

上述的两个代码示例现在仍然能正常工作,但是这种方法已经不受欢迎,这也是很合理的。首先,HTML页面中嵌入的JavaScript使得整个页面的代码更难以阅读,也更难维护。逐行浏览HTML来编辑嵌入的JavaScript非常不切实际。其次,嵌入式JavaScript在3个方面违反了渐进增强的原则:

带有嵌入JavaScript的HTML显然不只有语义含义;
它假定客户能够处理JavaScript;
无法使用嵌入JavaScript应用可靠的对象检测技术。
因此,现代JavaScript的规则很简单:在script标记之间或者外部文件中放置所有的JavaScript。

注意: 避免在HTML中使用空链接(指向#或JavaScript函数调用的链接),因为这对于没有JavaScript能力的浏览器将会失败。

相关文章
|
6天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
102 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
21天前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
83 58
|
4月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
86 1
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
349 62
|
2月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
64 13
|
3月前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
89 13
|
4月前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
4月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
4月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!

热门文章

最新文章