可以将唯一标识符应用于可构造样式表吗？

Question

设置

用户交互可能导致多个组件之一被异步注入到文档中。

这些组件中的每一个都有一个关联的Constructable Stylesheet.

但是-这是关键点-任何用户交互都可以重复，并且每个组件的标记可以任意次注入文档。

无论标记被注入多少次，按理说关联的可构造样式表只需要被文档构造和采用一次.

在第一次之后它将继续确定相关标记的呈现，无论后者被注入文档多少次。

---

问题

我想了解如何唯一地识别每个可构建的样式表（例如通过一个独特的

title

属性），这样一旦它被文档第一次采用我就可以检查现有的

document.adoptedStyleSheets

和确保不会再次构建和采用相同的样式表。

我跑后：

const componentAStylesheet = new CSSStyleSheet();

然后，我尝试...

写入现有的

property

：

componentAStylesheet.title == 'Component A'; // no effect

添加一个新的

property

：

componentAStylesheet.componentTitle == 'Component A'; // no effect

编辑构造函数

prototype

：

CSSStyleSheet.prototype.title = 'Component A';  // Error: setting getter-only property "title"

向构造函数添加一个新属性

prototype

：

CSSStyleSheet.prototype.componentTitle = 'Component A'; // no effect

问题：

CSSStyleSheet

对象是否以某种方式冻结（或只读？），这就是为什么我无法添加或编辑其属性的原因？

---

尝试替代解决方案

我突然想到，我可以创建一个父对象，而不是为

myComponentAStylesheet

对象应用唯一标签：

const myComponents = {}

并且，运行后：

const componentAStylesheet = new CSSStyleSheet();

我可以手动添加以下条目：

myComponents['componentA'] = componentAStylesheet;

这仍然会给浏览器提供一种方法来辨别给定的组件相关样式表是否已经构建并被当前文档采用。

但是真的没有办法标记构造的样式表对象本身吗？

Answer 1

如果您正在寻找可以共享您的“CSSStyleSheet”的 Factory Singleton 组件，这就是解决方案。

在文件中创建一个专用类，例如“CSSStyleSheetFactory.js”。 （代码未经测试，但我每次需要创建单例时都会使用它）

class CSSStyleSheetFactory{
   constructor(){
       const hash_map={};
       this.exist=(id)=>{ return hash_map[id]!==undefined }
       this.getByID=(id)=>{ return hash_map[id] }
       this.create_replace=(id,obj)=>{ hash_map[id]=obj; }
       this.dealloc=(id)=>{ delete hash_map[id] }
   }
}

if(CSSStyleSheetFactory.instance===undefined){
     CSSStyleSheetFactory.instance= new CSSStyleSheetFactory();
}
module.exports = CSSStyleSheetFactory.instance;

然后需要的时候调用就可以了

const CSSStyleSheetFactory= require('./CSSStyleSheetFactory');
const componentAStylesheet = CSSStyleSheetFactory.exist("your id or name");

你可以在任何地方都需要这个模块，你可以用一些 console.log 检查它是否按你的需要工作。

当然，如果你在js客户端工作，如果你重新加载浏览器页面，你将失去一切，Singleton将被内存冲出（react和类似的框架也是如此）。 如果你使用的是 node.js，你将在 node.js 进程 shout-down 后丢失 Singleton 内容。

如果单例将被刷新并重新创建，您可能需要持久性以保存单例数据并重新加载它，只需在单例中添加“保存”和“加载”数据功能（使用 db 或文件、cookie、持久性、. ..).

---

无论如何，我不确定是否理解您的需求，因为该代码应该有效： （测试）

const t = new CSSStyleSheet();
t.name="test";
const check= t.name==="test"; //this is true

您应该能够向 CSSStyleSheet 的任何实例添加属性，如果是新实例，如果属性已经存在，则可能是“成本”，因此它是只读的。