测试 Web Components 和 template 标签的用法

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 1 楼 ]

[您可以先修改代码再运行]

Web Components 和IE曾经内置的 htc 组件很像，可惜的是，htc 因为 IE Only 惨遭唾弃。时隔近10来年，Chrome 又重新扛起了 html components 的大旗，而且被前端界玩的如火如荼，很多人用过类似 uni-image, el-input 等自定义标签，其实就是 Web Components。

让我想起了微软的另一个功能：数据岛绑定。通过 dataSrc，dataFld 将 xml 数据绑定显示出来。体验很不错，于是，微软把这项技术升级成了 XMLHttp 请求，大家称这种技术为 ajax，这番操作开启了 ajax 时代，最终 W3C 增加了一个 XMLHttpRequest 对象，但神奇的是，这项技术火了之后，却几乎和 XML 再也没有半点关系了，真正和XML有关系的，还是最原始的数据岛绑定技术。

数据岛技术其实并不需要javascript 的存在，单纯的 html + xml 就能绑定了。这么优秀的技术，在 ajax 数据绑定横行的年代，W3C 却至今没有提供相关的标准，真是令人捉急！

2022/5/26 22:41:12

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 2 楼 ]

再发个数据绑定的例子：

<div class="replies" style="width: 4in; background-color: #def; overflow: auto"></div>

<template id="reply">
<style type="text/css">
:host{ display: block; margin: 3mm; background-color: #fff; padding: 2mm }
.fr{ float: right }
.icon{ float: left; width: 2cm; height: 2cm; border-radius: 1cm; object-fit: cover }
.info{ margin-left: 22mm; min-height: 2cm }
.info .nick{ margin: 0mm; border-bottom: 1px solid #abcdef; padding: 2mm 4mm }
.info .content{ margin: 0mm; padding: 2mm 4mm }
</style>
<div>
	<img class="icon fl" datafld="icon" />
	<div class="info">
		<input class="btn fr" type="button" value="事件测试" onclick="getRootNode().host.showData()" />
		<p class="nick" datafld="nick"></p>
		<div class="reply">
			<p class="content" datafld="reply"></p>
		</div>
	</div>
</div>
</template>
<script type="text/javascript">
var rs = [
	{ icon: "http://bbs.fengyun.org/Upload/JsAspBBS/2204/01/112044.461.jpg", nick: "Rimifon", reply: "大家好，我来了！" },
	{ icon: "http://bbs.fengyun.org/Upload/JsASPBBS/2203/30/142552.795.jpg", nick: "Guest", reply: "你好，我也来了。" },
	{ icon: "http://bbs.fengyun.org/Upload/JsASPBBS/2203/30/142617.159.jpg", nick: "欢乐马", reply: "我是第三个来访的，大家欢迎。" }
];

var replies = document.querySelector(".replies");
rs.forEach(x => {
	var li = document.createElement("reply-item");
	li.setAttribute("is", "reply");
	replies.appendChild(li);
	li.showData = () => alert(JSON.stringify(x));
	setTimeout(() => li.bind(x), 0);
});

// 自定义组件
class ReplyItem extends HTMLElement {
	constructor() {
		super()
	}

bind(data) {
		var tempid = this.getAttribute("is");
		var node = document.getElementById(tempid).content.cloneNode(true);
		var temp = node.querySelectorAll("[datafld]");
		var attr = { IMG: "src", INPUT: "value", TEXTAREA: "value" };
		temp.forEach(x => {
			x[ attr[ x.tagName ] || "innerHTML" ] = data[x.getAttribute("datafld")];
		});
		this.attachShadow({mode: "closed"}).append(node);
	}
}
customElements.define('reply-item', ReplyItem);
</script>

[您可以先修改代码再运行]

关于事件中访问绑定数据这块，用到了 getRootNode().host 来实现 reply-item 数据的关联访问。

2022/5/28 10:39:58

IP：已设置保密

pojin (ID: 2)

等级：风云使者

积分：318
发帖：2 篇
来自：保密
注册：2022/3/30 11:42:27
造访：2024/12/21 22:23:34

[ 第 3 楼 ]

深入浅出，好多都是第一次听说，厉害！

2022/5/30 8:45:41

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 4 楼 ]

弄一个功能更完整的模板绑定：

self.mock = { icon: "http://bbs.fengyun.org/Upload/JsAspBBS/2204/01/112044.461.jpg", nick: "测试" };

class ListItem extends HTMLElement {
	constructor() { super(); if(this.getAttribute("is")) this.bind(self.mock || 0); }

bind(data) {
		var tempid = this.getAttribute("is") || this.dataset.tempid;
		var node = document.getElementById(tempid).content.cloneNode(true);
		var expr = str => new Function("data", "with(data) { return " + str + "; }");
		node.querySelectorAll("[data-if]").forEach(x => {
			var show = false;
			try { show = expr(x.dataset["if"])(data); }
			catch(err) { console.log("data-if: " + x.dataset["if"] + ":", err.message); }
			if(!show) x.remove();
			else if("else" in ((x.nextElementSibling || 0).dataset || {})) x.nextElementSibling.remove();
		});
		var setAttr = str => node.querySelectorAll(`[data-${str}]`).forEach(x => {
			var pro = { "class": "className", "style": "cssText", "html": "innerHTML" };
			var tag = str == "style" ? x.style : x;
			try { tag[str in pro ? pro[str] : str] = expr(x.dataset[str])(data); }
			catch(err) { console.log(`data-${str}:` + x.dataset[str] + ":", err.message); }
		});
		setAttr("class"); setAttr("style"); setAttr("href"); setAttr("src");
		setAttr("checked"); setAttr("disabled"); setAttr("html");
		var attr = { IMG: "src", INPUT: "value", TEXTAREA: "value", "SELECT": "value" };
		node.querySelectorAll("[data-fld]").forEach(x => {
			x[ attr[ x.tagName ] || "innerHTML" ] = data[x.dataset.fld];
		});
		if(this.onbind) this.onbind(node);
		if(this.dataset.shadow == "no") return this.appendChild(node);
		this.attachShadow({ mode: this.dataset.mode || "closed" }).append(node);
	}
}
customElements.define('list-item', ListItem);
</script>

[您可以先修改代码再运行]

发现如果不使用 shadow（data-shadow="no"），则 slot 不生效，且通过 getRootNode() 找到的是文档根节点。回帖字数刚好满了。

2022/6/5 23:10:36

IP：已设置保密