Web Components
2017-11-25 本文已影响0人
蒂卡波牧羊犬
作用：
Web组件化，可复用UI模块。
标准：
Web Components不是单一的规范，而是一系列的技术组成，包括Template、Custom Element、Shadow DOM、HTML Import四种技术规范。
Template + document.importNode()
<template id="profileTemplate">
<div class="profile">
<div class="profile__social"></div>
</div>
</template>
<script>
#用JavaScript在模板中插入内容
var template = document.querySelector('#profileTemplate');
template.content.querySelector('.profile__social').textContent = 'Follow me on Twitter';
#克隆template节点，然后将克隆的节点插入DOM。
var clone = document.importNode(template.content, true);
document.body.appendChild(clone);
</script>
Custom Element
自定义网页元素
- 注册自定义元素
var SuperButton = document.registerElement('super-button');
- 添加属性和方法
// 添加属性
Object.defineProperty(SuperButton, "bar", {value: 5});
// 添加方法
SuperButton.foo = function() {
console.log('foo() called');
};
- 回调函数
自定义元素的原型有一些属性，用来指定回调函数，在特定事件发生时触发。
createdCallback：实例生成时触发
attachedCallback：实例插入HTML文档时触发
detachedCallback：实例从HTML文档移除时触发
attributeChangedCallback(attrName, oldVal, newVal)：实例的属性发生改变时（添加、移除、更新）触发
注意，自定义网页元素的标签名必须含有连字符（-），一个或多个都可。
Shadow DOM
封装成一个独立的DOM元素。外部的设置无法影响到其内部，而内部的设置也不会影响到外部.
var shadowRoot = element.createShadowRoot();
document.body.appendChild(shadowRoot);
HTML Import
HTML Import用于将外部的HTML文档加载进当前文档。
<link rel="import" href="dialog.html">
假定A网页通过HTML Import加载了B网页，即B是一个组件，那么B网页的样式表和脚本，对A网页也有效（准确得说，只有style标签中的样式对A网页有效，link标签加载的样式表对A网页无效）。
如果B与A不在同一个域，那么A所在的域必须打开CORS。
HTML Import是同步加载，会阻塞当前网页的渲染，这主要是为了样式表的考虑，因为外部网页的样式表对当前网页也有效。如果想避免这一点，可以为link元素加上async属性。当然，
Polymer.js
Web Components是非常新的技术，为了让老式浏览器也能使用，Google推出了一个函数库Polymer.js。这个库不仅可以帮助开发者，定义自己的网页元素，还提供许多预先制作好的组件，可以直接使用。
观点
首先，受制于浏览器厂商利益冲突，也可能是与最初设计思路有偏差，目前只有Chromium完全支持web components规范，离普及还有一定距离。其次，在技术细节上，易用性和鲁棒性都亟待改善，例如组件与组件之间的兼容性。第三，WC只是提供了MVVM中View的解决方案，但是数据绑定甚至是Model模块至今空白。但是前端工程化的大势，vue，react等技术的流行，足以表明Web组件化的重要性。
