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!的模块能使用其他域的文件