require.js text 插件使用

相比于使用script构建DOM结构,使用HTML标签来构建html是一个很好的方式。然而, 并没有很好的方式可以在js文件中嵌入 HTML 。最好的方式是使用 HTML字符串, 但这很难管理,尤其实在多行HTML的时候。

text.js 能解决这个问题。如果依赖添加了 text!前缀它将会被自动加载。下载该插件并且将它放在应用程序的 baseUrl 目录(如果想放在其他地方,使用 paths config 进行配置).

You can specify a text file resource as a dependency like so:

require(["some/module", "text!some/module.html", "text!some/module.css"],
    function(module, html, css) {
        html 变量是some/module.html 文件的文本形式
        css变量是some/module.css 文件的文本形式 
    }
);

注意.html 和.css 后缀规定了文件的类型。  路径"some/module"部分将会根据标准模块名进行解析:它将使用 baseUrl 和 paths configuration options 进行查找。

对于 HTML/XML/SVG 文件, 有其他的配置选项。你可以传入一个 !strip, 它将去除XML申明,这样外部的 SVG 和 XML 文件就能安全地加载到 document 中,同样的,如果是 HTML,只有 body 标签内部的部分会被返回。例如:

require(["text!some/module.html!strip"],
    function(html) {
        //the html variable will be the text of the
        //some/module.html file, but only the part
        //inside the body tag.
    }
);

text 文件通过异步的方式进行加载(XHR) , 所以你只能获取同域地下的文件 (查看下面XHR 限制条件).

然而, the RequireJS optimizer 将会在模块中内置 text! 真实text 文件内容参考, 这样, 依赖text!的模块能使用其他域的文件

原文地址:https://www.cnblogs.com/hwldyz/p/9166918.html