首页 > 其他分享 >一个关于样式管理器的 Styled 对象!~~

一个关于样式管理器的 Styled 对象!~~

时间:2023-03-27 11:25:16浏览次数:26  
标签:style xid 样式 styled return Styled 管理器 datas

const Styled = function(dom, styled, datas, isOnlyXid){
        this.xid = isOnlyXid || getXid();    
        this.dom = dom;
        this.dom.classList.add(this.xid);
        this.styled = styled.replace(/\t|\n/g,"");
        this.datas = datas;
        
        this.styleElement = this.createStyle();
        this.render();
    }
    
    Styled.prototype = {
            
        // 生成唯一识别码
        createStyle (){
            const o = document.head.querySelector("."+this.xid);
            if( o ){ 
                return o;
            }
            
            const style = document.createElement("style");
            document.head.appendChild(style);
            style.classList.add(this.xid);
            return style;
        },
        
        setDatas(opt) {
            this.datas = Object.assign(this.datas, opt);
            this.render();
        },
        
        render (){
            // this.styleElement.innerHTML = eval(`()=>{ var {${Object.keys(this.datas)}} = this.datas, xid=${this.xid}; return {} }()`);
            this.styleElement.innerHTML = function(){ 
                eval(`var {${Object.keys(this.datas)}} = this.datas, xid="${this.xid}"`); 
                return eval("\`"+this.styled+"\`");
            }.call(this);
        }
    }

 

标签:style,xid,样式,styled,return,Styled,管理器,datas
From: https://www.cnblogs.com/liao1992/p/17260914.html

相关文章

  • 解决 前端 设置滚动条的宽度后 滚动条消失的问题(解决ie浏览器样式无效的问题)
    .op{flex:1;width:90%;flex-direction:column;overflow:auto;height:90%;padding-right:5px;}.op::-webkit-scrollbar{width:5px;}.op::......
  • CSS的三种样式及选择器
    一.概述css一共有三种样式,分别是:行内样式,内部样式,外部样式行内样式:写入在HTML标签内,是最不规范的写法,没有突出HTML+CSS的关键就是骨架和美化分离,这样写在一起的行内样式,......
  • 主题样式修改
    首先要获取JS权限,否则后面不用看了博客皮肤将默认皮肤改为SimpleMemory博客侧边栏公告<scripttype="text/javascript">window.cnblogsConfig={title:......
  • 》》》IDEA Mybatis中xml文件粘贴SQL导致左对齐,样式发生变化
    转载:IDEAMybatis中xml文件粘贴SQL导致左对齐,样式发生变化_ideamybatissql格式_诛心小恶魔的博客-CSDN博客IDEA在编辑mybatis中xml文件的时候,默认是不保留粘贴文本的缩......
  • 了解npm 包管理器
    npm是Node.js包管理器,也是一个流行的开源工具。它允许用户在Node.js应用程序中安装、使用和管理第三方库和模块。什么是npm?npm是一个Node.js包管理器,它允......
  • CSS鼠标样式(cursor)总结(转载)
    CSS鼠标样式(cursor)总结 属性值示意图描述auto 默认值,由浏览器根据当前上下文确定要显示的光标样式default默认光标,不考虑上下文,通常是一个箭头none......
  • element-plus的el-dialog对话框组件自定义样式未生效
    修改dialog组件样式必须在非scoped环境下,再加一个style标签,并给需要加的dialog一个类名eg:createDialog<stylelang="scss"scoped>...</style><stylelang="scss">.crea......
  • vue2中添加全局样式
    在assets文件夹中创建一个css文件,放入想要的全局样式.好了之后找到main文件然后再main.js文件中import'./assets/golbal.css'即可......
  • CSS03.字体样式
    字体样式1.CSS外观属性1.1color:文本颜色作用:color属性用于定义文本的颜色其取值方式有如下3种:表示属性值预定义的颜色值(预设值:定义好的单词)red、green......
  • 俩个数组中找出相同的元素,并添加样式
    result.Tags.tags.forEach((item,index)=>{letidx1=result.Tags.lightHighArr.indexOf(item)letidx2=result.Tags.wordArr......