requirejs,如何使用requirejs加载html
requirejs,如何使用requirejs加载html详细介绍
本文目录一览： requirejs是什么？
requireJS 是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载慢而导致其它加载快的文件需要依赖其某些功能而出现某函数或某变量找不到的问题，这点非常有用，也是 requireJS 的主要价值所在吧；
详解RequireJs如何使用
这次给大家带来的是详解RequireJs如何使用，我们知道RequireJs非常的强大，这篇文章就给大家举几个案例好好分析一下。首先加载 JavaScript 文件RequireJS的目标是鼓励代码的模块化，它使用了不同于传统标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。baseUrl亦可通过RequireJS config手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。你可以通过paths config设置一组脚本，这些有助于我们在使用脚本时码更少的字。有时候你想避开"baseUrl paths"的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：以 ".js" 结束.以 "/" 开始.包含 URL 协议, 如 "http:" or "https:".一般来说，最好还是使用baseUrl及"paths" config去设置module ID。它会给你带来额外的灵活性，如便于脚本的重命名、重定位等。 同时，为了避免凌乱的配置，最好不要使用多级嵌套的目录层次来组织代码，而是要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方库的一个扁平结构，如下：www/index.htmljs/app/sub.jslib/jquery.jscanvas.jsapp.jsindex.html:app.js:requirejs.config({ //By default load any module IDs from js/lib baseUrl: 'js/lib', //except, if the module ID starts with "app", //load it from the js/app directory. paths //config is relative to the baseUrl, and //never includes a ".js" extension since //the paths config could be for a directory. paths: { app: '../app' }});//Start the main app logic.requirejs(['jquery', 'canvas', 'app/sub'],function ($, canvas, sub) { //jQuery, canvas and the app/sub module are all //loaded and can be used here now.});注意在示例中，三方库如jQuery没有将版本号包含在他们的文件名中。我们建议将版本信息放置在单独的文件中来进行跟踪。使用诸如volo这类的工具，可以将package.json打上版本信息，并在磁盘上保持文件名为"jquery.js"。这有助于你保持配置的最小化，避免为每个库版本设置一条path。例如，将"jquery"配置为"jquery-1.7.2"。理想状况下，每个加载的脚本都是通过define()来定义的一个模块；但有些"浏览器全局变量注入"型的传统/遗留库并没有使用define()来定义它们的依赖关系，你必须为此使用shim config来指明它们的依赖关系。 如果你没有指明依赖关系，加载可能报错。这是因为基于速度的原因，RequireJS会异步地以无序的形式加载这些库。require.js 在加载的时候会检察data-main 属性:如果都能用HTML标签而不是基于脚本操作DOM来构建HTML，是很不错的。但没有好的办法在JavaScript文件中嵌入HTML。所能做的仅是在js中使用HTML字串，但这一般很难维护，特别是多行HTML的情况下。.RequireJS有个text.js插件可以帮助解决这个问题。如果一个依赖使用了text!前缀，它就会被自动加载。参见text.js的README文件。相信看了以上介绍你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！相关阅读：JS里的布尔值、关系运算符、逻辑运算符的详解及实例jQuery的each函数详解及实例原生JS如何实现AJAX、JSONP
如何使用require读取模块化的JavaScript文件
require通常是用于读取模块化的JavaScript文件的，本篇文章我们将来给大家介绍关于使用require读取模块化的JavaScript文件的内容。通常，在阅读JavaScript程序时，我们使用script标签来描述HTML，但是，如果在服务器端单独运行JavaScript，例如Node.js，则无法使用脚本标记。因此，可以采用了一种模块化JavaScript文件从中读取并执行它的方法。我们先来看一下require的基本用法Node.js中的require是针对npm读入的模块在JavaScript端能利用的方法。var 变量 = require( 模块名称 );在上面的代码中，我们只需指定要加载的模块的名称作为require参数。由于加载的模块存储在指定的变量中，因此它类似于创建通用JavaScript实例。这样就可以在不使用script标签的情况下单独使用JavaScript来读取和使用模块（库）。我们来看如何加载模块？看下面的例子var gulp = require('gulp');gulp.task('clean', function() { //在此描述gulp的处理});在此示例中，可以看到gulp被指定为要在require参数中读取的模块名称。有了这个，你可以在JavaScript端使用gulp，之后可以编写你想要自动化的任务进程。如何使用RequireJS?使用RequireJS读取JavaScript文件前端浏览器上使用Require的方法随着JavaScript文件被拆分并且数量增加，仅使用script标签进行管理会变得困难。但是，前端（浏览器）不提供像Node.js一样的使用require文件。因此，可以使用名为RequireJS的库。这使我们能够通过前端的require来实现文件的加载。但是，由于语法（写入）略有不同，请仔细检查以下示例！require(加载的文件名,函数处理)有一点不同的是，在require 的第一个参数中指定要读取的JavaScript文件；可以指定为数组，因此它甚至可以支持多个文件读取。之后，我们根据第二个参数的函数处理中读取的文件编写JavaScript代码。如何使用RequireJS加载JS文件使用RequireJS加载，有必要在define()中描述原始JavaScript文件的代码。例如，创建一个叫sample.js的文件并按如下方式编写。define(function() { return function(num) { return num * num; };});这是一个简单的函数，可以实现任意数的平方。通过在define（）中描述此过程并使用“return”返回它来完成。接下来，使用require 读取sample.js，如下。require(['sample'], function(num) { var result = num(10); console.log(result); });执行结果100可以看到通过将“sample”作为文件名设置为require的第一个参数并在函数中返回square来设置。通过写 num（10），可以使用“sample.js”中定义的函数。查看执行结果，可以看到已获得平方值！
requirejs模块化编程怎么理解
一、Javascript模块化编程
目前，通行的Javascript模块规范共有两种：CommonJS和AMD。
1、commonjs
2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程，这标志”Javascript模块化编程”正式诞生。
在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。
假定有一个数学模块math.js，就可以像下面这样加载。
var math = require('math');
然后，就可以调用模块提供的方法：
var math = require('math');
math.add(2,3); // 5
因为这个系列主要针对浏览器编程，不涉及node.js，所以对CommonJS就不多做介绍了。我们在这里只要知道，require()用于加载模块就行了。
2、AMD
AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
模块定义
define(id?, dependencies?, factory);
其中：
id: 模块标识，可以省略。
dependencies: 所依赖的模块，可以省略。
factory: 模块的实现，或者一个JavaScript对象。
模块加载
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
require(['math'], function (math) {
math.add(2, 3);
});
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。
目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。
二、requirejs模块化编程
require.js加载的模块，采用AMD(异步模块定义规范) 规范。也就是说，模块必须按照AMD的规定来写。
require.js的两个重要的特点：
1、实现js文件的异步加载，避免网页失去响应
2、管理模块之间的依赖性，便于代码的编写和维护
加载requirejs：
data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
main.js常见实例：
require.config({
paths: {
moduleA: '',
moduleB:'',
moduleC:''
}
});
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
1、require.config
require.config用来配置一些参数，它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。
这里配置了paths参数，使用模块名“jquery”，其实际文件路径jquery-1.7.2.js（后缀.js可以省略）。
我们知道jQuery从1.7后开始支持AMD规范，即如果jQuery作为一个AMD模块运行时，它的模块名是“jquery”。注意“jquery”是固定的，不能写“jQuery”或其它。
注：如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。
如果将jQuery应用在模块化开发时，其实可以不使用全局的，即可以不暴露出来。需要用到jQuery时使用require函数即可。
2、require()函数
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB',
'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
如何在node.js中使用requirejs
安装requirejs
requirejs官方提供了一个可用于node的适配器 r.js 。有两种方法可以在项目里面加入此库。
1. npm
在具体项目目录下使用如下命令来引入requirejs:
npm install requirejs
windows环境下安装需要注意不要加上 -g 全局开关，否则不能正常安装。
安装完成后，可使用 require('requirejs') 来加载requirejs。
2. 下载r.js
如果不想使用npm，也可以直接下载r.js，并把它放到项目中达到同样的目的。
点击下载。
在项目中通过 require('/path/to/r.js') 来加载requirejs。
配置
配置requirejs
var requirejs=require('requirejs');
requirejs.config({
//把node自身的require方法传递给requirejs
nodeRequire: require
});
requirejs(["foo","bar"],function(foo,bar){});
在需要使用requirejs的地方可以用上面的代码来配置requirejs。首先加载requirejs模块，命名为 requirejs （可以为其他命名）。然后对 requirejs 进行配置。配置的方法和参数可以参照浏览器版本的requirejs的 配置说明 。不过有一点不同，如代码所示，我们需要把node的 require 方法引进来。最后一行是简单地加载模块的示例，requirejs会尝试把 foo 和 bar 两个模块当成AMD模块来加载，如果失败，则会调用node的 requie 方法来把它们当作commonjs模块加载。为了实现这样的适应性，所以我们需要配置node的 require 方法。但实际测试并不尽如人意，保险起见，还是对AMD模块使用 requirejs 加载，对commonjs模块使用 require 加载。
构造AMD格式的node模块
在node中定义的模块是commonjs模块，如果想要构造AMD模块，我们需要 amdefine 这个包。
安装amdefine
同样，可以使用npm进行安装，在项目目录下执行：
npm install amdefine
在windows下也存在无法全局安装的问题，需要对项目单独安装。
定义define方法
if(typeof define !== 'function'){
var define=require('amdefine')(module);
}
amdefine提供了包装AMD模块的 define 方法。不过上面代码中对于node中是否包含define方法的检测判断请保留，最好原封不动地将这几行拷贝到自己的项目中。这样，我们就可以像使用前端requirejs一样，定义和使用AMD模块。
将node自己的common模块转换为AMD模块
原本想通过引用`amdefine`包来实现node端AMD模块的定义，不过requirejs本身定义了`define`方法，不必额外引入其他包。
require加载js失败后忽略继续执行
可以继续执行。require加载js失败后可以忽略继续执行。rquirej是先加载本身在加载其他相关组件进入，所以每次进入时加载完毕，再次刷新时应为缓存相关的问题导致加载顺序错乱，让一些模块没有加载进来产生报错。此时使用原生js待页面加载完毕后在引用requirejs或者可以直接忽略加载继续执行。因为require加载的时候是异步加载，而js之间是有相互依赖的，所以解决办法就是在加载之前添加依赖即可。
如何使用requirejs加载html
在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发。
如何使用requirejs加载html
Reuqirejs有一个text的插件，它可以读取指定文件的内容，读取到的内容就是文本。
如何下载text插件
第一种方法，可以通过npm下载：
npm install requirejs/text
第二种方法，也可以直接去官方github上面直接下载。
直接拷贝内容到text.js中即可。
如何安装text插件
在requirejs的main.js中配置text插件的依赖即可，跟jquery差不多，只要保证能通过正常的加载方式加载到它就行。
requirejs.config({
baseUrl: './',
paths: {
'text':path '/require/text',
...
},
shim: {
...
}
});
也可以直接放在baseUrl里面。
如何使用text
在目标模块中，按照下面的语法即可：
define(function(require){
var html = require("text!html/test.html");
console.log(html);
});
或者
define(["text!html/test.html"],function(html){
console.log(html);
});
如何进行html的模块化开发？
看过上面你已经会使用text了，但是仍然不知道怎么组织前端代码。
举个栗子：
博客园的网站页面会根据上方的导航跳转到不同的页面。如果是在单页面中，很容易想到原始的做法是，导航的按钮对应不同的div，点击那个按钮，就显示与之对应的div；其他的div则隐藏掉。
那么，前端的代码可能会这样：
这样的代码会很杂乱...而且前端Html会很长...不利于维护。
那么有了reuqirejs的text插件以后，就可以这样了：
然后在对应的模块中：
$('#target').html(require("text!目标按钮对应的页面.html"));
这样就随性多了吧！前端代码也可以跟着模块一起有效的管理了！
不过需要注意的是：这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面，重新绑定下事件。
使用requirejs时怎么解决文件版号和增量更新的问题
看你前后端用什么技术了，我知道的大概有3种情况。 在这三种情况之前，首先要说的是requirejs对依赖增加hash的方式是通过参数urlArgs: 'ver='v{version}在require.config统一增加的，就我所知似乎不能单独对每个模块设置 （但可能是我错了），即每次都得批量更新版本号。
1.如果你采用过requirejs，且前后端分离，前端采用yeoman构建，那么只要找到相应的质量高的requirejs的generator，无论是gulp还是grunt， 其yeoman的generator应该已经处理好文件缓存增量更新的问题了。 2.假使前后端分离，前端由gulp/grunt集成，文件版本号增量更新，用下面几个插件就能处理的比较完美： gulp-rev gulp-rev-all gulp-useref (grunt也能找到类似的) 其中gulp-rev，计算文件hash值，gulp-useref对html内特定注解标签下的内容合并重写，gulp-rev-all会考虑css引用图片hash值改变的情况从而更新css文件hash。 等等总之只要去找总能通过gulp/grunt解决这个问题。 3.如果你使用rails(ruby)等前端友好框架，可能会有流行的解决方案，如果不幸用了老旧前端不友好的框架SpringMVC(java)，用gulp对jsp重编译比较蛋疼。。我不知道有没有相应的插件，如果没有你只能在后台维持这个版本号变量，对页面所有静态资源添加这个后缀，类似下面的代码：
var require = {
baseUrl: '/Content',
urlArgs: 'ver=' ${static_resource_version},
paths: {...},
deps: ['scripts/home/about']
}
其中path之内的所有脚本，以及deps内的入口脚本，都会被追加urlArgs，只是这样还无法达到最理想增量更新就是了。。。 此外，对于文件版本号的后缀args我也推荐使用git commit的hash值。
关于javascript里require的问题
require（arg，function(obj)）第一个参数是路径数组，然后在function中将这个js当参数引用进来，这样在function中就可以使用了
首先无论require还是import，都不是webpack的发明，它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器)。 于是需要通过webpack在配合各种plugin、loader将其转义
这是因为你的fs模块还没加载好。
异步加载模块的时候，尤其是你在使用require加载多个模块的时候，
要在前面模块加载完成后，调用回调函数，调用第2个模块，然后再回调，调用第3个模块。。。
这样就不会报错了。
requirejs 怎么获取window这个对象
requirejs 是一个根据需要加载javascript模块的框架。但是有时候在一个项目中，我们可能需要根据不同的平台或者浏览器加载不同的模块，下面我们通过举一个例子介绍一个简单的方法解决这些问题。
工具/原料
假如我们现在有以下需要
1、如果浏览器原生支持JSON对象，则不加载JSON2模块，否则，加载JSON2
2、我们现在有2个文件，一个用来操作localStorage，命名为StorageModel.js，一个用来操作cookie，命名为CookieModel.js；假如浏览器支持localStorage，则我们加载StorageModel.js而不加载CookieModel.js，否则加载CookieModel.js而不加载StorageModel.js
下面我们来解决这个问题
方法/步骤
1
判断是否支持
//-------------下面是代码-----------
var SUPPORT_JSON=(typeof(JSON)!=='undefined');//如果支持则为true，不支持则false
var SUPPORT_STROAGE=(typeof(Storage)!=='undefined')
//----------------------------------
2
requirejs配置
//-------------------------
require.config({
paths:{
/ 当SUPPORT_STORAGE 的值为true时，表达式的值为'/StorageModel'；为false时，表达式的值为'/CoookieModel'；这样就达到了根据情况加载其中一个模块的效果
'model':(SUPPORT_STORAGE && '/StorageModel')||'/CookieModel',/
'json':'/json2'
}
});
//-------------------------
3
载入代码
//--------------------------------
//下面 (SUPPORT_JSON &&'model')||'json' 当SUPPORT_JSON 的为true时，则表达式的值为'model'，而前面已经载入'model'所以会被忽略，当SUPPORT_JSON为false时，则表达式的值为'json'，那么就会载入json2模块
require('model',(SUPPORT_JSON &&'model')||'json'],
function(){
//......
});
//--------------------------------