Web Components (预览版)

2018-07-12 admin

为什么 Web Components?

早期在我们构建web页面时,基本上都是通过组合HTML提供的标签来实现的,再简单点我们还可以拷贝黏贴bootstrap的css代码。随着页面中相同或类似UI的增加,使得代码冗余度增加,UI的重用性问题日益彰显。

尽管像angular这样的Javascript框架可以解决标签复用的问题,但是框架间的组件重用显得无能为力了。

这时 Web Components 的概念就出现了。

什么是 Web Components?

它是一系列web平台APIs(浏览器提供),允许你创建自定义的,可复用的,封装的HTML标签。简单点说就是一系列接口规则,希望浏览器们可以提供,但是由于浏览器政治存在,进度是缓慢的。

图片描述

既然是接口规则,也就有了四个规范:

  1. 自定义标签

自定义一些新的HTML标签,声明其行为和样式。可以分为两类:自定义标签和自定义内置元素; (HTML5添加了更多的语义化标签)

  1. 影子DOM

为Web Components中的DOM和CSS提供封装。影子DOM使得这些与主文档的DOM保持分离。分离的原因大型页面没有很好的CSS组织结构(样式容易覆盖)

  1. HTML导入
<link ref="import" href="components.html">
  1. HTML模板

支持<template>模板标签

怎么实现 Web Components?

使用 ECMAScript 2015 类语法创建一个类,指定组件的功能

customElements.define(‘your-component’, YourComponentClass)注册自定义的标签

Element.attachShadow() 将一个影子DOM附加到自定义元素上

<template>和<slot>定义模板

接下来或分析: 添加跟多的例子 Polymer和X-tag源码

原文链接:https://segmentfault.com/a/1190000015617837

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35864.html

文章标题:Web Components (预览版)

相关文章
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
12个Web设计师必备的Bootstrap工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便。非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了。其中最普遍使用的最终框架 之一是 Bootstr...
2015-12-24
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
使用AngularJS开发我们下一款Web应用的七个理由
在当下这个电子商务时代,每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告,全球网站总数已经超过8.76亿个,而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
2015-12-25
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
Clappr——开源的Web视频播放器
巴西著名的门户网站 Globo.com(视频播放器),使用的是基于OSMF的Flash组件。在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等。然而,由于缺乏针对视频平台进行维护的专门小组,...
2016-01-13
纯JS实现本地图片预览的方法
本文实例讲述了纯JS实现本地图片预览的方法。分享给大家供大家参考。具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的。就拿自己以前写的写了一个。代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容...
2017-03-27
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
回到顶部