templateEngine

[ynchuan]

const list = {
    data: [{
        name: 'movie',
        type: '@1'
    }, {
        name: 'tv',
        type: '@1'
    }, {
        name: 'comic',
        type: '@1'
    }, {
        name: 'show',
        type: '@1'
    }],
    $i18n: function (a) {
        return a;
    }
};
const fs = require('fs');
const path = require('path');
const tmpl = fs.readFileSync(path.resolve(__dirname, './test.tmpl'), 'utf-8');

class TemplateEngine {
    constructor(opt) {
        this.opt = opt;
        this.lreg = /<%(.+?)%>/g;
        this.creg = /(^( )?(var|if|for|else|switch|case|break|continue|{|}|;))(.*)?/g
    }
    getFnStr(tmpl) {
        let line;
        let cursor = 0;
        this.fnStr = ['var html=[]; with(obj){'];
        while (line = this.lreg.exec(tmpl)) {
            let sub = tmpl.substring(cursor, line.index);
            this.addSnippet(sub, 0);
            this.addSnippet(line[1], 1);
            cursor = line.index;
            cursor += line[0].length;
        }
        let sub = tmpl.substring(cursor);
        this.addSnippet(sub, 0);
        this.fnStr.push('}\n');
        this.fnStr.push('return html.join(\'\')');
        return this.fnStr.join('');
    }
    addSnippet(snippet = '', isJs = 0) {
        snippet = snippet.trim()
            .replace(/'/g, '\"')
            .replace(/"/g, '\"')
            .replace(/\n/g, '');

        let segment = 'html.push(\"\")';

        if (snippet) {
            if (isJs) {
                if (snippet.match(this.creg)) {
                    segment = snippet;
                }
                else if (snippet.indexOf('=') === 0) {
                    snippet = snippet.substring(1, snippet.length);
                    segment = `$i18n?$i18n(${snippet}):${snippet}`;
                    segment = `html.push(${segment})`;
                }
                else {
                    segment = `html.push(${snippet})`;
                }
            }
            else {
                segment = `html.push('${snippet}')`;
            }
        }
        this.fnStr.push(`${segment}\n`);
    }
    transform(tmpl, data) {
        let fnStr = this.getFnStr(tmpl);
        this.writeFile(fnStr, 'js');

        let fn = new Function('obj', fnStr);
        let rst = fn(data);
        return rst;
    }
    writeFile(str, type) {
        if (this.opt.debug) {
            let fileName = `test-${new Date().getTime()}.${type}`;
            fs.writeFileSync(path.resolve(__dirname, fileName), str);
        }
    }
}
let argv = process.argv;
let debug = argv[2] && argv[2] === '--debug';
let template = new TemplateEngine({
    debug
});
let rst = template.transform(tmpl, list);
template.writeFile(rst, 'html');

• node index.js --debug
• reference

[ynchuan]

<div class="iqiyivip-works">
    <h2 class="works-head"></h2><% for (var i = 0; i < data.length; i++) {%>
        <% var work = data[i] %>
        <div class="works-type iqiyivip-<%=work.type%>" data-type="<%=work.type%>">
            <h2 class="h2-work">
                <%=work.name%>
            </h2>
            <%if(work.name==="movie"){%>
                <p class='p-work-movie'>
                </p>
            <%}else{%>
                <p class='p-work'>
                    <span class="s-work">
                       <%=work.name%>
                    </span>
                </p>
            <%}%>
        </div>
    <%}%>
</div>

• test.tmpl