原生JS创建假的DOM对象

最新推荐文章于 2024-01-05 15:27:39 发布

代码的浪漫

最新推荐文章于 2024-01-05 15:27:39 发布

阅读量141

点赞数

分类专栏： JavaScript JavaScript练习文章标签： javascript 前端 web js

本文链接：https://blog.csdn.net/World11_/article/details/124424143

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript练习

6 篇文章 0 订阅

订阅专栏

<script>

    function MyDOM(id, myclass, style, data_text, textContent){

        this.id = id;
        this.class = myclass;
        this.style = style;
        this['data-text'] = data_text;
        this.textContent = textContent;

        this.html = function (mytextContent) {
            mytextContent = '';
            if (mytextContent) {
                return this.textContent += mytextContent;
            }
            return this.textContent
            console.log(mytextContent);
        }
    }

    class VirtualDOM{
        
        creatDOM(domName, double = true, textContent = '', prop = {}) {
            let attr = '';

            for (let x in prop) {
                attr += ` ${x} = "${prop[x]}" `;
            }

            if (!textContent) {
                return undefined;
            } else {
                this.textContent = textContent;
            }
            
            if (double){
                return `<${domName}${attr}>${textContent}</${domName}>`
            } else{
                return `<${domName}${attr}>${textContent}`
            }

            
        }

    }
    
    
    let virtualdom = new VirtualDOM();
    console.log(virtualdom.creatDOM('div', false, '内容', {id: 'box', class: 'mybox', style: 'padding: 1px', data_text:'假DOM'}));

    
    VirtualDOM.getInstance = (function() {

        let instance;

        return function(id, myclass, style, data_text) {
            if (!(instance instanceof VirtualDOM)) {
                instance = new MyDOM(id, myclass, style, data_text);
            }

            return instance;
        }
    })()

    let virtualdom2 = VirtualDOM.getInstance('box', 'mybox','padding: 1px', '假DOM');

    console.log(virtualdom2);
    
</script>