一個關於樣式管理器的 Styled 對象!~~

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);
        }
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章