Web Components是不是Web的未来
今天 ,Web 组件已经从本质上改变了HTML。初次接触时,它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件。面对新的技术,你可能会觉得无从下手。那这篇文章将为你揭开Web组件神秘的面纱。如果你已经熟知HTML标签和DOM编程,已经拥有了大量可用的Web组件,那么你已经是Web组件专家了。
Web 组件的现状
随着各式各样的用户需求,浏览器的原生组件已经无法满足需求。Web组件也就变得越来越重要。
我们将以自定义一个传统三方插件为例来介绍Web组件。
首先,需要引用插件的CSS和JavaScript资源:
<link rel="stylesheet" type="text/css" href="my-widget.css" /> <script src="my-widget.js"></script>
接下来,我们需要向页面中添加占位符。
<div data-my-widget></div>
最后,我们需要使用脚本来找到并且实例化这个占位符为Web组件。
// 使用 jQuery 初始化组件 $(function() { $('[data-my-widget]').myWidget(); });
通过以上是三个基本步骤。已经完成了在页面中添加了自定义插件,但是浏览器无法确定自定义组件的生命周期,如果通过以下方式声明则使自定义组件生命周期变得清晰了。
el.innerHTML = '<div data-my-widget></div>';
因为这不是一个内置的组件,我们现在必须手动实例化新组件,
$(el).find('[data-my-widget]').myWidget();
避免这种复杂设置方法的有效方式是完全抽象DOM交互。不过,这个动作也比较复杂,需要创建框架或者库来自定义组件。
面临的问题
组件一旦被声明,占位符已经被替代为原生的HTML标记:
<div data-my-widget> <div class="my-widget-foobar"> <input type="text" class="my-widget-text" /> <button class="my-widget-button">Go</button> </div> </div>
这样做的弊端是,自定义组件的标记和普通HTML组件的标记混杂在一起,没有清晰的分割和封装。这就不可避免的会出现命名及样式等冲突。
Web 组件的产生
随着三方Web组件的发展,它已经成为了Web开发不可或缺的部分:
<!—导入: --> <link rel="import" href="my-widget.html" /> <!—使用:--> <my-widget />
在这个实例中,我们通过导入HTML来添加组件并且立即使用。
更重要的是,因为<my-widget />是浏览器原生支持的组件,它直接挂在浏览器的生命周期中,允许我们像添加原生组件一样添加三方组件。
el.innerHTML = '<my-widget />'; // 插件当前已经被实例化
当查看这个组件的HTML 源码,你会发现它仅仅是一个单一的标签。如果启用浏览器Shadow DOM 特性,才可以查看标签内的组件,你将会发现一些有趣的事情,
当我们谈论Web组件时,我们不是在谈论一门新技术。Web组件最初的目的是给我们封装能力,它可以通过自定义组件和Shadow DOM 技术来实现。所以,接下来,我们将着重介绍下这两项技术。介绍以上两个技术之前,我们最好先梳理下已知浏览器原生组件。
已知的HTML组件
我们知道组件可以通过HTML标记或JavaScript来实例化:
使用 标记实例化:
<input type="text" />
document.createElement('input');
el.innerHTML = '<input type="text" />';
使用JaveScript实例化:
document.createElement('input') document.createElement('div')
添加带有属性的HTML标签:
// 创建带有属性的input标签... el.innerHTML = '<input type="text" value="foobar" />'; //这时value属性已经同步 el.querySelector('input').value;
组件可以响应属性的变化:
// 如果我们更改value 属性值
input.setAttribute('value', 'Foobar'); //属性值会立即更改
input.value === 'Foobar'; // true
组件可以有内部隐藏的DOM结构:
<!—使用一个input实现复杂的日历功能-->
<input type="date" /> // 尽管其内部结构比较复杂,但是已经封装成为一个组件
dateInput.children.length === 0; // true
组件可以使用子组件:
<!—可以给组件提供任意个 'option' 标签--> <select> <option>1</option> <option>2</option> <option>3</option> </select>
组件可以为其子组件提供样式:
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
最后,组件可以有内置样式。和自定义插件不同,我们不需要为浏览器的原生控件引用CSS文件。
有了以上的了解,我们已经具备了解Web组件的基础。使用自定义组件和Shadow DOM,我们可以在我们的插件中定义所有这些标准行为。
自定义组件
注册一个新组件也比较简单:
var MyElement = document.register('my-element'); // 'document.register' 返回一个构造函器
你也许注意到上面的自定义组件名称包含一个连接符。这是为了确保自定义组件名称不和浏览器内置组件不冲突。
现在<my-element />这个组件具备了原生组件的特性,
所以,自定义组件也同样可以进行普通的DOM操作:
document.create('my-element'); el.innerHTML = '<my-element />'; document.create('my-element');
构建自定义组件
当前,这个自定义组件仅仅有框架,而没有内容,下面让我们向其中添加一些内容:
//我们将提供'document.register'的第二个参数: document.register('my-element', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { this.innerHTML = '<h1>ELEMENT CREATED!</h1>'; } } }) });
在这个例子中,我们设置自定义组件的prototype,使用Object.create 方法创建一个继承于HTMLElement的对象。在这个方法中修改该组件的属性 innerHTML。
我们定义了createdCallback方法,在每次声明实例时调用。你同样可以有选择性的定义attributeChangedCallback、 enteredViewCallback 和leftViewCallback等方法。
目前为止我们实现了动态修改自定义组件内容的功能,我们仍然需要提供自定义组件的封装方法,用于隐藏其内部组件。
使用Shadow DOM实现封装
我们需要完善下createdCallback方法。本次,除了修改innerHTML之外,我们添加一些额外的操作:
createdCallback: { value: function() {var shadow = this.createShadowRoot(); shadow.innerHTML = '<h1>SHADOW DOM!</h1>'; } }
在这个例子中, 你会注意到‘SHADOW DOM!’,但是查看源码时你会发现只有空白的<my-element /> 标签而已。这里使用创建Shadow Root 方法替代了直接修改页面。
Shadow Root中的任何组件,是肉眼可见的,但是和当前页面的样式和DOM API相隔离。这样就实现了自定义组件是一个独立组件的假象。
添加“轻量级DOM”
目前为止,我们的自定义组件是空标签,但是如果向其中添加内部组件会出现什么现象呢?
我们假设自定义组件包含的节点如下,
<my-element> 这是一个轻量级 DOM。 <i>hello</i> <i>world</i> </my-element>
一旦针对于这个组件的 Shadow Root 被创建,它的子节点不再存在。我们这些隐藏的子节点封装为轻量级DOM节点。
如果禁用了 Shadow DOM,上面这个例子仅仅会显示为:这是一个轻量级 DOM‘ hello world ’。
当我们在createdCallback方法中设置 Shadow DOM后,我们可以使用新增内容分配轻量级DOM组件到Shadow DOM 中。
createdCallback: { value: function() {var shadow = this.createShadowRoot(); // 子组件'i' 标签现在已经消失了 shadow.innerHTML = ‘轻量级 DOM 中的 "i" 标签为: ' + '<content select="i" />'; //现在,在 Shadow DOM 中只有 'i' 标签是可以见的。 } }
封装样式
Shadow DOM 最重要的作用是创建了和当前页面隔离的Web组件,使Web组件不受当前页面样式和JaveScript脚本的影响。
createdCallback: { value: function() {var shadow = this.createShadowRoot(); shadow.innerHTML = "<style>span { color: green }</style>" + "<span>I'm green</span>"; } }
反之,在 Shadow DOM 中定义的样式也不会影响之外的标签样式。
<my-element /> <span>I'm not green</span>
揭露钩子的秘密
当隐藏自定义组件内部标记,有时也需要在当前页面对组件中的内部特定组件进行样式设置。
例如,如果我们自定义一个日历插件,在不允许用户控制整个插件的情况下,允许最终用户去定义按钮的样式。
这是其中的部分特性和伪组件:
createdCallback: { value: function() {var shadow = this.createShadowRoot(); shadow.innerHTML = 'Hello <em part="world">World</em>'; } }
这是在当前页面设置自定义组件内部组件样式的方法:
my-element::part(world) { color: green; }
这部分内容介绍了封装web组件的基本方式。Shadow DOM 是我们可以任意修改Web组件中的标签。在例子中,我们设置了“World”的样式,但是使用者却无法判断它是<em>标签。
在你尝试自定义Web组件之前,需要确保浏览器的相关特性已经打开。如果使用 Chrome,在 Chrome 中打开chrome://flags ,并且开启“experimental Web Platform features”。
这仅仅是个开始
所有本文中介绍的内容,都是模拟一些简单的浏览器标准行为。我们已经习惯于和原生的浏览器组件进行交互,因此自定义组件的步骤并不是想象中的那个难。Web组件最终提供我们一种实现简单、一致、可复用、封装和组合部件的方法,这是一个有意义的开始。
Web Components是不是Web的未来的更多相关文章
- Web Components
Web Components是不是Web的未来 今天 ,Web 组件已经从本质上改变了HTML.初次接触时,它看起来像一个全新的技术.Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以 ...
- 使用CLI 3 创建发布Web Components
本文翻译自:codementor 翻译不当之处,欢迎指正交流 Web Components是web平台的未来吗?关于这一问题支持和反对的观点有很多.事实上浏览器对Web Components的支持正在 ...
- 前端未来趋势之原生API:Web Components
声明:未经允许,不得转载. Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了.但是没关系,可以再重温一下,温故知新. 浏览器原生能力越来越强. js 曾经的 JQue ...
- 前端应该知道的Web Components
前端组件化的痛点 在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟引入的这些html.css.js代码有可能对你的其他代码造成影响. 虽然我们可以通过命名空间.闭包等一 ...
- 前端组件化-Web Components【转】
以下全部转自:http://www.cnblogs.com/pqjwyn/p/7401918.html 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟 ...
- Polymer——Web Components的未来
什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...
- 可选的Web Components类库
首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读<A Guide to Web Components>. 有句古话-“授人以鱼,不如授人以渔” ...
- 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见
http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...
- Web Components 是什么
/********************************************************************************* * Web Components ...
随机推荐
- Sqoop_ 从 hive 导到mysql常遇九问题总结(转)
以前以为版本不同,遇到的问题就不同,后来发现,无论是新版本,还是老版本,遇到的问题大部分都是相同的.下面解决问题的方法仅供借鉴 1.拒绝连接的错误表现是什么?2.表不存在该如何解决?3.null字段填 ...
- Linux下配置SVN
1.安装svn yum -y install subversion 2.创建SVN版本库目录 mkdir -p /var/svn/svnrepos (-p参数:如果没有这个目录,则创建这个目录) 3. ...
- Oracle索引简单介绍与示例
索引的三大特性 1索引高度 在SQL检索数据(SELECT)的时候,索引的高度的不同对检索的效率有明显的差别,数据库访问索引需要读取的数据块通常是索引的高度+1个数据块数,也就是说索引的高度越高,访问 ...
- Struts和SpringMVC两种MVC框架比较
基于Web的MVC framework在J2EE的世界内已是空前繁荣.TTS网站上几乎每隔一两个星期就会有新的MVC框架发布.目前比较好的MVC,老牌的有Struts.Webwork.新兴的MVC框架 ...
- Mysql event学习
我们可能比较熟悉crond,但是mysql也有一个自己的叫event,oracle的叫job. 开启mysql的event有很多种方法,和临时开启.我们在配置文件里面添加参数,随着服务一起开启. 在[ ...
- 自动解析URL
function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, pr ...
- java 正则表达式获取匹配和非获取匹配
package test1; import java.util.regex.Matcher; import java.util.regex.Pattern; public class TestExp ...
- Ubuntu Linux上安装oracle jdk
说明:由于很多系统不支持使用OpenJDK,因此在ubuntu下会需要安装Oracle JDK.而Oracle JDK的安装貌似没有提供apt方式,因此安装Oracle JDK的方式相对麻烦一些,我经 ...
- DS Tree 已知后序、中序 => 建树 => 求先序
注意点: 和上一篇的DS Tree 已知先序.中序 => 建树 => 求后序差不多,注意的地方是在aftorder中找根节点的时候,是从右往左找,因此递归的时候注意参数,最好是拿纸和笔模拟 ...
- YAML 模板文件语法
YAML 模板文件语法 默认的模板文件是 docker-compose.yml,其中定义的每个服务都必须通过 image 指令指定镜像或 build 指令(需要 Dockerfile)来自动构建. 其 ...