微信搜索【GreatMovetotheWorld】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。LeeRobinson写了一篇文章《Why I'm Optimistic About JavaScript's Future》，表达了对JavaScript未来的乐观态度。正文开始……我看好JavaScript。开发人员想要编写JavaScript，他们希望它在浏览器、服务器或Edge中运行。尽管存在各种怪癖和缺陷，但由于其内置的增长黑客（在浏览器中）、庞大的工具和库生态系统以及TypeScript的持续增长和采用，JavaScript的采用率持续上升。越来越多的开发人员能够学习API（例如Request或Response）并在任何地方重用相同的知识。拥有一组共同商定的API（即标准）和支持相同接口（例如跨浏览器支持）的平台意味着Web开发人员现在可以一次学习，到处编码。本文将概述浏览器、服务器和边缘网络平台的最新改进。JavaScript：在当今的浏览器中，Web开发人员花在编写特定于供应商的JavaScript或特定于供应商的CSS选择器上的时间比以往任何时候都少。functionisIE11(){return!!window.MSInputMethodContext&&!!document.documentMode;}我们已经摆脱了保持元素纵横比的填充黑客世界：@supportsnot(aspect-ratio:16/9){.aspectRatio{overflow：隐藏；底边距：56.25%；高度：0；两种趋同的趋势使这成为可能：InternetExplorer的消亡：现在IE11正式退役，Web开发人员可以编写不那么具体的VendorCSS，从而导致更小的样式表和更少的hack。浏览器引擎对齐：三大浏览器引擎（Chromium/Chrome、Gecko/Firefox和Webkit/Safari）现在拥有我们所见过的对JavaScript、CSS和WebAPI的最佳跨浏览器支持。为Interop项目竖起大拇指。现在，当然，跨浏览器引擎并不完美，也不会永远完美。但这是迄今为止最好的，我很乐观。数千（或数百万）的开发人员时间将因不必花费一周时间来挖掘深奥的IE错误而累积节省。下面是一个示例，说明这种排列如何使所有Web开发人员受益。想象一下，您是一名框架作者，试图编写一个可重用的图像组件来帮助成千上万的开发人员在使用图像时获得良好的性能。在几年前的2020年，您需要围绕网络平台开展工作。在不引起布局变化的情况下加载图像，正确保持纵横比，并且不因图像大小/重量而降低页面的初始加载性能很难在所有主要浏览器中得到支持。这导致开发者要么忽视这些问题，要么框架编写的组件抽象产生这样的代码。<--需要保持宽高比<--需要保持宽高比，CSSpaddinghacks<--内联样式以防止布局偏移<--IntersectionObserver需要JS但是在2022年情况会有所不同。现在跨浏览器支持：宽高比、宽度/高度属性以防止布局更改、本机图像的延迟加载以及基于纯CSS/SVG的模糊图像占位符。上面的代码删除了包装元素并且不需要运行时JavaScript就可以工作。JavaScript：在服务器上同时在客户端和服务器上运行的同构JavaScript（即同时在客户端和服务器上运行的代码）长期以来一直是许多Web的理想状态开发商。一次学习，到处写作，对吧？直到最近，Node.js和Web平台还没有对齐。考虑通过HTTP获取数据。在浏览器中，我们有WebFetchAPI。在Node.js18之前，没有用于获取数据的内置解决方案。使用fetch需要使用像node-fetch或undici这样的包，它们具有相似但略有不同的API，通常以不明显的方式使用。平台之间的这种错位意味着编写同构JavaScript的工具（例如Next.js）需要添加polyfill，以便开发人员可以在客户端和服务器上使用fetch。借助Node.js18，这些工具现在可以删除用于填充平台差异的额外JavaScript，最终减少对JavaScript的需求。我对服务器上的JavaScript（和TypeScript）持乐观态度。这不仅仅是取货。还有请求、响应和100多个其他API，它们现在可在浏览器和Node.js中使用。浏览器供应商和构建服务器基础设施的公司现在比以往任何时候都更加紧密地合作，以提供一套适用于任何地方的标准API，包括边缘计算平台。JavaScript：Edge中的边缘计算，这经常被误解为最新运行的JavaScript的目标，是三者（浏览器、服务器、边缘）中最不标准化的。将边缘视为最高抽象级别可能会有所帮助，您将把所有时间都花在处理业务逻辑上。Edge并不是全新的东西，而是从现有的Node.js世界中经过深思熟虑的、有意的起飞。您想要编写JavaScript，但边缘计算基础设施需要（相当大的）较小的Node.jsAPI表面积子集。通过对Node.jsAPI的一个子集进行这种权衡，您可以始终保持快速冷启动和更具成本效益的计算工作负载。听起来不错。让我们看一个例子。在这种情况下，我将使用VercelEdgeFunction。但它也可以是其他边缘计算平台，如Cloudflare或Deno。对我来说，这段代码最好的部分是它实际上很无聊。它看起来像Node.js。exportconstconfig={runtime:'edge'}//Web标准RequestAPIexportdefaultfunctionhandler(req:Request){//Web标准URLAPIconst{searchParams}=newURL(req.url)constname=searchParams.get('name')//Web标准FetchAPIconstreq=awaitfetch('https://...',{body:{name}})constdata=awaitreq.json()//Web标准Response(.json是新的）//https://github.com/whatwg/fetch/issues/1389returnResponse.json(data);}这就是重点：这不仅仅是基础设施。它还涉及包含相同WebAPI的框架，可帮助成千上万的新开发人员一次学习，随处编写。此代码适用于Next.js。或SvelteKit。混搭。新鲜的。或者下一个基于同一组标准API构建的新Web框架。成为一名Web开发人员真是太棒了。原文：https://leerob.substack.com/p...编辑中可能存在的Bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里给大家推荐一个很好用的BUG监控工具Fundebug。交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
