Xianqiao Wang

Xianqiao Wang

Some records of life and study

不需要“编译”的前端富应用开发模式



目标：
  2. 功能全，自定性能高
  3. 速度快，

概念的核心是 Web Component，但 Web Component + Shadow DOM 是不适用于 APP，因为：
  • URL Hash 没用了 // 找不到具有该 id 的内置元素, :target 伪类也没用了，但 ::target-text 能用
  • document.activeElement 没用了 // 好像可以模拟
  • document.addEventListener 小心用，有些事件默认不冒出 ShadowDOM // Event.target 不准确
  • 不方便集成 React/Vue 组件 // slot、gem-frame
  • 样式不能穿透（自定义样式）；选择不到或者不能继承的属性不方便共享；
    // ShadowDOM 中使用 可以解决
    // ::slotted // 注意一个空格就能占用插槽
    // 单层穿透 ::part，多层穿透 ::theme // 类似原生元素的伪类选择
    // Constructable Stylesheet Only actually parse the stylesheet when the first instance is connected.
  • 不能重复定义元素（作为外部库时影响大）
  • // 命名范围 // 名称可能会很长

slot 的问题：
  • 总是挂载
  • slot 未分配时可以占位，但分配时不能添加额外元素

https://forum.palemoon.org/viewtopic.php?f=1&t=24004 // 但是保存并不是那么重要
https://dev.to/richharris/why-i-don-t-use-web-components-2cia

模块化使用 ES6 Modules
  • HTTP2 Server Push 提前加载深层依赖 // 安装（skypack/jspm/npm 内容）依赖到本地
  • 无法单独为一个模块使用强制缓存
  • 如何使用依赖的打包/压缩版本？
  • 慢
JS 类型标记 // 使用 jsdoc/ts
ICON 使用自定义 ShadowDOM 元素（不能使用 SVG // 片段标识不能越边界，讨论）
全局布局 CSS 阻塞渲染
组件使用 Web Component（包含组件样式）
// 每个 ShadowDOM 都有