自定义 Javascript 模板规则，打造轻量级模板引擎

直接贴 TemplateHelper 代码了：

var TemplateHelper = {
    englishChars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    beginForeachChars: "{$foreach begin$}",
    endForeachChars: "{$foreach end$}",
    beginIfChars: "{$if begin$}",
    endIfChars: "{$if end$}",
    validateBeginEndTagGrammar: function (template, beginTag, endTag)
    {
        if (!template)
        {
            return { success: false, message: "", beginIndex: -1, endIndex: -1 };
        }
        var beginTagIndex = template.indexOf(beginTag);
        var endTagIndex = template.indexOf(endTag);
        if (beginTagIndex == -1 && endTagIndex == -1)
        {
            // 没有需要 foreach 的内容
            return { success: false, message: "", beginIndex: beginTagIndex, endIndex: endTagIndex };
        }
        if (beginTagIndex == -1 || endTagIndex == -1)
        {
            // 缺失 foreach begin 或者 foreach end
            return {
                success: false,
                message: "模板有错误，模板里面缺失 " + beginTag + " 或 " + endTag + "。\n" + template,
                beginIndex: beginTagIndex,
                endIndex: endTagIndex
            };
        }
        if (beginTagIndex > endTagIndex)
        {
            return {
                success: false,
                message: "模板有错误，" + beginTag + " 必须位于 " + endTag + " 的前面！\n" + template,
                beginIndex: beginTagIndex,
                endIndex: endTagIndex
            };
        }
        return { success: true, message: "", beginIndex: beginTagIndex, endIndex: endTagIndex };
    },
    validateForeachGrammar: function (template)
    {
        return this.validateBeginEndTagGrammar(template, this.beginForeachChars, this.endForeachChars);
    },
    validateIfGrammar: function (template)
    {
        return this.validateBeginEndTagGrammar(template, this.beginIfChars, this.endIfChars);
    },
    getTagCoreContent: function (template, beginTag, endTag)
    {
        if (!template)
        {
            return "";
        }
        var data = this.validateBeginEndTagGrammar(template, beginTag, endTag); // 验证模板的语法
        if (!data.success)
        {
            // 失败
            if (data.message.length > 0)
            {
                alert(data.message);
            }
            return "";
        }
        return template.substring(data.beginIndex + beginTag.length, data.endIndex);
    },
    getForeachCoreContent: function (template)
    {
        return this.getTagCoreContent(template, this.beginForeachChars, this.endForeachChars);
    },
    getIfCoreContent: function (template)
    {
        return this.getTagCoreContent(template, this.beginIfChars, this.endIfChars);
    },
    replaceTagCoreContent: function (template, newForeachContent, beginTag, endTag)
    {
        if (!template || !newForeachContent)
        {
            return template;
        }
        var data = this.validateBeginEndTagGrammar(template, beginTag, endTag); // 验证模板的语法
        if (!data.success)
        {
            // 失败
            if (data.message.length > 0)
            {
                alert(data.message);
            }
            return template;
        }
        return template.substr(0, data.beginIndex) + newForeachContent + template.substr(data.endIndex + endTag.length);
    },
    replaceForeachCoreContent: function (template, newForeachContent)
    {
        return this.replaceTagCoreContent(template, newForeachContent, this.beginForeachChars, this.endForeachChars);
    },
    replaceIfCoreContent: function (template, newForeachContent)
    {
        return this.replaceTagCoreContent(template, newForeachContent, this.beginIfChars, this.endIfChars);
    },
    removeTagCoreContent: function (template, beginTag, endTag)
    {
        if (!template)
        {
            return template;
        }
        var data = this.validateBeginEndTagGrammar(template, beginTag, endTag); // 验证模板的语法
        if (!data.success)
        {
            // 失败
            if (data.message.length > 0)
            {
                alert(data.message);
            }
            return template;
        }
        return template.substr(0, data.beginIndex) + template.substr(data.endIndex + endTag.length);
    },
    removeForeachCoreContent: function (template)
    {
        return this.removeTagCoreContent(template, this.beginForeachChars, this.endForeachChars);
    },
    removeIfCoreContent: function (template)
    {
        return this.removeTagCoreContent(template, this.beginIfChars, this.endIfChars);
    }
};

var TemplateConfig = {
    reg_rowNum: new RegExp('{\\$rowNum\\$}', 'ig'),
    reg_englishChar: new RegExp('{\\$englishChar\\$}', 'ig')
};

 

也许你还会喜欢：

一个简单的 JavaScript 模板引擎

一个轻量级 Javascript 模板引擎 front.js【二】

谢谢浏览！