Web-Components

去年 10 月，咱们对外开源了 Quarkd（quark design 缩写）。开源之初，咱们给本人定下 star 数量超过 70 个就行的心态，却意外失去了 1600 多 star，很受鼓励～ 那一刻起，咱们晓得，在前端框架“泛滥”的时代，还有一些人在追寻原生技术，大道至简，平淡为归。 这也让咱们想起了 kk 说的那句话：所有翻新都产生在事物边缘，所有的颠覆都来自边缘。 明天，咱们正式对外开源 Quark 生态 的又一成员，Quarkc（Quark core 缩写）。上面来做个简略介绍吧 ：） Quarkc 将于 2023-06-30·北京稀土开发者大会进行分享 官网：https://quark.hellobike.com/ github(欢送 star)：https://github.com/hellof2e/quark Quarkc 是什么？Quarkc (Quark core 缩写) 是由哈啰平台前端团队开发的一套面向未来的  无框架  组件构建工具！它能够让你实现低成本/高效开发规范的 跨框架组件 或者 构建整个利用，底层基于浏览器原生 API: Web components。 无需 AST，无需黑魔法，Quarkc 能够让你低成本实现 Write once, run anywhere！ 外围：让组件实现技术栈无关！ Why Quarkc ?背景 1:【前端的历史】前端倒退多年，无论大小公司，个别都存在各种技术栈(React, Angular, Jq, Vue) / 同种技术栈的不同版本（Vue2, Vue3）。如果要开发某个通用组件（比方：营销弹窗），工作量就是 double+（不同技术框架须要离开开发/保护/上线，同技术不同版本可能也须要离开开发/保护/上线） 背景 2:【前端的将来】前端框架会持续迭代/倒退，会有新的版本，新的框架呈现。用 Quarkc 开发“通用型组件”，不会随着“前端框架浪潮”而更新迭代（极大升高组件研发/保护老本）。 以上背景，总结一下就是：前端的过来与将来，决定了 前端通用型组件 的开发和保护老本比拟高。 ...

Quark Design 是什么？Quark（夸克） Design 是由哈啰平台 UED 和增长&电商前端团队联结打造的一套面向挪动端的跨框架 UI 组件库。与业界第三方组件库不一样，Quark Design 底层基于 Web Components 实现，它能做到一套代码，同时运行在各类前端框架中。 Quark Design 历经一年多的开发工夫，已在团体外部大量业务中失去验证，本着“共创、共建、共享”的开源精力，咱们于即日起将 Quark 正式对外开源！Github地址：https://github.com/hellof2e/q... (求star、求关注～) 注：文档体现/款式参考了HeadlessUI/nutui/vant等。 Quark Design 与现有支流组件库的区别是什么？Quark(夸克)有别于业界支流的挪动端组件库，Quark 能同时运行在业界所有前端框架/无框架工程中，做到真正的技术栈无关 ！咱们不一样，：) 不依赖技术栈（eg. Vue、React、Angular等）不依赖技术栈版本(eg. Vue2.x、Vue3.x)全新的Api设计（eg. 弹窗的关上属性由传统的 Visible 调整为合乎浏览器原生弹窗的 open等）公司前端技术生态我的项目技术栈多时，放弃视觉/交互对立齐全笼罩您所须要的各类通用组件反对按需援用详尽的文档和示例反对定制主题性能劣势-优先逻辑无阻塞咱们以对 React 组件的 Web Components 化为例，一个一般的 React 组件在首次执行时须要一次性走完所有必须的节点逻辑，而这些逻辑的执行都同步占用在 js 的主线程上，那么当你的页面足够简单时，一些非核心逻辑就将会阻塞前面的外围逻辑的执行。 比方首次加载时，你的页面中有一个简单的交互组件，交互组件中又蕴含 N多逻辑和按钮等小组件，此时页面的首次加载不应该优先去执行这些细节逻辑，而首要任务该当是优先渲染出整体框架或外围因素，而后再次去欠缺那些不必要第一工夫实现的细节性能。 例如一些图像处理非常复杂，但你齐全没必要在第一工夫就去加载它们。 当咱们应用 Web Components 来优化 React的时候，这个执行过程将会变得简洁的多，比方咱们注册了一个简单的逻辑组件，在 React 执行时只是执行了一个 createElement 语句，创立它只须要 1-2 微秒即可实现，而真正的逻辑并不在同时执行，而是等到“外围工作”执行完再去执行，甚至你能够容许它在适合的机会再去执行。 咱们也能够简略的了解为，局部逻辑在之后进行执行而后被 render 到指定 id 的 Div 中的，那么为什么传统的组件为什么不能这么做呢？而非得 Web Components 呢？那就不得不提到它所蕴含的另一个技术个性：Shadow DOM 组件隔离（Shadow Dom）Shadow DOM 为自定义的组件提供了包含 CSS、事件的无效隔离，不再放心不同的组件之间的款式、事件净化了。 这相当于为自定义组件提供了一个人造无效的保护伞。 ...

前言通过本文，您将理解什么是Web components，以及如何将其落地到业务场景的最佳实际。 一、初识（什么是Web components） 在 html5 提供的video组件实现上采纳了Shadow DOM技术，Shadow DOM 技术是Web Components 外围套件之一，还有像input、select 也都采纳了这个技术，具体什么是Shadow DOM 会在下文中给出解释。 二、实际基于业务，咱们先看一个订单卡片的视觉稿： 用Web Components实现，代码展现如下： 这里波及到Web Components的三大技术套件 Template: 利用 Template 生成 DOM；Shadow DOM：利用Shadow DOM 来隔离CSS款式；Custom Elements: 利用Custom Elements 来自定义元素，继承自HTMLElement，HTMLElement 是 DOM API 外面的一个类，继承该类就有了html 的常见属性和 API，利用Custom Elements 来自定义元素；Template 和 Custom Elements 都比拟好了解，那什么是 Shadow DOM 呢？ 你能够简略了解为Shadow DOM 是一个独立的沙箱，与其它的DOM元素互不烦扰，能人造做到 CSS 的款式隔离！相似于 Vue 中带 Scoped 的 style 标签，它不会烦扰其它标签款式。 上面咱们来看下更具象的 <order-card /> 组件代码： 目前组件的内容是写死的，该怎么动静生成DOM呢？咱们持续往下看： 答案就是借助 Web Components 组件的生命周期来做，其中 connectedCallback 就是 dom 节点首次挂载调用，且只会调用一次，在这里能够拿到内部传入的属性。属性变更会调用 attributeChangedCallback, 在这里能够做 dom 更新相干的事件，这里不在开展，大家能够自行摸索下。 ...

attribute 和 property总结：DOM property、DOM attribute区别导致自定义标签在 Vue、React 中应用时体现不一，外围思路是做好映射关系。 React中应用 WCs 标签：const App = () => <my-cell desc='false'>Cell</my-cell>export default App;不会走到WCs的 set，因为传递的是 property。且以上传递的是一个字符串。 class MyCell extends HTMLElement { ... get desc() { return this.getAttribute('desc'); }+ set desc(value) {+ // 不会走到这里+ this.setAttribute('desc', value);+ } ...}Vue中应用 WCs 标签：<template> <my-cell desc="false">Cell</my-cell></template>会走到 set，Vue 中 desc 示意传递的是 attribute。 class MyCell extends HTMLElement { ... get desc() { return this.getAttribute('desc'); }+ set desc(value) {+ // 与React不同，Vue我的项目中应用会走到这里+ this.setAttribute('desc', value);+ } ...}如何解决？为了兼容 WCs 在 React 和 Vue 我的项目中应用一致性，须要在 WCs 外部去绑定this属性 ...

搞前端工夫比拟长的同学都会晓得一个货色，那就是HTC（HTML Components），这个货色名字很当初风行的Web Components很像，但却是不同的两个货色，它们的思路有很多类似点，然而前者已是昨日黄花，后者方兴未艾，是什么造成了它们的这种差距呢？ HTML Components的一些个性因为支流浏览器外面只有IE反对过HTC，所以很多人潜意识都认为它不规范，但其实它也是有规范文档的，而且到当初还有链接，留神它的工夫！ http://www.w3.org/TR/NOTE-HTM... 咱们来看看它次要能做什么呢？ 它能够以两种形式被引入到HTML页面中，一种是作为“行为”被附加到元素，应用CSS引入，一种是作为“组件”，扩大HTML的标签体系。 行为行为（Behavior）是在IE5中引入的一个概念，次要是为了做文档构造和行为的拆散，把行为通过相似款式的形式隔离进来，具体介绍在这里能够看： http://msdn.microsoft.com/en-... 行为里能够引入HTC文件，方才的HTC标准里就有，咱们把它摘录进去，能看得分明一些： // engine.htc<HTML xmlns:PUBLIC="urn:HTMLComponent"><PUBLIC:EVENT NAME="onResultChange" ID="eventOnResultChange" /><SCRIPT LANGUAGE="JScript">function doCalc(){ : oEvent = createEventObject(); oEvent.result = sResult; eventOnResultChange.fire (oEvent);}<HTML xmlns:LK="urn:com.microsoft.htc.samples.calc"><HEAD><STYLE> LK\:CALC { behavior:url(engine.htc); } </STYLE></HEAD><LK:CALC ID="myCalc" onResultChange="resultWindow.innerText=window.event.result"><TABLE><TR><DIV ID="resultWindow" STYLE="border: '.025cm solid gray'" ALIGN=RIGHT>0.</DIV></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 7 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 8 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 9 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" / "></TD> <TD><INPUT TYPE=BUTTON VALUE=" C "></TD></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 4 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 5 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 6 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" * "></TD> <TD><INPUT TYPE=BUTTON VALUE=" % " DISABLED></TD></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 1 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 2 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 3 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" - "></TD> <TD><INPUT TYPE=BUTTON VALUE="1/x" DISABLED></TD></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 0 "></TD> <TD><INPUT TYPE=BUTTON VALUE="+/-"></TD> <TD><INPUT TYPE=BUTTON VALUE=" . "></TD> <TD><INPUT TYPE=BUTTON VALUE=" + "></TD> <TD><INPUT TYPE=BUTTON VALUE=" = "></TD></TR></TABLE></LK:CALC></HTML>这是一个计算器的例子，咱们先大抵看一下代码构造，是不是很清晰？再看看当初用jQuery，咱们是怎么实现这种货色的：是用选择器抉择这些按钮，而后增加事件处理函数。留神你多了一步抉择的过程，而且，整个过程混淆了申明式和命令式两种代码格调。如果依照它这样，你所有的JS根本都丢在了隔离的不相干的文件中，整个是一个配置的过程，拆散得很洁净。 ...

写在后面最近致力于钻研 Web components（以下简称WC），并且也初有功效的拿到了肯定的后果，但明天想回过头来从新扫视一下 WC。 WC 到底是什么？组件是前端的倒退方向，抛开周边技术生态，单纯看 React 和 Vue 都是组件框架。 谷歌公司因为把握了 Chrome 浏览器，始终在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简略间接，合乎直觉，不必加载任何内部模块，代码量小。貌似所有完满，仿佛大有能够用来替换你喜爱的库或框架。 很多人也提出过将它与三大前端框架比拟，比方《Web Component 和类 React、Angular、Vue 组件化技术谁会成为将来？》，其实它们是两个畛域的货色，不具备可比性。WC 最大的劣势在于 CSS 防污染，浏览器原生反对的组件化实现；而 Vue 等 MVVM 框架重视数据拆散和自动化绑定的实现。且 WC 中蕴含的 4 大 web api 是标准规范，应用上滞后性（比方新落地的标准往往要等几年后才会被人拿进去应用），但 vue、react、ng 等框架不会。 目前存在的缺点与其它 web 框架一起应用存在一些小问题，会给开发体验上造成一些困扰。 1、组件外部事件的回调比方，一个弹窗组件（<my-dialog></my-dialog>）中的确定按钮，那么它的事件是如何触发的呢？ class myDialog extends HTMLElement { // ... connectedCallback() { const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <div class="dialog"> <div class="dialog-content"> <div class="dialog-body"> 弹窗内容 </div> <button id="okBtn">确定</button> </div> </div> `; shadowRoot.querySelector('#okBtn').addEventListener('click', () => { // 组件外部定义事件 this.dispatchEvent(new CustomEvent('okBtnFn')); }); }}customElements.define('my-dialog', myDialog);当初计划是 custom element 外部自定义事件 new CustomEvent()，内部用 addEventListener监听。这样的写法是很俊俏的，好像又回到了原生 JS 写利用的时代。 ...

开发中，还是会遇到须要引入内部CSS到Shadow DOM状况，那么如何解决呢？作者就最近遇到的状况给出如下几种计划。 一、@import示例代码 const template = document.createElement('template');class WhatsUp extends HTMLElement { connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innderHTML = ` <style> @import "./index.css"; // 外围代码 </style> <div>Sup</div> ` }}window.customElements.define('whats-up', WhatsUp);长处：此办法兼容性十分好，点击查看caniuse。毛病：性能 二、::part::part CSS 伪元素示意在暗影树中任何匹配 part 属性的元素。 示例代码 HTML<template id="whats-up"> <div part="sup">Sup</div> <div part="foo">Sup</div></template><whats-up></whats-up>CSSwhats-up::part(sup) { /* 款式作用于 `sup` 局部 */}whats-up::part(foo) { /* 款式作用于 `foo` 局部 */}长处：简洁明了毛病：兼容性不太好，点击查看caniuse。 三、varCSS自定义属性能够穿透到 Shadow DOM中！示例代码 JSconst template = document.createElement('template');template.innerHTML = `<style>button { background: var(--background); color: var(--color); padding: var(--padding); font-size: var(--font-size); border: 0;}</style><div>Sup</div>`;CSSwhats-up { --background: #1E88E5; --color: white; --padding: 2rem 4rem; --font-size: 1.5rem;}长处：兼容性好毛病：比拟局限，只能内部定几个，款式不能“自在翱翔” ...

1. 为什么用 shadow dom应用shadom dom能够让组件与其余组件、组件与dom树进行隔离，实现封装。 如MDN中所写： Web components 的一个重要属性是封装——能够将标记构造、款式和行为暗藏起来，并与页面上的其余代码相隔离，保障不同的局部不会混在一起，可使代码更加洁净、整洁。每一个 shadow dom 都是一个独立的、暗藏的dom树，附加在了一个元素上。 2. 在custom element中应用shadow dom接第一篇末的代码 class CommentCard extends HTMLElement{ constructor(){ super(); //将shadow dom附加在自定义元素中 let shadow = this.attachShadow({mode: 'open'}); let templateEle = document.getElementById('commentCardTemplate'); let content = templateEle.content.cloneNode(true); content.querySelector('img').src = this.dataset.avatar; content.querySelector('.nickname').innerHTML = this.dataset.nickname; //向shadow dom中追加元素 shadow.appendChild(content); }}Element.attachShadow承受一个配置对象作为参数，它蕴含一个属性 mode。当mode设置为open时，则能够从内部流动并操作shadow dom。当mode设置为closed时，内部将无法访问到shadow dom。 一般来说，我认为没有必要将mode设置为closed。即便在custom elements类定义的外部，咱们也无奈对shadow dom进行操作。这将影响咱们对custom elements的灵活处理，比方款式操作、事件绑定等。这样太不不便了。 3. 操作shadow dom通过Element.shadowRoot能够获取shadow dom的根结点。其它操作与惯例DOM操作统一。比方给某个元素增加事件绑定。 class CommentCard extends HTMLElement{ constructor(){ super(); let shadow = this.attachShadow({mode: 'open'}); let templateEle = document.getElementById('commentCardTemplate'); let content = templateEle.content.cloneNode(true); //向shadow dom中追加元素 shadow.appendChild(content); this.shadowRoot.querySelector('.nickname').addEventListener('click', (e) => { this._showBubble(e.target); }) } ...}

Web Components 开始不添加任何依赖来构建自己的定制组件带有样式，拥有交互功能并且在各自文件中优雅组织的 HTML 标签 https://developer.mozilla.org... Web Components是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。 示例 https://github.com/mdn/web-co... polyfill https://www.webcomponents.org... https://github.com/webcompone... https://unpkg.com/browse/@web... npm install @webcomponents/webcomponentsjs <!-- load webcomponents bundle, which includes all the necessary polyfills --><script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script><!-- load the element --><script type="module" src="my-element.js"></script><!-- use the element --><my-element></my-element>Web Component 是一系列 web 平台的 API，它们可以允许你创建全新可定制、可重用并且封装的 HTML 标签定制的组件基于 Web Component 标准构建，可以在现在浏览器上使用，也可以和任意与 HTML 交互的 JavaScript 库和框架配合使用。 它赋予了仅仅使用纯粹的JS/HTML/CSS就可以创建可重用组件的能力。如果 HTML 不能满足需求，我们可以创建一个可以满足需求的 Web Component。 举个例子，你的用户数据和一个 ID 有关，你希望有一个可以填入用户 ID 并且可以获取相应数据的组件。HTML 可能是下面这个样子： <user-card user-id="1"></user-card>Web Component 的四个核心概念HTML 和 DOM 标准定义了四种新的标准来帮助定义 Web Component。这些标准如下：定制元素(Custom Elements):web 开发者可以通过定制元素创建新的 HTML 标签、增强已有的 HTML 标签或是二次开发其它开发者已经完成的组件。这个 API 是 Web Component 的基石。HTML 模板(HTML Templates):HTML 模板定义了新的元素，描述一个基于 DOM 标准用于客户端模板的途径。模板允许你声明标记片段，它们可以被解析为 HTML。这些片段在页面开始加载时不会被用到，之后运行时会被实例化。Shadow DOM:Shadow DOM 被设计为构建基于组件的应用的一个工具。它可以解决 web 开发的一些常见问题，比如允许你把组件的 DOM 和作用域隔离开，并且简化 CSS 等等。HTML 引用(HTML Imports):HTML 模板(HTML Templates)允许你创建新的模板，同样的，HTML 引用(HTML imports)允许你从不同的文件中引入这些模板。通过独立的HTML文件管理组件，可以帮助你更好的组织代码。组件的命名定制元素的名称必须包含一个短横线。所以 <my-tabs> 和 <my-amazing-website> 是合法的名称, 而 <foo> 和 <foo_bar> 不行。在 HTML 添加新标签时需要确保向前兼容，不能重复注册同一个标签。 ...

原生form表单form表单元素大家可能都用到过，除了可以提交表单外，还有一些内置的表单校验，比如require、minlength、maxlength，还有各种类型的input，比如type=email可以校验是否是邮箱类型，如果不满足还可以使用pattern进行正则校验。 原生的表单验证大概如下 虽然丑陋，功能却很强大，基本可以满足一般的需求，不过ui终究过于原生，而且也不方便自定义，所以很多情况下这种默认的表单验证并不使用。 下面来看看xy-form下的效果 结构基本和原生类似，也不需要额外的js逻辑 可以说丑小鸭立马变成白天鹅了。 xy-formxy-form是xy-ui新增了一类组件，主要用于表单提交和表单验证，完全可以取代原生form表单，下面简单介绍一下主要属性和方法，建议阅读在线文档，可以实时交互。 使用方式使用方式很简单 npmnpm i xy-uicdn<script type="module" src="https://unpkg.com/xy-ui/components/xy-form.js"></script><!--或者--><script type="module"> import 'https://unpkg.com/xy-ui/components/xy-form.js'</script>或者直接从github拷贝源码。<script type="module" src='./node_modules/xy-ui/components/xy-form.js'></script><!--或者--><script type="module"> import './node_modules/xy-ui/components/xy-form.js';</script>使用 <xy-form> ...</xy-form>表单默认行为属性xy-form内置了以下属性，基于html5规范。 这里的默认行为指的是，点击submit按钮或者回车，表单首先对表单元素进行格式校验，如果有误则会将有误的地方标识出来，全部正确后才能进行提交。 表单地址action值为URL，规定向何处发送表单数据。 回车键会触发表单。 请求方式method规定请求方式，默认为get,可选post。 验证novalidate如果使用该属性，则提交表单时不进行验证。 方法提交submit当表单内包含htmltype="submit"的按钮时，点击该按钮可以触发表单提交。 可通过form.submit()主动触发。 清空reset当表单内包含htmltype="reset"的按钮时，点击该按钮可以清空表单。 可通过form.reset()主动触发。 下面是一个最账号密码的登录框 <xy-form action="/login" method="post"> <xy-form-item legend="user"> <xy-input name="user" required placeholder="user"></xy-input> </xy-form-item> <xy-form-item legend="password"> <xy-input name="password" required type="password" placeholder="password" minlength="6"></xy-input> </xy-form-item> <xy-form-item> <xy-button type="primary" htmltype="submit">login</xy-button> <xy-button htmltype="reset">reset</xy-button> </xy-form-item></xy-form>渲染如下 首先输入框均设置了required属性，表示必填项，如果不输入在submit时会提示以下信息 其次，密码框规定了minlength属性，表示最小字符长度，如果不满足格式，会提示以下信息 当全部满足要求才能进行提交，可在控制台查看提交的表单数据，格式为formData，可转换json。 自定义表单自定义表单提交当表单带有action属性时，回车键可以触发表单提交，如果包含htmltype="submit"的按钮时，点击该按钮可以触发表单提交。 如果想手动通过ajax提交，可以去除action属性，这样就不会触发默认表单提交效果了。 可通过form.formdata获取表单的值。 sumbitBtn.onclick = function(){ fetch('/login', { method: 'POST', body: form.formdata, }) .then(function(data){ // })}自定义表单验证默认情况下，如果验证失败，表单则不会提交。 ...

xy-uixy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档 风格参考Ant Design、Metiral Design。 github项目地址 文档该文档基于docsify动态创建，文中所有组件均为可交互实例。 现集成gitalk评论系统，有相关问题可在下方评论区留言。 特性跨框架。无论是react、vue还是原生项目均可使用。组件化。shadow dom真正意义上实现了样式和功能的组件化。类原生。一个组件就像使用一个div标签一样。无依赖。纯原生，无需任何预处理器编译。无障碍。支持键盘访问。原则在实现组件功能时，遵循CSS为主，JavaScript为辅的思路，UI和业务逻辑分离，使得代码结构上更加简约。 比如xy-button有一个点击扩散的水波纹效果，就是采用CSS来实现，JavaScript只是辅助完成鼠标位置的获取 .btn::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: var(--x,0); top: var(--y,0); pointer-events: none; background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: translate(-50%,-50%) scale(10); opacity: 0; transition: transform .3s, opacity .8s;}.btn:not([disabled]):active::after { transform: translate(-50%,-50%) scale(0); opacity: .3; transition: 0s;}详细可查看源码。大部分组件都是类似的设计。 兼容性现代浏览器。 包括移动端，不支持IE。 IE不支持原生customElements，webcomponentsjs可以实现对IE的兼容，不过很多CSS特性仍然无效，所以放弃安装目前还没有托管npm，可以在github上获取最新文件。 目录如下： .└── xy-ui ├── components //功能组件 | ├── xy-icon.js | └── ... └── iconfont //图标库 └── icon.svg将components和iconfont文件夹放入项目当中。 ...

DOM操作从Prototype.js到风靡全球的jQuery.js，都是在解决浏览器间DOM操作的差异化问题，同时也提供了简洁友好的API，但是随着标准的不断的推进，现在浏览器间的差异化可以说已经没有了，像Github就宣布了弃用jQuery.js，直接使用浏览器提供的DOM操作更新界面。尽管浏览器提供的DOM操作API有时候看上去比较啰嗦，但是只要所有浏览器实现一致，前端就不需再使用一层封装来间接操作DOM，只需要学习标准化的API即可网络请求从IE的ActiveXObject到XMLHttpRequest Level1再到XMLHttpRequest Level2，然后fetch出现一统网络请求。在我们平常的开发中，可以直接使用fetch进行请求，无需再引入其它的网络请求库。不过目前fetch提供的API不够丰富，可能在使用时还要简单封装模块化从最早的对象模块命名空间，到amd,cmd等模块化工具require.js,sea.js等，再到es module，目前chrome中已经可以直接使用，并且动态的import也已经支持，从此可以告别那些第三方的模块加载器，学习并使用标准的es module即可功能点比如以往我们要实现平滑滚动，我们要用setTimeout或setInterval先实现一下基础的动画引擎，然后再实现一下相应的tween缓动算法，然后再应用到我们的滚动上。现在浏览器已经支持通过css给要滚动的节点添加scroll-behavior: smooth，然后再操作相应的scrollTop或scrollLeft即可实现相应的平滑滚动，省去了原来大量的代码或引用第三方类库的事情再比如某个节点滚动到或即将滚动到可视区域做一些事情(像瀑布流等)，以往像平滑滚动一样，我们要监听滚动事件，我们要计算节点的位置信息等一大堆事情要做，现在有IntersectionObserver，我们完成类似的功能只需要几行代码即可对于图片多的网站，前端经常使用的图片懒加载，现在也有了原生支持，给图片加上<img loading=“lazy”/>即可，不但省去了大量的javascript，也提升了易用性web components通过前面的一些基础点，我们可以看到浏览器越来越多的把一些常用功能内置进去，可以预见未来也会更多的把常用功能内置进去。内置的功能不但方便开发人员，同时在内存管理上，性能上，资源使用上都要远远优于javascript的实现长远看，现在前端开发的模式：界面管理+数据管理＝应用。界面管理也很有可能被内置到浏览器里，简单理解就是把页面组件化的功能内置进去，比如内置一个react。开发人员只需要管理好自己的业务数据即可。目前这个内置的界面管理浏览器提供的是web components，但是它在使用起来仍然不够方便，不过随着时间的发展，也许一年半载之后浏览器发力web compoents，把它打造的更顺手易用也说不定。浏览器的未来从前面的一些例子我们可以看到，浏览器也在不断的吸收好的开发思路和方式，同时开放更基础，更易用的API给到开发人员，这是一个互相辅助的过程。一但某些库或框架成为事实上的标准，那为什么不推进它把它写进标准，然后让浏览器实现呢？比如jQuery.js就是成功的案例，比如图片懒加载也是很好的说明，也许浏览器会很快内置lodash呢？如果浏览器没能发展好web components，如果react发展成熟稳定，浏览器或许就直接内置了，让我们只关注业务即可。如果你有想法，来留言讨论一下吧　^_^