那么,人们可以做的一件事是使他们的网站变得更好呢?为了回答这个问题,让我们回到过去…
这一年是1998年,网络正在上升。为了尝试对www的建筑进行高级概述,蒂姆·伯纳斯·李(Tim Berners-Lee) -是的,蒂姆·伯纳斯·莱(Tim Berners-Lee) - 发表了一篇论文,称为“ 50,000英尺的网络建筑”。该报告涵盖了很多事情:内容谈判,语义网络,HTML,CSS和Cool Uris(不会改变)等。
在文章中,Berners-Lee也很早就指出了一些设计原则。这些原则之一是“权力最少的规则”。
权力最少的规则是这样的:
在设计计算机系统时,通常会在使用或多或少强大的语言发布信息,表达约束或解决某些问题之间面临选择。 […]“最小权力的规则”表明选择适合给定目的的最低强大语言。
我们的前端有三种主要语言:
语义描述内容
控制演示文稿和布局
增加互动和行为
权力最小的规则表明,在诉诸CSS之前,使用HTML尽可能多地尝试和做。一旦CSS不够,请抓住JavaScript,但前提是您确实必须这样做。
正如德里克·费瑟斯通(Derek Featherstone)很好地说的那样:
在Web前端堆栈中 - HTML,CSS,JS和ARIA-如果您可以使用堆栈中较低的解决方案解决问题,则应解决问题。它不那么脆弱,更万无一失,只是起作用。
?举起:这并不意味着您应该通过标记设置字体尺寸和颜色,这是我们过去在网络的“旧日”中做的事情。例子:Berners-Lee作品所涵盖的规则之一是形式和内容的分离。
自Berners-Lee发表该文章以来已经将近25年了。但是,不知何故,他发送的信息没有通过,许多开发人员(但不是全部)都没有意识到这一点。采取这种情况,不久前遇到了Drew Devault:
在过去的28年中,我的浏览器在提交HTML表格方面非常有能力,但是出于某种愚蠢的原因,一些开发人员决定在JavaScript中重新实现该表格,现在,如果不开放Dev Tools,我就无法支付电费。
可悲的是,这不是孤立的案例,而是一种熟悉的现象。我经常看到试图变得聪明或试图重新发明轮子的网站和图书馆 - 主要是通过向其投掷一堆JavaScript。在尝试这样做的尝试中,他们实现了与他们的目标完全相反的相反:这些网站的功能较低,易于访问范围,或者(甚至更糟糕的是)在某些条件下根本不起作用。
虽然表格可能是一个熟悉的例子,但在其他情况下,应用最小功率的规则会带来更好的结果:
在所有这些示例中,我们都可以将一些功能从上层移动到下层。 Berners-Lee会为我们感到骄傲。
通过在Web堆栈中选择较低的技术,更靠近Web平台的核心,我们还获得了内置弹性抵抗故障的好处。
JavaScript的失败很糟糕。一个未能加载或在过程中被弄脏的脚本,或一个错误的论点,您的整个应用程序可能不再起作用。如果像“无法读取属性x的属性x”这样的错误消息听起来很熟悉,那么您就会知道我在说什么。
另一方面,CSS非常擅长失败。即使您的样式表中有语法错误,其余的CSS仍然可以正常工作。与HTML相同。这些是宽容的语言。
如果您怀疑为什么要使用权力最小的规则,杰里米·基思(Jeremy Keith)在他的文章“评估技术”中为我们带来了答案:
我们倾向于问“它的工作状况如何?”,但是您应该真正问的是“它的失败程度?”
杰里米·基思(Jeremy Keith)
耐克网站是一个备受瞩目的网站。当您使用JavaScript禁用的JavaScript访问他们的网站时,您不会看到任何图像,也不会订购任何鞋子。
对JavaScript的这种过度依赖是不需要的,因为所有这些损坏的功能都可以使用前端堆栈中的技术较低构建:
☝️如果您想知道为什么有人会禁用JavaScript浏览网络:这通常不是他们的选择,而是一个正在干扰的外部因素。请参阅“每个人都有JavaScript,对吧?”为该主题进行很好的解释。
此类别中的罪犯甚至更糟糕的是Instagram和Twitter等备受瞩目的网站。没有JavaScript这些网站根本不起作用。他们要么给您警告,要么只是空白。因为什么时候需要JavaScript在网络上显示文本和图像?
它不一定像这个孤立的耐克示例那样糟糕。有时,当JavaScript失败时,较小的组件会拒绝工作。以选项卡式接口为例。即使您可以找到很多提供此功能的JavaScript库,启动器是您不需要JavaScript,因为HTML,CSS和ARIA本身已经有能力使您很远。
一旦拥有这些基层层,请使用JavaScript进一步改善体验。将JavaScript视为增强,而不是要求。
某些CSS功能可能也可能不可用的CSS功能也是如此。提供基本的样式,并在可用的功能(可使用@supports检测到)时增强您已经获得的结果。
这种方法被称为渐进式增强:随着更多功能可用,您可以添加功能,从而使结果更好,但没有太多的功能,以至于没有这些额外的繁荣就无法正常工作。
对于尚未支持特定新功能的浏览器,您可以尝试找到为浏览器提供该功能的多填充。
自网络早期以来,我们已经看到Web平台随着时间的推移获得了许多新功能。定义了新的HTML元素,JavaScript(语言)已经成熟,CSS获得了许多有力的新功能,用于构建布局,动画元素等。
几年前不可能的事情,只能通过像Flash这样的外部技术来完成浏览器本身。
一个经典的示例是引入jQuery的功能。十多年前,JQuery是进入一个项目的第一件事。今天,情况不再如此,因为网络平台已经赶上了,现在拥有document.clearselectorall(),element.ClassList等。您可以说jQuery是在多填充物被称为polyfills之前。
虽然jQuery可能是一个熟悉的例子,但网络还赶上了许多其他情况:
这里的中心主题是这些功能不再依赖于多填充或外部库,而是更靠近网络堆栈的核心。网络赶上了。
尽管其中一些新的API可以很抽象,但您可以将其插入代码中。一个示例是Redaxios,它在引擎盖下使用fetch,同时还可以暴露与Axios兼容的API的开发人员。如果这些便利方法最终将其滴入Web平台,这不会令我感到惊讶。
伯纳斯·李(Berners-Lee)在大约25年前写的是时间的考验。开发人员要遵守我们的信息。通过拥抱Web平台给我们的东西(而不是试图与之抗衡),我们可以构建更好的网站。
保持简单。运用最少权力的规则。考虑到逐步增强的构建。
HTML,CSS和JavaScript - 按照此顺序。
以上是拥抱平台的详细内容。更多信息请关注PHP中文网其他相关文章!