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

require.js text 插件使用的更多相关文章

  1. 【实践】require.js + r.js 代码打包压缩初体验

    第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...

  2. Sublime Text 2 JS 格式化插件 JsFormat的配置使用

    (转自http://www.jb51.net/softjc/178401.html) 这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下 ...

  3. Sublime Text 2 JS 格式化插件 JsFormat

    这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载插件包放到sublime安装目录的DataPackages目录中重新打开sublim ...

  4. Sublime Text 3 JS 格式化插件 JsFormat的配置使用

    1.首先需要下载安装包:(下载地址:https://github.com/jdc0589/JsFormat) 2.插件包放到sublime安装目录的Data\Packages目录中 3.快捷键 Ctr ...

  5. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  6. javascript模块化编程(三):require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  7. Javascript模块化编程(三):require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  8. require.js

    日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...

  9. require.js 入门学习 (share)

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

随机推荐

  1. leetcode16—3 Sum Closet

    Given an array nums of n integers and an integer target, find three integers in nums such that the s ...

  2. JS输入框邮箱自动提示(带有demo和源码)

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  3. grpc & pb 环境配置

    grpc 官方中文文档:http://doc.oschina.net/grpc?t=60140 grpc github仓库:https://github.com/grpc/grpc protobuf ...

  4. CentOS 建立本地yum源服务器

    安装CentOS系统,配置系统的网络环境 配置静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet O ...

  5. laravel 5.5 《电商实战 》辅助函数

    Laravel 提供了很多 辅助函数,有时候我们也需要创建自己的辅助函数. 这里介绍了 tinker,一个laravel内置的php交互式控制台,方便调试php代码 php artisan tinke ...

  6. 03-Python执行方式和Pycharm设置

    https://www.python.org/ 单词列表 * error 错误 * name 名字 * defined 已经定义 * syntax 语法 * invalid 无效 * Indentat ...

  7. android studio更新gradle失败的解决办法-转

    android studio中每次自动更新gradle时速度实在太慢因为gradle服务器比较慢,所以更新gradle会比较慢,建议先下载下来,然后手动添加到gradle的下载目录,提升速度. 使用下 ...

  8. 20155320 Exp7 网络欺诈防范

    20155320 Exp7 网络欺诈防范 [基础问题回答] (1)通常在什么场景下容易受到DNS spoof攻击 乱点链接或者连公共场合的免费WiFi也容易受到攻击,尤其是那种不需要输入密码直接就可以 ...

  9. Linux常用rmp包网址

    * HA:http://download.opensuse.org/repositories/network:/ha-clustering:/Stable/ * Openstack:https://r ...

  10. chrome浏览器插件 Octotree 让你浏览GitHub的时候像IDE 一样提供项目目录

    GitHub 作为代码托管平台,竟然没有提供项目目录,方便用户在线快速浏览项目结构.所以,在线分析项目源码就会变得很繁琐,必须一层一层点击,然后再一次一次地向上返回.要知道,本来 GitHub 网站在 ...