2018年4月20日 星期五

js 模版的麻煩處......


let data = [];
let x = 'lllll"{{d}}"2222';

let fn = doIt(x);

let res = fn([9],textRender);
console.dir(res);


function doIt(str) {
    let pathList = [];

    str.replace(/{{([^\{\}]*?)}}/g, function (match, g_1) {
        // 取得所有變數名稱
        // 以後可以訂定修正規則
        g_1 = g_1.trim();
        pathList.push(g_1);
        data.push(g_1);
        return '';
    });

    /*--------------------------*/
// 組織 render 函式
    let content = [];
    let contentList = str.split(/{{[^\{\}]*?}}/g);

    for (let i = 0; i < contentList.length; i++) {
        let text = contentList[i];
        text = JSON.stringify(text);
        content.push(text);
        if (typeof pathList[i] !== 'undefined') {
            let variable = '(textRender(data[' + i + ']))';
            content.push(variable);
        }
    }
    if (content.length) {
        tempContent = "let str = " + content.join('+') + ";return str;";
        content.length = 0;
    } else {
        tempContent = 'return ""';
    }

    console.log('tempContent = %s', tempContent);

// 取得 render 函式
    let renderFn = new Function('data', 'textRender', tempContent);

    return renderFn;
}

function textRender(str) {
    debugger;
    let res = str;
    if (str == null) {
        res = '';
    } else if (typeof str === 'object') {
        res = JSON.stringify(str);
    }
    return res;
}