1、簡(jiǎn)介

官方對(duì)requirejs的描述：
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
即在瀏覽器中，require.js可以作為文件的模塊加載器，可以用在Node和Rhino環(huán)境中。
工作方式為：requireJS使用head.appendChild()將每一個(gè)依賴加載為一個(gè)script標(biāo)簽。然后等待所有的依賴加載完畢，計(jì)算出模塊定義函數(shù)正確調(diào)用順序，再依次調(diào)用它們。

2、優(yōu)點(diǎn)

（1）防止js加載阻塞頁面渲染
（2）管理模塊之間的依賴，便于管理和維護(hù)

3、使用介紹

（1）引入：

• 方式一：使用data-main

<script data-main="js/main" src="js/require.js"></script>

加載requirejs腳本的script標(biāo)簽加入了data-main屬性，這個(gè)屬性指定的js將在加載完reuqire.js后處理。把require.config的配置加入到data-main后，就可以使每一個(gè)頁面都使用這個(gè)配置，然后頁面中就可以直接使用require來加載所有的短模塊名。
data-main還有一個(gè)重要的功能，當(dāng)script標(biāo)簽指定data-main屬性時(shí)，require會(huì)默認(rèn)的將data-main指定的js為根路徑

• 方式二：直接script嵌入

<script src="js/require.js"></script><script src="js/app.js"></script>

（2）require.config配置

在main.js中進(jìn)行require.config的配置。如如下主要的配置參數(shù)：

• baseUrl: 設(shè)置根目錄
• paths：配置模塊的加載位置。可以給模塊定義一個(gè)更好記的名字。還可以配置多個(gè)路徑，如果遠(yuǎn)程CDN沒有加載成功，則加載本地的文件。

require.config({paths : {"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],"user" : "js/user" } })

• shim: 通過require加載的模塊一般都需要符合AMD規(guī)范即使用define來申明模塊，但是部分時(shí)候需要加載非AMD規(guī)范的js，這時(shí)候就需要用到另一個(gè)功能：shim。

require.config({shim: {"underscore" : {exports : "_";},"jquery.form" : {deps : ["jquery"]}} })

除了可以在require.js加載完畢后，通過require.config進(jìn)行配置之外，在require.js加載之前，定義一個(gè)全局的對(duì)象變量 require 來事先定義配置參數(shù)。然后在require.js被瀏覽器加載完畢后，便會(huì)自動(dòng)繼承之前配置的參數(shù)。

<script>var require = {baseUrl: 'js/',paths: {'jquery': 'http://xxx.xxxx.com/js/jquery.min','index': 'index'},deps:[index]};</script><script src="js/require.js"></script>

除了上面3個(gè)常用的配置項(xiàng)，還有其他的：
urlArgs：解決版本控制問題。urlArgs: 'ver=0.1.2'。還可以用來實(shí)現(xiàn)在文件后增加隨機(jī)數(shù)的方式，忽略瀏覽器緩存。urlArgs: new Date().getTime(),
waitSeconds: 設(shè)置加載腳本的超時(shí)時(shí)間
deps: 聲明require.js加載完成后便會(huì)自動(dòng)加載的模塊
callback: 當(dāng)deps中自動(dòng)加載模塊加載完成時(shí)，處罰的回調(diào)
map: map告訴RequireJS在任何模塊之前，都先載入這個(gè)模塊，這樣別的模塊依賴于css!../style/1.css這樣的模塊都知道怎么處理了

（3）require和define

這兩個(gè)是最常用的命名。define用于定義模塊。require用于加載模塊及配置文件。在requirejs中一個(gè)文件就是一個(gè)模塊，文件名就是該模塊的ID。

• define：可以單獨(dú)定義鍵值隊(duì)數(shù)據(jù)，作為配置文件來使用；

define({'name':'zhangsan','age':'20'});

還可以定義依賴的關(guān)系：

４、壓縮

(1) r.js

使用r.js來進(jìn)行壓縮時(shí)，需要指定build.js文件。build.js主要配置如下：

({baseUrl: './js/pages', 　　 //相對(duì)于appDir，代表要查找js文件的起始文件夾，下文所有文件路徑的定義都是基于這個(gè)baseUrl的appDir: './', 　　 //項(xiàng)目根目錄dir: './outdir',　　 //輸出目錄，全部文件打包后要放入的文件夾（如果沒有會(huì)自動(dòng)新建的）/* 有了dir，就不能使用out配置項(xiàng)了，你在編譯時(shí)它有非常明確的提示 *//*"appDir" is not compatible with "out". Use "dir" instead. appDir is used to copy whole projects, where "out" with "baseUrl" is used to just optimize to one file.*//*"appDir" 和 "out"是不兼容的，需要用"dir"代替， "appDir"是用來拷貝整個(gè)項(xiàng)目的，"out"和"baseUrl"僅是用來優(yōu)化一個(gè)文件的*/modules: [//要優(yōu)化的模塊 —— 里面的配置項(xiàng)即各頁面的 相對(duì)baseUrl路徑的 省略后綴“.js”的 入口文件(入口文件 ---- 即加載頁面時(shí)引入require.js的script標(biāo)簽上data-main屬性所指定的文件)//該屬性必不可少，因?yàn)橐粋€(gè)程序至少需要有一個(gè)入口{ name:'main'},{ name:'index'} ],out: 'index-build.js',　　//輸出文件名name:'main',fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,　　 //正則匹配過濾文件，匹配到的文件將不會(huì)被輸出到輸出目錄去，這里過濾掉的是 r.js、build.js、*.scss三類文件optimizeCss: 'standard',removeCombined: true, //如果為true，優(yōu)化器將從輸出目錄中刪除已合并的文件paths: { //各模塊相對(duì)baseUrl的路徑，直接從require.config的path配置中烤取即可"underscore": "../libs/underscore/underscore-min","backbone": "../libs/backbone/backbone-min",},shim:{// 配置不符合AMD規(guī)范的模塊，直接從require.config的shim配置中烤取即可"underscore": {exports: "_"},"backbone": {deps: ["underscore", "jquery"],exports: "Backbone"},} })

執(zhí)行r.js -o build.js 即可實(shí)現(xiàn)壓縮。
在鏈接https://www.cnblogs.com/rubyl... 中有很好的示例，可以參看學(xué)習(xí)。

(2) 使用gulp

安裝好gulp和gulp-requirejs-optimize
gulpfile的配置如下：

var gulp = require('gulp'); var requirejsOptimize = require('gulp-requirejs-optimize'); gulp.task('rjs', function(){return gulp.src('src/js/*.js').pipe(requirejsOptimize({optimize: 'none',mainConfigFile: 'src/config.js'})).pipe(gulp.dest('dist/js/')); });

5、加載其他的文件

(1) 加載css
加載css需要使用require-css插件(https://github.com/guybedford...
首先需要設(shè)置

map: {'*': {'css': 'require-css/css' // or whatever the path to require-css is} }

在define中使用就可以了

define(['css!styles/main'], function() {//code that requires the stylesheet: styles/main.css });

(2) 加載其他

define(['text!review.txt','image!cat.jpg'],function(review,cat){console.log(review);document.body.appendChild(cat);});

使用text和image插件，則是允許require.js加載文本和圖片文件。類似的插件還有json和mdown，用于加載json文件和markdown文件。

總結(jié)

以上是生活随笔為你收集整理的require.js学习记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。