Web组件的封装

最近啃出来了 Web Components 的使用方法，感觉挺有意思。组件的整个封装过程与 React 非常相似，只是在注册局部事件出入较大，绕了一个大圈圈又转回来了。一个单独的 JavaScript 文件就可以当作一个组件引入来使用，在轻量开发中会给开发者提供很大的方便，从而省去了安装配置框架的麻烦。注：由于此 API 是由现代浏览器推出，所以旧版本的浏览器可能会不支持，顺便将封闭好的一个小组件 demo 贴出来作为纪念！

class YhnDiv extends HTMLElement {
	constructor () {
		super();
		/* 创建模板 */
		var temp = document.createElement('template');
		temp.innerHTML = `
			<style>
				#title {
					margin: 4px;
					padding: 8px;
					font-size: 36px;
					border: 1px solid #cccccc;
					border-radius: 2px;
					color: #3388ff;
				}
			</style>
			<div id="title">天下唯我独尊 ${this.getAttr('txt')}</div>
		`;
		/* 设置封闭 */
		var shadow = this.attachShadow({mode: 'closed'});
		shadow.appendChild(temp.content);
		/* 注册事件 */
		shadow.getElementById('title').onclick = this.testFun;
	}
	testFun () {
		console.log('天下功夫，唯快不破！');
	}
	/* 获取属性 */
	getAttr (attr) {
		return this.getAttribute(attr) || '';
	}
}

customElements.define('yhn-div', YhnDiv);

将以上代码保存为一个 js 文件，引入一个 html 文件，组件的使用如下：

<yhn-div txt="组件传值"></yhn-div>

我们像平常写div一样来使用自定义组件，并且还可以支持组件传值。需要注意的是，自定义组件只支持带中划线（单个或多个）的书写方式。