前端新趋势?有了Web Component,还用纠结Vue或React?

本文涉及的产品
云服务器 ECS,每月免费额度280元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: Web Component 的概念最早在 2011 年被 Google 提出,并在 2018 年 V1 版本开始被主流浏览器所支持(除了 IE)。

一、什么是Web Component?

Web Component 的概念最早在 2011 年被 Google 提出,并在 2018 年 V1 版本开始被主流浏览器所支持(除了 IE)。Web Component 规范正式成为 W3C 的推荐标准。与Vue和React类似,都是基于组件化思想用于构建用户界面的一种框架,不同的是Web Component是使用封装的自定义HTML元素来创建可复用的组件,与此同时,它能够完美解决Html、css、js的复用问题,做到沙箱隔离,在任何地方使用都不会受到代码冲突影响。类似于我们熟知的html的video、audio标签。

二、基础认知

  1. web component 主要由三项主要技术组成:
  • Custom element(自定义元素):一组 JavaScript API,允许你定义 custom elements 及其行为,然后可以在你的用户界面中按照需要使用它们。 以下是一个简单的hello word例子:
<body>
    <hello-word />
    <script>
        class HelloWord extends HTMLElement {
            constructor() {
                super();
                this.append("hello world");
            }
        }
        window.customElements.define("hello-word", HelloWord); 
    </script>
</body>
  1. 通过上述在页面上能显示hello word,实现了一个简单的自定义元素。
  • Shadow DOM(影子 DOM):一组 JavaScript API,用于将封装的“影子”DOM 树附加到元素(与主文档 DOM 分开呈现)并控制其关联的功能。通过这种方式,你可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。 如下所示,外部的样式即使设置了 !important 也无法影响到内部样式:
<body>
    <test-item-shadow></test-item-shadow>
    <div class="container">Test item</div>
    <style>
        .container {
            color: red !important;
        }
    </style>
    <template id="tpl">
        <style>
            .container {
                color: blue;
            }
        </style>
        <div class="container">Test Item</div>
    </template>
    <script>
        class TestItemShadow extends HTMLElement {
            constructor() {
                super();
            }
            connectedCallback() {
                const content = document.getElementById("tpl").content.cloneNode(true);
                const shadow = this.attachShadow({ mode: "open" });
                shadow.append(content);
            }
        }
        window.customElements.define("test-item-shadow", TestItemShadow); </script>
</body>
  1. 通过浏览器开发者工具,可以查看html的结构,生成了一个#shadow-root(open)标签,内部包含了我们自定义的组件,不会受到外部影响。
  • HTML template(HTML 模板): <template><slot> 元素使你可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
  • 熟悉vue的小伙伴对于template和slot应该不陌生,以下是一个简单的例子:

template:

<body>
    <template id="test-template">
        <p>test-template</p>
    </template>
    <script>
        let template = document.getElementById("test-template");
        let templateContent = template.content;
        document.body.appendChild(templateContent);
    </script>
</body>

slot:

<body>
    <template id="tpl-test">
        <style>
            .title {
                color: green;
            }
        </style>
        <div class="title">标题</div>
        <slot name="slot-des">默认内容</slot>
    </template>
    <test-item>
        <div slot="slot-des">不是默认内容</div>
    </test-item>
    <script>
        class TestItem extends HTMLElement {
            constructor() {
                super();
            }
            connectedCallback() {
                const content = document.getElementById("tpl-test").content.cloneNode(true);
                const shadow = this.attachShadow({ mode: "open" });
                shadow.append(content);
            }
        }
        window.customElements.define("test-item", TestItem); </script>
</body>

三、常用接口解析

  1. CustomElementRegistry

CustomElementRegistry接口提供注册自定义元素和查询已注册元素的方法。

  1. define()

通过define方法可以创建一个自定义元素

  • name 自定义元素名
  • constructor 自定义元素构造器,class TestItem extends HTMLElement { ...
  • options 控制元素如何定义。目前有一个选项支持:extends. 指定继承的已创建的元素。被用于创建自定义元素
window.customElements.define(name, constructor, options);
  1. get()

get() 方法指定名字的自定义元素的构造函数,如果没有使用该名称的自定义元素定义,则为undefined。

constructor = window.customElements.get(name);
  1. upgrade()

upgrade() 方法将更新节点子树中所有包含阴影的自定义元素,甚至在它们连接到主文档之前也是如此。

const el = document.createElement("spider-man");
class SpiderMan extends HTMLElement {}
customElements.define("spider-man", SpiderMan);
console.assert(!(el instanceof SpiderMan)); // not yet upgraded
customElements.upgrade(el);
console.assert(el instanceof SpiderMan); // upgraded!
  1. whenDefined()

来检测生成菜单的自定义元素何时被定义。这个菜单显示占位符内容一直到菜单内容已经准备好显示

  1. attachShadow()

Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM,例:

const shadow = element.attachShadow({ mode: "open" });
  • mode参数:
  • pen: shadow root 元素通过 js 从外部访问根节点
  • closed:拒绝 js 从外部访问关闭的 shadow root 节点
  1. append()

append()方法在 Element的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。

shadow.append(content);  //content为dom对象

上述简单列举了几个常用的接口方法,更多使用可直接查看MDN:developer.mozilla.org/zh-CN/docs/…

四、最后

第一次接触web component是在使用ArcGis Js API时,发现官方使用了大量的web component,个人学习测试下来,发现与现在主流的Vue和React框架相比还是有一定的差距,少了一些生命周期方法的概念、状态管理、虚拟dom优化机制等,但在不使用框架的前提下,对于纯原生开发,这也是一个比较实用的工具,殊途同归,也许未来某一天它就成为了前端开发的新热门。

参考:

本文内容摘自稀土掘金,作者叶落风尘,详情查看链接:

https://juejin.cn/post/7305977418699817011

好啦!小弹的分享到此为止。我们更欢迎您分享您对阿里云产品的设想、对功能的建议或者各种吐槽,请扫描提交问卷并获得社区积分或精美礼品一份。https://survey.aliyun.com/apps/zhiliao/P4y44bm_8

【扫码填写上方调研问卷】

欢迎每位来到弹性计算的开发者们来反馈问题哦~

相关文章
|
2天前
|
开发框架 前端开发 JavaScript
从前端到后端——完整的Web开发指南
【2月更文挑战第1天】Web开发已经成为了现代软件开发中不可或缺的一部分。无论是前端还是后端,都扮演着重要的角色。本文将从前端到后端,介绍完整的Web开发流程和技术栈,帮助初学者快速入门Web开发。
|
3天前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
21天前
|
前端开发 JavaScript Java
从前端到后端:探索Web开发的技术演进
本文将介绍Web开发领域中前端和后端技术的演进过程。我们将从最初的静态网页开始,逐步探索动态网页、前后端分离、服务器端渲染等技术,以及流行的编程语言如Java、Python和C的应用。通过了解这些技术的发展,读者可以更好地理解Web开发的现状以及未来的趋势。
|
2天前
|
存储 前端开发 JavaScript
探索前端框架React Hooks的魅力
【2月更文挑战第2天】本文深入探讨了前端框架React Hooks的核心概念及其在现代Web开发中的重要性,分析了Hooks相较于传统class组件的优势所在,展示了它带来的便利和灵活性,为开发者提供了更加高效和优雅的解决方案。
|
2天前
|
前端开发 JavaScript C++
探讨前端框架选择:React vs Angular vs Vue
【2月更文挑战第2天】 在当今快速发展的前端开发领域,选择合适的前端框架至关重要。本文将深入探讨三大热门前端框架:React、Angular和Vue,分析它们的特点、优势和劣势,帮助开发者更好地理解并选择适合自己项目的前端框架。
8 3
|
2天前
|
JSON 前端开发 JavaScript
从前端到后端——Web开发的全流程解析
【2月更文挑战第2天】Web开发涉及多个方面,从前端设计到后端实现,需要开发者具备一定的技术能力和知识储备。本文将以一个简单的Web应用为例,详细介绍Web开发的全流程。
|
3天前
|
编解码 前端开发 JavaScript
Web 应用程序的前端设计
在当今数字化时代,Web 应用程序已经成为人们生活和工作的重要组成部分。而 Web 应用程序的前端设计则是决定用户体验的关键因素。本文将介绍一些前端设计的基本原则,以及一些流行的前端框架和工具。
11 4
|
4天前
|
JavaScript 前端开发 网络安全
vue与react路由拦截
vue与react路由拦截
14 4
|
4天前
|
JavaScript 前端开发 API
vue和react的区别是什么
vue和react的区别是什么
13 2
|
5天前
|
前端开发 JavaScript Java
从前端到后端:构建现代化Web应用的技术演进
本文将讨论在构建现代化Web应用时涉及的技术演进,并重点关注前端和后端领域的发展。我们将探索各种编程语言(如Java、Python和C),数据库技术以及前沿的前端和后端框架,帮助读者了解如何利用这些工具和技术来构建高效、可扩展和用户友好的Web应用。

相关产品

  • 云服务器 ECS
  • 轻量应用服务器
  • 弹性容器实例