Web Component 真正实现组件化
2019-03-16 本文已影响4人
悟C
为什么说web component 真正实现组件化，因为它通过标准化非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，它通过Shadow DOM 在文档中创建一个完全独立于其他元素的DOM树，主文档和基于shadow DOM创建的独立组件之间是互相不干扰的。
下面还是写一个web component例子：
1. 基本的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Component</title>
<!-- 1. 引入web component的方式 -->
<link rel="import" href="./zhangfu.html">
</head>
<body>
<h1>Web Component</h1>
<!--2. 使用web component -->
<zhangfu-div id="zf" title="helle world"></zhangfu-div>
<script>
// 通过更新组件的属性，来触发title的改变
setTimeout(function() {
document.querySelector('#zf').setAttribute('title', '你好, 世界!');
}, 1000)
</script>
</body>
</html>
2. 创建一个web component
<template>
<style>
.title {
color: red;
}
</style>
<h1 class="title">你好</h1>
</template>
<script>
(function () {
var thisDoc = document.currentScript.ownerDocument;
var template = thisDoc.querySelector('template').content;
var element = Object.create(HTMLElement.prototype);
// 初始化创建的时候回调
element.createdCallback = function() {
var clone = document.importNode(template, true);
// 开启shadow的子根节点，这样才能 this.shadowRoot.querySelector('.title')获取到h1
var shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(clone);
}
// 属性改变的时候触发的回调
element.attributeChangedCallback = function(attr, oldVal, newVal) {
this.shadowRoot.querySelector('.title').innerText = newVal;
}
document.registerElement('zhangfu-div', {
prototype: element
})
}());
</script>
把index.html跑起来，我们看一下document的结果:
image.png
如上我们就创建了一个互不干扰的独立DOM组件, 可以跑一下代码感受一下, 完整代码
