组件的概念
组件，是数据和方法的一个封装，其定义了一个可重用的软件元素的功能，展示和使用，通常表现为一个或一组可重用的元素。
组件的特性
可拓展性：既然组件是针对某一特定功能或需求开发的，那它就必须易于开发和拓展；
封装性：组件作为一个独立整体供使用，应该是对内修改，对外封闭，只供使用，而不对使用环境产生副作用；
易用性：组件的目的是产生可重用的独立部件，那就必须提供一种简单快捷的方式供使用。
Web Components特征
Web Components将一系列特性加入HTML和DOM规范，使得开发者可以自由创建在web应用或文档可重用的元素或部件，其由四部分组成：
HTML模板（HTML Templates）：HTML内的DOM模板，在<template>元素内声明。
影子DOM（Shadow DOM）：组合对DOM和样式的封装；
HTML导入（HTML Imports）：定义在文档中导入其他HTML文档的方式；
自定义元素（Custom Elements）：定义新HTML元素的一系列API；
HTML模板
<body>
<hello-button>hello</hello-button>
</body>
<script>
(function() {
var HelloButtonPrototype = Object.create(HTMLElement.prototype);
HelloButtonPrototype.who = function() {
alert('Hello!');
}
HelloButtonPrototype.createdCallback = function() {
this.addEventListener('click', function(e) {
HelloButtonPrototype.who();
});
}
document.registerElement('hello-button', {prototype: HelloButtonPrototype});
})();
</script>
影子DOM（Shadow DOM）
DOM，即文档对象模型，是HTML文档的一个结构表示，以树形结构表示一个文档，文档中元素间关系按照父子，兄弟关系排列；DOM规范提供一系列API支持我们操作文档节点，即通常所说的DOM API。
前面提到Web Components指封装DOM和样式，以组件的形式在文档中使用，而不同于JavaScript中函数会形成一个单独作用域，文档DOM树的层次结构中是不存在局部作用域概念的，也就是说文档内所有定义的样式都对整个文档产生影响，文档中的样式也会影响组件内的声明样式，而不限定于元素所处位置，这样显然极大阻碍了组件的独立性和可重用性，是必须要解决的问题，不过不用担心，这都已经解决了，解决方案就是下文介绍的attachShadow()方法。
影子DOM API提供了attachShadow()方法，创建一个影子DOM，支持将封装的内容或组件作为一个独立DOM子树附加进一个HTML文档，组件内与外部隔离，样式互不影响，这也印证了组件开发的封装性需求。
创建
要创建一个影子DOM，很简单，使用attachShadow()方法即可，而需要注意的是所有影子DOM必须和一个文档中存在的元素（HTML内置元素或自定义元素）绑定，才能使用：
var frag = document.createElement('div');
var shadowRoot = frag.attachShadow({mode: 'open'});
// open 可以通过javascript来获取shandow DOM 例如
// close的话，就是不可以在外部获取到shadow Dom 了，访问shadowRoot就会返回null
shadowRoot.innerHTML = '<p>Shadow DOM Content</p>';
// class写法
class SlotTest extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
connectedCallback() {
}
}
customElements.define('slot-test', SlotTest);
影子树（SHADOW TREE）与影子主体（SHADOW HOST）
上文使用attachShadow()方法创建的元素就是一个影子DOM，而其子内容就构成一棵影子树（shadow tree），而和影子DOM绑定，也就是包含该树的文档内元素通常称为影子主体（shadow host）。
template 槽位（SLOT）
<div class="menus">
<h2>Menus</h2>
<slot></slot>
</div>
使用：
<slot-test>
<ul>
<li>home</li>
<li>order</li>
<li>about</li>
</ul>
</slot-test>
渲染结果:
<div class="menus">
<h2>Menus</h2>
<ul>
<li>Home</li>
<li>order</li>
<li>about</li>
</ul>
</div>
命名槽
<div class="menus">
<h2>Menus</h2>
<slot name="menu"></slot>
</div>
<slot-test>
<ul>
<li>home</li>
<li>order</li>
<li>about</li>
</ul>
<ul slot="menu">
<li>menu home</li>
<li>menu order</li>
<li>menu about</li>
</ul>
</slot-test>
渲染结果
<div class="menus">
<h2>Menus</h2>
<ul>
<li>menu home</li>
<li>menu order</li>
<li>menu about</li>
</ul>
</div>
样式
Web Components定义的组件内的样式与外部环境的样式是互不影响的，那么如何为组件设置样式呢，依然使用<style>标签：
class SlotTest extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>
div h2 {
color: red;
}
</style>
<div>
<h2>Menus</h2>
<slot></slot>
</div>
`
}
connectedCallback() {
}
}
customElements.define('slot-test', SlotTest);
HTML引入（HTML Imports）
<link rel="import" href="components.html">
自定义元素（Custom Elements）
自定义元素支持开发者定义一类新HTML元素，声明其行为和样式，自定义元素分两类：
自定义标签元素（Autonomous custom elements）：完全独立于原始HTML元素标签的新标签元素，其所有行为需要开发者定义;
自定义内置元素（Customized built-in）：基于HTML原始元素标签的自定义元素，以便于使用原始元素的特性，开发者只需要定义拓展行为；
创建自定义标签元素
为了创建一个自定义标签元素，我们需要继承HTMLELement类, 如在很多页面我们经常会有一键回到页面顶部功能，我们创建一个返回顶部的组件：
class GoTop extends HTMLElement {
constructor() {
super();
this.addClick()
}
addClick() {
this.addEventListener('click',function(e) {
console.log(999);
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
})
}
connectedCallback() {
// 首次被插入文档DOM时，被调用
console.log(88888)
console.log(this.getAttribute('data-name'))
}
disconnectedCallback() {
// 文档DOM中删除时，被调用
}
adoptedCallback() {
// 被移动到新的文档时，被调用
}
attributesChangedCallback() {
// 元素的属性被增删改时执行
}
}
console.log(HTMLElement.prototype)
customElements.define('go-top', GoTop);
生命周期函数github example:
https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks
在需要使用该组件的页面只需像使用正常HTML元素一样：
<go-top>Top</go-top>
该元素的一切样式，行为，事件监听，默认行为均需要开发者自行定义
//带图片及link的组件
class ImgLink extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
let src = this.getAttribute('src');
let height = this.getAttribute('height') || '100';
let width = this.getAttribute('width') || '100';
// Create a shadow root
let shadow = this.attachShadow({mode: 'open'});
// create img
let img = document.createElement('img');
img.src = src;
img.width = width;
img.height = height;
shadow.appendChild(img)
// create a
let link = document.createElement('a');
link.href = this.getAttribute('url');
link.innerText = this.getAttribute('name')
shadow.appendChild(link)
}
}
customElements.define('img-link', ImgLink);
使用
<img-link width="100" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" url="http://www.w3school.com.cn/js/index.asp" name="javascript"></img-link>
网友评论