什么是web components？

什么是Web Components

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

背景

组件化开发已经是前端主流开发方式，因为组件化开发在代码复用提升团队效率方面有着无可比拟的优势，现在流行的React，Vue都是组件框架。
谷歌公司一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。

组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。

使用方法
1. 创建一个类或函数来指定web组件的功能，推荐请使用 ECMAScript 2015 的类语法。
2. 使用 CustomElementRegistry.define() 方法注册自己的新自定义元素，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
3. 如果需要的话，使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用原生的DOM方法向shadow DOM中添加子元素、事件监听器等。
4. 如果需要的话，使用 <template>和<slot> 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到shadow DOM中。
5. 最后在页面中使用我们的自定义元素，就像使用原生HTML元素一样

写一个Web Components组件
1. 预期效果：预期渲染一个这样的自定义品牌名片到页面上面

只要开发者在页面上调用了<company-card></company-card>即可渲染页面，根据规范，自定义元素的名称必须包含连词线，用与区别原生的 HTML 元素

2. 自定义的元素需要使用js类来创建，页面中所有的自定义元素都会是这个类的实例：

然后就可以实现基础效果：

然后我们的js直接取出自定义元素上面的属性赋值给对应的标签即可

3.使用template来创建元素

如果使用原生js来创建组件，我们的开发效率会大打折扣，达不到我们想要的组件化提升效率的目的，所以浏览器提供了template来创建元素，重新写一下样式代码。
同时组件里面的数据，我们可以通过在自定义标签上写属性，传入到组件里面，更加符合组件开发的思路。

然后我的js直接取出自定义元素上面的属性赋值给对应的标签即可。

4. 加入样式
组件的样式需要加入到template组件里面，为每个组件独享的样式，跟vue思路差不多最终的template可能是这样的

5. 最终实现效果

生命周期函数在custom element的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用

结语：

不得不承认，Web Components 标准的提出解决了一些问题，必须交由浏览器去处理的是 Shadow DOM，在没有Shadow DOM 的浏览器上实现代码隔离的方式多多少少有缺陷。个人我觉得组件化的各个 API 不够简洁易用，依旧有 getElementById 这些的味道，但是交由各个类库去简化也可以接受，而 import 功能上没问题，但是加载多个

组件时性能问题还是值得商榷，标准可能需要在这个方面提供更多给浏览器的指引，例如是否有可能提供一种单一请求加载多个组件 HTML 的方式等。

在现在的移动化趋势中，Web Components 不仅仅是 Web 端的问题，越来越多的开发者期望以 Web 的方式去实现移动应用，而多端复用的实现渐渐是以组件的形式铺开，例如 React Native 和 Weex。所以 Web Components 的标准可能会影响到多端开发 Web 化的一个模式和发展。

但是，对于Web Components的发展前景还是比较看好，生产环境下还是观望一下就好。

什么是web components？相关推荐

【译】Web Components简介
本文翻译自:css-tricks.com/an-introduc- 前端开发正在以惊人的速度发展.曾经的前端开发,技术栈都是很简单的,如今却越来越复杂.这一点从无数的文章.教程和Twitter上就可以 ...
Web Components 简述
要说最近几年来,前端开发最火的一个趋势或最火的前端开发框架是什么,第一想到的是,组件及推崇组件化开发的React框架.本文将介绍Web Components规范并就组件的几大特性进行讨论. 前言在开 ...
在ASP.NET中使用Office Web Components (OWC)创建统计图
图形和图表是Web上数据表现的很好的形式,在ASP.NET,可以使用Office Web Components (OWC)来创建统计图.Office Web Component (OWC)是包含在Mi ...
【译】 Web Components 的高级工具
原文地址:Advanced Tooling for Web Components 原文作者:Caleb Williams 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold ...
Fiori Fundamentals和SAP UI5 Web Components
这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...
Web Components 上手指南
现在的前端开发基本离不开 React.Vue 这两个框架的支撑,而这两个框架下面又衍生出了许多的自定义组件库: Element(Vue) Ant Design(React) 这些组件库的出现,让我们可 ...
Firefox UI已迁移至Web Components
这不是一项一蹴而就的工程,Mozilla 开发者表示团队花费了大约两年的时间,采用"增量更新"的方式才逐渐将 Firefox UI 迁移至使用 Web Components 构建. ...
Programming MS Office 2000 Web Components第二章第一节（第二部分）
排序和过滤阅读本节时,如果您打开随书光盘Samples\Chap02目录下的SortFilterExample.htm文件.您会发现这个例子很有用.本节展示的代码和描述的特定环境来自这个文件. 电子 ...
[转载]Programming MS Office 2000 Web Components第二章第三节
第二章第三节编程模型要点现在总结一下我们对电子表格组件的介绍,我将讲述(电子表格)控件编程模型的各个要点,以便您了解如何运用这个控件,以及当您需要编写脚本来实现不同的功能时该如何去做.本节不是编程 ...
Vue 与 Web Components
Web Components 是一组 Web 原生 API 的总称,允许开发人员创建可重用的自定义组件. 在 Vue 和 Web Components 大体上是互补的技术.Vue 能很好地解析和创建自 ...

什么是web components？

结语：

什么是web components？相关推荐

最新文章

热门文章