反向使用Javascript模板语言

前端之家收集整理的这篇文章主要介绍了反向使用Javascript模板语言前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有像模板引擎(la Mustache.js)可以在“反向”进行模板操作?

这意味着我提供了渲染的html和模板文件,通过引擎运行它,并从中获取数据(比如一个JSON结构).

我意识到这是可以使用“屏幕抓取库”完成的事情,但我从未见过使用胡须样式模板的屏幕抓取库(无论那些被称为).

解决方法

通用解决方案不存在.例如.你永远不能颠倒以下模板:{{foo}} {{bar}},因为无法找到第一个胡子停止的位置,第二个胡须开始.

例如:

html: 'hello world!'
template: '{{foo}}{{bar}}'
model: {
    foo: '',bar: 'hello world!'
}
model2: {
    foo: 'hello world!',bar: ''
}

model和model2都从模板中呈现完全相同的html,因此它们都是有效的反转.

但是,如果您为模板制定了一些规则,则可以毫不含糊地执行此操作.

规则:

>两个胡子永远不会碰(如上所述).
>小胡子内容的开头永远不能与小胡子之后的第一个文字部分相同(或者我们找不到小胡子的末尾).
>节中的第一个文本部分不能与节后的第一个文本部分相同(或者我们找不到该节的结尾).
>最好不要使用richtext {{{}}}小胡子(它允许包含任何内容,因此反向匹配意味着它可以匹配文档的其余部分).

这些规则似乎对明文非常严格,但对于xml和html,它们工作得很好(如果你只对元素和属性内容感兴趣).如果您仅使用明文{{}}胡须,则规则二绝不是问题.

例如,可以颠倒以下模板而不会产生任何歧义:

<div>
    <p>{{title}}</p>
    <ul>
        {{#list}}
            <li>{{item}}</li>
        {{/list}}
    </ul>
</div>

但是添加另一个< li>就在< / ul>之前会使模板模糊不清(规则3).

我没有找到任何在线代码,所以我开始为此编写一个库.但到目前为止还没有完成,每次我研究它时,我都会发现新的局限性.只有真正简单的模板才能正常工作(我允许的唯一必须是{{}},{{#}}和{{/}}).

我找到了使用另一个模板系统的解决方案:https://github.com/fabiomcosta/mootools-meio-template/tree/master.它似乎有相同的限制.

猜你在找的JavaScript相关文章