自定义 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【二】

谢谢浏览!

转载于:https://www.cnblogs.com/Music/archive/2013/03/11/javascript-custome-template-helper.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值