NetCore3.1使用nacos訪問阿里雲ACM配置中心中KVM加密後的配置

阿新 • • 發佈：2020-09-17

一：完整程式碼

;(function (w){
    function createElement(type, attribute, ...childs){ //建立虛擬DOM 
        let element = { 
            type: '', 
            attribute: {}, 
            childs: [] 
        }; 
        element.type = type; 
        element.attribute = attribute; 
        for(let item of childs){ 
            element.childs.push(item); 
        } 
        return element; 
    }
    function render(vElement, domNode){ //把虛擬DOM渲染到真實DOM節點 
        let elementList = [], //儲存著一些元素陣列，這些元素陣列的第一項是父元素，其他項是子元素 
            listItem = [], //迭代中臨時儲存elementList的每一項 
            topE = [vElement], //儲存著上一層元素列表 
            tempE = [], //topE的臨時變數 
            elementRef = [], //儲存元素引用，不儲存文字節點的引用 
            elementRefs = []; //另一個，交替使用 
        while(topE.length != 0){ //生成符合符合要求的elementList陣列 
            for(let i = 0, len = topE.length; i < len; ++i){ //建立父元素並新增到listItem 
                let pe = null;
                if(elementRef.length != 0){ 
                    pe = elementRef[i];
                }else{ 
                    pe = document.createElement(topE[i].type);
                    for(let k in topE[i].attribute){
                        pe[k] = topE[i].attribute[k];
                    }
                }
                listItem.push(pe); //遍歷並建立子元素新增到listItemlet 
                ce = topE[i].childs;
                for(let j =0, lens = ce.length; j < lens; ++j){
                    if(typeof(ce[j]) == 'string'){  //如果子元素是字串let 
                        textElement = document.createTextNode(ce[j]);  //建立文字節點 
                        listItem.push(textElement);
                    }else{  //如果子元素是物件
                        let e = document.createElement(ce[j].type);  //建立元素節點
                        for(let k in ce[j].attribute){ 
                            e[k] = ce[j].attribute[k];
                        } 
                        listItem.push(e); 
                        elementRefs.push(e);  //儲存元素節點的引用 
                        tempE.push(ce[j]);  //放入tempE
                    }
                }  //把listItem新增到elementList，並清空listItem，為下一次迴圈做準備 
                elementList.push(listItem); 
                listItem =[];
            }  //交替使用 
            elementRef = elementRefs; 
            elementRefs =[]; 
            topE = tempE; 
            tempE = [];
        }
        for(let i = elementList.length -1; i >= 0; --i){  //從後向前對elementList陣列進行處理
            let temp = elementList[i];
            for(let j = 1, len = temp.length; j < len; ++j){ 
                temp[0].appendChild(temp[j]);
            }
        } 
        domNode.innerhtml = ""; 
        domNode.appendChild(elementList[0][0]);  //把生成的真實dom元素新增到給定的元素內
    }
    let Vdom = {
        createElement, 
        render 
    }; 
    w.Vdom = Vdom;
})(window);

二：語法說明

1：該程式向全域性暴露了一個Vdom物件，Vdom提供了兩個方法，createElement()，render()，分別用於建立元素及把虛擬dom渲染到真實dom節點

2：createElement()的第一個引數是元素型別，比如p，h1等，第二個引數是屬性集合物件，比如{title:'Hello World',style:'color:red;'}，之後可以接受任意個引數，每個引數都是一個元素節點或者文字節點

3：render()的第一個引數是用createElement()方法建立的虛擬元素，第二個引數是將要渲染到的區域元素

三：需要注意的點

提供的Vdom.createElement()、Vdom.render()函式和

react的react.createElement()及ReactDOM.render()方法非常相似

四：案例演示

新建一個資料夾，進入，新建一個vdom.js檔案，把完整程式碼貼上進去，儲存，再新建一個html檔案，貼上以下程式碼，儲存，然後雙擊開啟，在瀏覽器裡應該可以看到效果

<!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="UTF-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>虛擬dom的實現</title> 
        </head> 
        <body> 
            <div 
 id="root">
                <h1>一秒後開始計時</h1>
            </div> 
        <script src="./vdom.js"></script> 
        <script> 
            function tick(){ 
                const e = Vdom.createElement( 
                    'div', 
                    {}, 
                    Vdom.createElement( 
                        'h1', 
                        {style: 'color:red;', title: '時間'}, 
                        'time:', 
                        (new Date()).toLocaleTimeString() 
                    ) 
                ); 
                Vdom.render(e, document.getElementById('root')); 
            } 
            setInterval(tick, 1000); 
        </script> 
    </body> 
</html>