跨域或 CDN 加载胡须.js/车把.js模板的最佳做法


这不是

真正的胡子.js或车把.js具体问题,但如果您尝试优化 Web 应用程序的性能加载模板,这两个框架都会遇到此问题。

现在,我正在从与应用程序其余部分相同的域加载模板,但如果可能的话,我想从CDN加载模板。 最大的问题是我无法跨浏览器无法通过 AJAX 加载文本文件。

我还可以尝试哪些其他方法来优化跨域单个模板的加载时间?

我一直致力于优化加载顺序(工作)

在头部将模板作为 xDomain 脚本文件加载(失败)

<script type='text/html' src="http://domain.cdn.com"></script>

我认为 COR 支持将仅限于浏览器的数量。

使用 YQL 会很慢。

我可以以某种方式做JSONP所做的,但是使用XML,XHTML或HTML,显然没有javascript回调吗? 也许模板的末尾可以有一个小的回调函数,但我不想包装整个东西,需要将其转义为 json。

一个想法从我的头顶上消失。

使用 RequireJS 将模板构建到单个文件中。每个模板都将包装为定义模块,并且模板将作为字符串正确转义。

因为文件将被.js所以它可以正常地从另一个域加载

因此,如果文本插件确定对资源的请求是 在另一个域上,它将尝试访问".js"版本的 资源,使用脚本标记。允许脚本标记 GET 请求 跨域。资源的.js版本应该只是一个 包含 define() 调用的脚本,该调用返回模块的字符串 价值。

示例:如果资源是"text!example.html",并且解析为 路径 在另一个 Web 域上,文本插件将执行脚本标签加载 对于"示例.html.js"。

https://github.com/requirejs/text#xhr-restrictions

如果您还编译了胡须/车把模板,它将更加高性能。下面是包装在定义调用中的已编译 Handlebars 模板的示例。Handlebars编译器负责输出,然后RequireJS构建器会将所有这些输出包含在一个文件中。

同样,没有尝试过此解决方案,但可能会使您走上正确的轨道。

我知道

我正在尝试回答一个老问题..通过在静态HTML文档中嵌入模板字符串,包装在属性类型="text/x-handlebars-template"的元素中,这是非常可行的。这称为微模板。由于 type 属性,浏览器不会尝试执行脚本。例如-

<script id="list-template" type="text/x-handlebars-template">
    <p>YUI is brought to you by:</p>
    <ul>
        {{#items}}
            <li><a href="{{url}}">{{name}}</a></li>
        {{/items}}
    </ul>
</script>

完成后,我们必须编译然后通过数据对象呈现它。

<script>
YUI().use('handlebars', 'node-base', function (Y) {
// Extract the template string and compile it into a reusable function.
var source   = Y.one('#list-template').getHTML(),
    template = Y.Handlebars.compile(source),
    html;
// Render the template to HTML using the specified data.
html = template({
    items: [
        {name: 'pie', url: 'http://pieisgood.org/'},
        {name: 'mountain dew', url: 'http://www.mountaindew.com/'},
        {name: 'kittens', url: 'http://www.flickr.com/search/?q=kittens'},
        {name: 'rainbows', url: 'http://www.youtube.com/watch?v=OQSNhk5ICTI'}
    ]
});
// Append the rendered template to the page.
Y.one('body').append(html);

});

详情请参阅此处 - http://yuilibrary.com/yui/docs/handlebars/

相关内容

  • 没有找到相关文章

最新更新