最近,我开始偏爱单个.js文件形式的可恢复UI模块,该文件使用div.innerText等操作dom.我正在开发一种类型为(a new and better one I swear)的UI框架,我计划允许其他开发人员编写自己的模块来扩展我的框架.
为了确保两个开发人员的工作不会互相干扰,我正在使我的模块独立.然后,由于它们是独立的,我可以快速甚至递归地将它们部署到页面上的任何div中；例如调用uiElement.deploy(element)通过如下代码将以元素为父元素的可重用uiElement设置为：
uiElement.deploy=function(root){
uiElement.div=document.createElement("div");
uiElement.div.innerHTML=`
<style>
button{
background:red;
}
</style>
<button>Hey!</button>`;
root.appendChild(uiElement.div);
}
一切都很好,但是在样式方面,我对于声明< style> innerHTML中的元素,因为它们可能会对其他可重用模块的样式产生不利影响.
因此,我想知道,为什么HTML标准没有决定是否要放置< style>除了< head>容器中的元素,它仅对容器的子代(即样式标签的兄弟姐妹)及其后代起作用？提升代码可重用性是一个好主意.
顺便说一句,如何避免上面提到的问题？我目前的想法是给div一个唯一的ID,然后在我的< style>标记,方法是使用regex解析innerHTML.
最佳答案
CSS代表级联样式表.级联建议将其倾倒在从根节点：document开始的每个元素上.规范指出,任何
style元素始终适用于整个文档.
对于您将自己的样式应用于元素的问题,我的解决方案.但是,此解决方案并不理想,并且可以更好地解决,因为每当添加元素时,都会使样式元素干扰文档.
uiElement.deploy=function(element,className){
uiElement.div=document.createElement("div");
uiElement.div.innerHTML=`
<style>
button.${className}{
background:red;
}
</style>
<button class="${className}">Hey!</button>`;
element.appendChild(uiElement.div);
}
最好是添加一个链接元素,该链接元素指向具有有关代码样式信息的css文件.
uiElement.deploy=function(element,className){
uiElement.div=document.createElement("div");
//link element - if not present in document: add.
if (!document.querySelector(`link[href='location/${element}.css']`))
{
const link = document.createElement("link");
link.href = `location/${element}.css'`;
document.head.appendChild(link);
}
uiElement.div.innerHTML=`
<button class="${className}">Hey!</button>`;
element.appendChild(uiElement.div);
}
样式表文件(.css)还提供了更轻松,更灵活的代码管理,如果您只想更改外观,则无需更改js文件.
即使在上述情况下,我也强烈建议为您创建的元素设置唯一的ID或类名,以使您的CSS规则有所不同,因为CSS规则对整个文档均有效.
