Vue中模板編譯

時間 2019-12-28

標籤 vue 模板編譯简体版

原文原文鏈接

　　你們好，今天我給你們講解一下Vue中模板編譯是如何實現的。html

　　1.　首先咱們先建立一個Vue的構造函數，在Vue中，若是有 el 的值咱們就 new 一個 Compile 模板的實例，固然這個實例尚未建立哈！vue

class Vue{
    constructor(options) {
        this.$el = options.el;
        this.$data = options.data;
        //這個根元素存在則編譯模板
        if(this.$el){
            //模板編譯
            new Compiler(this.$el,this);
        }
    }
}

　　 2.　這個模板編譯呢，主要是有這樣幾步node

1. 　判斷 el 是不一個元素，若是是的話，咱們直接用就行了，若是不是咱們就再去獲取咯！
2. 　咱們要把這個 el 元素中的全部內容所有放到文檔碎片中，這樣的話咱們只須要編譯文檔碎片就行了，而不須要去在操做 dom，也就是實現了數據編譯
3. 　最後咱們再把編譯好的文檔碎片放入這個 el 元素中

　　接下來就讓咱們建立一個 Compile 模板的構造函數吧！數組

class Compile{
      constructor(el,vm) {
        this.vm = vm;
        //判斷el屬性 是否是一個元素 不是就獲取
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        console.log(this.el);
        
        //把當前的節點元素 獲取到 放到內存中 建立文檔碎片
        let fragment = this.node2fragment(this.el);
        
        //模板編譯 用數據編譯
        this.compile(fragment);
        
        //把內容在塞到頁面中
        this.el.appendChild(fragment);
    }            
}

　　上面的呢咱們是否是用到了幾個方法，固然了，這個方法也尚未寫呢。。。app

　　這幾個方法呢，都是Compile的原型上的！　咱們來寫一下啦！dom

//獲取全部元素,放到內存中
    node2fragment(node){
        //建立一個文檔碎片
        let fragment = document.createDocumentFragment();
        let firstChild;
        
        //將node節點的的第一個節點給firstChild 若是node節點的的第一個節點爲空則結束
        while(firstChild = node.firstChild){ 
            //appendChild具備移動性
            fragment.appendChild(firstChild);
        }
        return fragment;
    }
    
    // 是否是元素節點
    isElementNode(node){
        return node.nodeType === 1;
    }

　　下面這個方法呢，就是模板的核心方法啦，用它來實現數據編譯函數

//用來編譯內存中的dom節點 核心方法
    compile(node){ 
        let childNodes = node.childNodes; //獲取node的全部子節點
        [...childNodes].forEach(child=>{
            if(this.isElementNode(child)){ //判斷是否是元素節點
            
                this.compileElement(child); //編譯元素指令
                
                //若是是元素節點的話 須要把本身傳不進去 再去遍歷子元素節點
                this.compile(child);
            }else{ //文本元素
                this.compileText(child); //編譯文本指令
            }
        })
    }

　　這個幾個方法就是 compile 這個核心方法所用的方法！this

　　CompileUtil 是全局對象對象，分別儲存對應着不一樣的方法在下面將會建立spa

//判斷屬性是否是以 v- 開頭
    isDirective(attrName){
        return attrName.startsWith('v-');
        // return /^v-/.test(attrName)
    }
    
    //編譯元素的
    compileElement(node){
        let attributes = node.attributes; //類數組, 獲取全部node節點的屬性和屬性值
        
        attributes = [...attributes]
        //console.log(attributes)
        attributes.forEach(attr=>{ //是一個屬性對象attr
            let {name, value:expr} = attr; //:expr是給value起一個別名叫 expr **school.name
            //判斷是否是vue指令
            if(this.isDirective(name)){
                let [,directive] = name.split('-');
                let [directiveName, eventName] = directive.split(':');
                //須要調用不一樣的指令來處理 *** v-if v-modle v-show v-else
                CompileUtil[directiveName](node,expr,this.vm,eventName);
            }
        })
    }
    
    //編譯文本的
    compileText(node){ //判斷節點中是否包含 {{}}
        let content = node.textContent;
        if(/\{\{.+?\}\}/.test(content)){
            CompileUtil['text'](node,content,this.vm);
        }
    }

　　由於 vue 中的指令不一樣，因此咱們要調用不一樣的方法，這裏呢，就建立了一個 CompileUtil 的全局對象對象，分別儲存對應着不一樣的方法code

CompileUtil = {
    
    //根據表達式獲取對應的數據
    getVal(vm,expr){ 
        // reduce() 方法
         //  函數的參數 （第一參數）1.相加的初始值，2.循環出來的那一項，3.索引 4.循環的數組
         //  （第二個參數）初始值
         //  返回值：總和的結果
        return expr.split('.').reduce((data,current)=>{ //[school,name] 
            return data[current];
        },vm.$data);
    },
    model(node,expr,vm){ //node是節點  expr是表達式 vm是實例
        let fn = this.updater['modelUpdater'];
        let value = this.getVal(vm,expr);
        fn(node,value);
    },
    html(node,expr,vm,eventName){
        let fn = this.updater['htmlUpdater']
        
        let value = this.getVal(vm,expr);
        
        fn(node,value);
    },
    text(node,expr,vm){
        let fn = this.updater['textUpdater']
        //console.log(expr) :{{ school.name }}
        let content = expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{ 
            //console.log(args) :["{{ school.name }}", " school.name ", 0, "{{ school.name }}"]
            
            return this.getVal(vm,args[1].trim());
        })
        // console.log(content) 
        fn(node,content);
    },
    updater: {
        //把數據插入到value中
        modelUpdater(node,value){ 
            node.value = value;
        },
        htmlUpdater(node,value){
            node.innerHTML = value;
        },
        //處理文本節點
        textUpdater(node,value){
            //textContent 屬性設置或返回指定節點的文本內容，以及它的全部後代。
            node.textContent = value;
        }
    }
}

這樣的話，咱們的模板編譯就完成啦！複製代碼去試一下吧！

下面這個是一個模板編譯的總體代碼

/**
 * 模板編譯
 */
class Compiler{
    constructor(el,vm) {
        this.vm = vm;
        //判斷el屬性 是否是一個元素 不是就獲取
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        console.log(this.el);
        
        //把當前的節點元素 獲取到 放到內存中 建立文檔碎片
        let fragment = this.node2fragment(this.el);
        
        //把節點中的內容進行替換
        
        //模板編譯 用數據編譯
        this.compile(fragment);
        
        //把內容在塞到頁面中
        this.el.appendChild(fragment);
    }
    
    //判斷屬性是否是以 v- 開頭
    isDirective(attrName){
        return attrName.startsWith('v-');
        // return /^v-/.test(attrName)
    }
    
    //編譯元素的
    compileElement(node){
        let attributes = node.attributes; //類數組, 獲取全部node節點的屬性和屬性值
        
        attributes = [...attributes]
        //console.log(attributes)
        attributes.forEach(attr=>{ //是一個屬性對象attr
            let {name, value:expr} = attr; //:expr是給value起一個別名叫 expr **school.name
            //判斷是否是vue指令
            if(this.isDirective(name)){
                let [,directive] = name.split('-');
                let [directiveName, eventName] = directive.split(':');
                //須要調用不一樣的指令來處理 *** v-if v-modle v-show v-else
                CompileUtil[directiveName](node,expr,this.vm,eventName);
            }
        })
    }
    
    //編譯文本的
    compileText(node){ //判斷節點中是否包含 {{}}
        let content = node.textContent;
        if(/\{\{.+?\}\}/.test(content)){
            
            CompileUtil['text'](node,content,this.vm);
        }
        
    }
    
    //用來編譯內存中的dom節點 核心方法
    compile(node){ 
        let childNodes = node.childNodes; //獲取node的全部子節點
        [...childNodes].forEach(child=>{
            if(this.isElementNode(child)){ //判斷是否是元素節點
            
                this.compileElement(child); //編譯元素指令
                
                //若是是元素節點的話 須要把本身傳不進去 再去遍歷子元素節點
                this.compile(child);
            }else{ //文本元素
                this.compileText(child); //編譯文本指令
            }
        })
    }
    
    //獲取全部元素,放到內存中
    node2fragment(node){
        //建立一個文檔碎片
        let fragment = document.createDocumentFragment();
        let firstChild;
        
        //將node節點的的第一個節點給firstChild 若是node節點的的第一個節點爲空則結束
        while(firstChild = node.firstChild){ 
            //appendChild具備移動性
            fragment.appendChild(firstChild);
        }
        return fragment;
    }
    
    // 是否是元素節點
    isElementNode(node){
        return node.nodeType === 1;
    }
}

CompileUtil = {
    
    //根據表達式獲取對應的數據
    getVal(vm,expr){ 
        // 7. reduce() 方法
         //  函數的參數 （第一參數）1.相加的初始值，2.循環出來的那一項，3.索引 4.循環的數組
         //  （第二個參數）初始值
         //  返回值：總和的結果
        return expr.split('.').reduce((data,current)=>{ //[school,name] 
            // console.log(data,current)
            return data[current];
        },vm.$data);
    },
    model(node,expr,vm){ //node是節點  expr是表達式 vm是實例
        console.log(node)
        let fn = this.updater['modelUpdater'];
        
        
        let value = this.getVal(vm,expr);
        // console.log(value)
        fn(node,value);
    },
    html(node,expr,vm){
        let fn = this.updater['htmlUpdater']
        
        let value = this.getVal(vm,expr);
        
        fn(node,value);
    },
    text(node,expr,vm){
        let fn = this.updater['textUpdater']
        //console.log(expr) :{{ school.name }}
        let content = expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{ 
            //console.log(args) :["{{ school.name }}", " school.name ", 0, "{{ school.name }}"]
            
            return this.getVal(vm,args[1].trim());
        })
        // console.log(content) 
        fn(node,content);
    },
    updater: {
        //把數據插入到value中
        modelUpdater(node,value){ 
            node.value = value;
        },
        htmlUpdater(node,value){
            node.innerHTML = value;
        },
        //處理文本節點
        textUpdater(node,value){
            //textContent 屬性設置或返回指定節點的文本內容，以及它的全部後代。
            node.textContent = value;
        }
    }
}

class Vue{
    constructor(options) {
        this.$el = options.el;
        this.$data = options.data;
        //這個根元素存在則編譯模板
        if(this.$el){
            
            //模板編譯
            new Compiler(this.$el,this);
        }
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。