styleTags Test
撰写时间：2025-12-24
修订时间：2025-12-25
便捷地创建使用多行字符串作为CSS样式内容的标签。
基本用法
const { styleTags } = await import('/js/esm/styleTags.js');
let widthValue = 200;
const GOLDEN_RATE = (Math.sqrt(5) - 1) / 2;
let div = styleTags.div`
width: ${widthValue}px;
height: ${widthValue * GOLDEN_RATE}px;
border: 1px solid silver;
background-color: gray;
`;
pc.appendChild(div);
styleTags的div是一个方法，以标签名div作为其函数名称，用以创建div。其内在实现使用了ES6的标签模板 (tagged template) 特性，故既可使用变量，且函数名称之后可以直接紧跟所有的CSS样式。
div方法通过Proxy代理机制来动态生成，且应用缓存管理。因此styleTags可用以方便地创建所有的HTML标签。
const { styleTags } = await import('/js/esm/styleTags.js');
let p = styleTags.p`
color: cyan;
letter-spacing: 1em;
line-height: 5em;
`;
p.textContent = 'This is a paragraph.';
pc.appendChild(p);
pStyleTags
上面解决了一次性设置众多CSS样式的问题，返回了一个所创建的HTML的标签对象，我们需自行将其添加到DOM树中。
而当创建一个标签时，除了需设置其CSS样式之外，我们可能还需一并设置众多的DOM内容，如设置文本内容、各个属性，以及添加到特定的标签之下等等。当这些一并设置的内容多了之后，我们希望将相关代码统一置于一个独立的函数中。此时，可使用pStyleTags。
与styleTags返回一个HTML的标签对象唯一不同的是，pStyleTags返回一个注入了HTML标签对象的Promise。这样，设置DOM内容的代码便有了统一的安放之处。
const { pStyleTags } = await import('/js/esm/styleTags.js');
pStyleTags.p`
color: lime;
letter-spacing: 1em;
`.then(p => {
p.textContent = 'This is a paragraph.';
pc.appendChild(p);
});
可同时使用styleTags及pStyleTags，以满足各种场合需求。
const { styleTags, pStyleTags } = await import('/js/esm/styleTags.js');
pStyleTags.div`
width: 100px;
aspect-ratio: 1 / 1;
border: 1px solid gray;
display: grid;
place-items: center;
`.then(parentDiv => {
let childDiv = styleTags.div`
width: 50px;
aspect-ratio: 1 / 1;
background-color: gray;
`;
parentDiv.appendChild(childDiv);
pc.appendChild(parentDiv);
});
