(三十二)模板引擎的簡單實現







//template.js

(function(root){

    function extend(){
        var target = arguments[0] || {};
        var len = arguments.length;
        var key,options,i = 1;      //變量初始的值i從1開始;因爲第一個傳入的是target,從第二個開始遍歷即templateSettings和settings這兩個進行遍歷
        if(typeof target != 'object'){return {};}
        for(;i < len;i++){
            if((options = arguments[i]) != null){
                for(key in options){
                    console.log(key)
                    target[key] = options[key];
                }
            }
        }
        return target;
    } 

    //默認配置解析規則
    var templateSettings = {
        evalute:/<%([\s\S]+?)%>/g,         //邏輯代碼的捕獲
        interpolate:/<%=([\s\S]+?)%>/g,         //訪問數據的捕獲
        escape:/<%-([\s\S]+?)%>/g,         //逃逸字符的捕獲
    }


    var template = function(text,settings){
        //settings是代表用戶的配置
        //extend;(templateSettings)默認配置爲優先,(settings)用戶配置爲替換的一種方案;擴展加上覆蓋
        settings = extend({},templateSettings,settings);
        console.log(settings)
        //source是取得對應值之後將正則對象轉化成字符串
        var matcher = new RegExp([
            settings.interpolate.source,
            settings.escape.source,
            settings.evalute.source
        ].join('|'),'g');   //將上面的由正則對象轉換承德字符串的數組組合起來用邏輯或分割;邏輯或代表模式;其中g代表全局匹配
        console.log('matcher:')
        console.log(matcher)//模板字符串

        var index = 0;      //切割的起點
        var source;
        text.replace(matcher,function(match,interpolate,escape,evalute,offset){
	//replace如果傳入的是一個函數,那麼每個匹配都會調用該函數;該函數的第一個參數是指匹配模式的字符串;後面穿進去的分別是相對應的模式;offset是指當前模板字符串與整個正則匹配的第一個下標值;也就是除了模板字符串之外的東西當遇到模板字符串後的第一個下編制


            source = text.slice(index,offset);//拿到除了模板字符串之外的數據
            console.log(source)

            index = offset+match.length;//重置下次掃面起點;比如第一次是開始到第一次找到模板字符串;那麼從0到offset就是沒有匹配的部分,那麼第一個模板字符串之後要找到第二個沒有匹配的部分就要用第一次找到模板字符串的位置加上木板子婦產匹配到的長度,那麼這就是第二次找到不是模板字符串的起點

            if(interpolate){

            }else if(escape){

            }else if(evalute){

            }
        });
        //模板引擎:依賴於植入字符串;通過字符串的拼接等方式來實現原本需要用js邏輯來實現的東西
        /**
         * 1、截取
         * 2、拼接
         * 3、組織邏輯
         * 4、渲染函數處理(解析)
         */
        var render = new Function('obj','with(obj){}');
        var template = function(data){
            return render.call(this,data)//綁定渲染函數的作用域;獲取調用template的時候的data
        }
        return template;//返回template方法
    }
    root.template = template;
})(this);

github地址

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