requirejs是一个JavaScript文件和模块加载器。requireJS允许您将javascript代码分离到文件和模块中，同时管理每个模块之间的依赖关系。RequireJS的目标是鼓励代码模块化，它使用与传统“脚本”标签不同的脚本加载步骤。使用RequireJS加载模块化脚本将提高代码加载速度和质量。1、为什么要用require.js？最早的时候，所有的Javascript代码都写在一个文件里，加载这个文件就够了。后来代码越来越多，一个文件不够用，只好分成多个文件依次加载。相信很多人都看过下面的网页代码： 这段代码依次加载多个js文件。这种写法有很大的弊端。首先，加载时，浏览器会停止渲染网页。加载的文件越多，网页无响应的时间就越长。由于js文件之间存在依赖关系，所以必须严格保证加载顺序（比如上例中的1.js必须在2.js前面），最依赖的模块一定要最后加载。当依赖关系复杂时，代码编写和维护都会变得困难。require.js的诞生就是为了解决这两个问题：实现js文件的异步加载，避免网页响应丢失；管理模块之间的依赖关系，方便代码的编写和维护。2.加载require.js使用require.js的第一步是去官网下载最新版本。下载后，假设放在js子目录下，就可以加载了。 有人可能会认为加载这个文件也可能导致网页无响应。解决方法有两种：一种是在网页底部加载，另一种是这样写： async属性表示这个文件需要异步加载，防止网页无响应。IE不支持这个属性，只支持defer，所以也写defer。加载完require.js，接下来就是加载我们自己的代码了。假设我们自己的代码文件是main.js，也是放在js目录下。那么，就这么写吧： data-main属性的作用是指定主模块.上面的例子中是js目录下的main.js，这个文件会被require.js先加载。由于require.js默认的文件扩展名是js，所以main.js可以简写为main。3、如何编写主模块上一节的main.js，我称之为“主模块”，意思是整个网页的入口代码。有点像C语言中的main()函数，所有代码都从这里开始运行。让我们看看如何编写main.js。如果我们的代码不依赖任何其他模块，那么我们可以直接编写javascript代码。 //main.jsalert("加载成功！");但在这种情况下，没有必要使用require.js。真正常见的情况是主模块依赖其他模块，然后使用AMD规范定义的require()函数。 //main.jsrequire(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){//somecodehere});>require()函数接受两个参数。第一个参数：-一个数组，表示依赖的模块，上面的例子是['moduleA','moduleB','moduleC']，即主模块依赖这三个模块；-一个回调函数，当前面指定时它将在模块全部加载成功后调用。加载的模块作为参数传递给此函数，以便它们可以在回调函数中使用。require()异步加载moduleA、moduleB、moduleC，浏览器不会丢失响应；它指定的回调函数只有在前面的模块加载成功后才会运行，解决了依赖问题。下面，我们来看一个实际的例子。假设主模块依赖jquery、underscore和backbone这三个模块，main.js可以这样写： require(['jquery','underscore','backbone'],function($,_,Backbone){//一些代码在这里});require.js会先加载jQuery、underscore和backbone，然后运行回调函数。主模块的代码写在回调函数中。4.模块加载上一节最后的例子中，主模块的依赖模块为['jquery','underscore','backbone']。默认情况下，require.js假设这三个模块与main.js在同一个目录下，文件名分别为jquery.js、underscore.js和backbone.js，然后自动加载。使用require.config()方法，我们可以自定义模块的加载行为。require.config()写在主模块（main.js）的头部。参数是一个对象，这个对象的paths属性指定了各个模块的加载路径。 require.config({paths:{"jquery":"jquery.min","underscore":"underscore.min","backbone":"backbone.min"}});上面的代码给出了三个模块的文件名，路径默认和main.js同目录（js子目录）。如果这些模块在其他目录下，比如js/lib目录下，有两种写法。一种是一一指定路径。 require.config({baseUrl:"js/lib",paths:{"jquery":"jquery.min","underscore":"underscore.min","backbone":"backbone.min"}});另一种是直接更改基目录（baseUrl）。require.config({baseUrl:"js/lib",paths:{"jquery":"jquery.min","underscore":"underscore.min","backbone":"backbone.min"}});如果一个模块在另一台主机上，你也可以直接指定它的URL，例如： require.config({ paths:{ "jquery"});require.js要求：每个A模块都是一个单独的js文件。在这种情况下，如果加载了多个模块，就会发出多个HTTP请求，影响网页的加载速度。因此，require.js提供了一个优化工具。部署模块后，您可以使用此工具将多个模块合并到一个文件中，以减少HTTP请求的数量。5.如何编写AMD模块require.js加载的模块采用AMD规范。也就是说，模块必须按照AMD的规定来编写。具体来说，必须使用特定的define()函数定义模块。如果一个模块不依赖其他模块，可以直接在define()函数中定义。假设有一个math.js文件，它定义了一个数学模块。那么，math.js应该这样写： //math.js define(function(){ varadd=function(x,y){ returnx+y;（数学）{ alert(math.add(1,1)); });如果这个模块还依赖其他模块，那么define()函数的第一个参数必须是一个数组，表示模块的依赖关系。 define(['myLib'],function(myLib){ functionfoo(){ myLib.doSomething(); } return{ foo:foo }; });当require()函数加载上述模块时，会首先加载myLib.js文件。6.加载非标准模块理论上，require.js加载的模块必须是AMD规范中define()函数定义的模块。但实际上，虽然一些流行的函数库（如jQuery）符合AMD规范，但更多的库却不符合。那么，require.js可以加载非标准模块吗？答案是肯定的。在使用require()加载此类模块之前，它们必须首先使用require.config()方法来定义它们的一些特性。比如underscore和backbone这两个库，就不是用AMD规范写的。如果要加载它们，必须首先定义它们的特性。 require.config({shim:{'underscore':{exports:'_'},'backbone':{deps:['underscore','jquery'],exports:'Backbone'}}});require.config()接受一个配置对象。除了上面提到的paths属性，这个对象还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块都必须定义（1）exportsvalue（输出变量名），表示被外部调用时模块的名称；(2)deps数组，表示模块的依赖关系。例如，一个jQuery插件可以这样定义： shim:{ 'jquery.scroll':{ deps:['jquery'], exports:'jQuery.fn.scroll' } }7.require.js插件require.js也提供了一系列插件来实现一些特定的功能：domready插件，它允许回调函数在页面DOM结构加载完成后运行。require(['domready!'],function(doc){//一旦DOM准备好就调用});文本和图像插件允许require.js加载文本和图像文件。 define(['text!review.txt','image!cat.jpg'],function(review,cat){console.log(review);document.body.appendChild(cat);});类似json和mdown的插件，用于加载json文件和markdown文件。想学前端的朋友，可以关注+私信回复《资料》免费领取～感谢阅读！喜欢的话可以收藏转发哦~
