idea2app用户770
Web components + MobX 手写组件引擎
输入“/”快速插入内容
Web components + MobX 手写组件引擎
Web components + MobX 手写组件引擎
用户770用户7702024年3月10日创建
129
159
1
0
概述
带大家领略用 ECMAScript 装饰器语法 + Web components API 实现 WebCell 3.0 轻量 Web 组件引擎的过程。
先验知识
讲师水歌
•
Web/JavaScript 全栈开发者
•
•
WebCell 前端开源框架作者
•
freeCodeCamp 成都主理人
•
开源社理事、项目委员会主席
•
成都开源专委会委员
•
微软 MVP
•
致力于在开放生态中为社会创造价值
1.
Web components 标准写法
1.1
<template /> 写法
标准早期的 HTML import 规范被废除后，依赖 <template /> 的组件代码无法独立为 .html 文件，只能写在主文档。
代码块
<html>
<body>
<template>
<h1>Hello, Web components!</h1>
</template>
<script>
const { content } = document.currentScript.previousElementSibling;
class MyElement extends HTMLElement {
constructor() {
super()
.attachShadow({ mode: 'open' })
.append(content.cloneNode(true));
}
}
customElement.define('my-tag', MyElement);
</script>
<my-tag></my-tag>
</body>
</html>
1.2
class + 模板字符串写法
class 代码长了就容易忽略 customElement.define()，不方便书写、阅读。
代码块
class MyElement extends HTMLElement {
constructor() {
super()
.attachShadow({ mode: 'open' })
.innerHTML = `
<h1>
Hello, Web components!
</h1>`;
}
}
customElement.define('my-tag', MyElement);
代码块
<html>
<head>
<script src="my-tag.js"></script>
</head>
<body>
<my-tag></my-tag>
</body>
</html>