1、簡介

官方對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()將每一個依賴加載為一個script標簽。然后等待所有的依賴加載完畢，計算出模塊定義函數(shù)正確調(diào)用順序，再依次調(diào)用它們。

2、優(yōu)點

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

3、使用介紹

（1）引入：

• 方式一：使用data-main

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

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

• 方式二：直接script嵌入

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

（2）require.config配置

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

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

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

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

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

除了可以在require.js加載完畢后，通過require.config進行配置之外，在require.js加載之前，定義一個全局的對象變量 require 來事先定義配置參數(shù)。然后在require.js被瀏覽器加載完畢后，便會自動繼承之前配置的參數(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個常用的配置項，還有其他的：
urlArgs：解決版本控制問題。urlArgs: 'ver=0.1.2'。還可以用來實現(xiàn)在文件后增加隨機數(shù)的方式，忽略瀏覽器緩存。urlArgs: new Date().getTime(),
waitSeconds: 設置加載腳本的超時時間
deps: 聲明require.js加載完成后便會自動加載的模塊
callback: 當deps中自動加載模塊加載完成時，處罰的回調(diào)
map: map告訴RequireJS在任何模塊之前，都先載入這個模塊，這樣別的模塊依賴于css!../style/1.css這樣的模塊都知道怎么處理了

（3）require和define

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

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

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

還可以定義依賴的關系：

４、壓縮

(1) r.js

使用r.js來進行壓縮時，需要指定build.js文件。build.js主要配置如下：

({baseUrl: './js/pages', 　　 //相對于appDir，代表要查找js文件的起始文件夾，下文所有文件路徑的定義都是基于這個baseUrl的appDir: './', 　　 //項目根目錄dir: './outdir',　　 //輸出目錄，全部文件打包后要放入的文件夾（如果沒有會自動新建的）/* 有了dir，就不能使用out配置項了，你在編譯時它有非常明確的提示 *//*"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"是用來拷貝整個項目的，"out"和"baseUrl"僅是用來優(yōu)化一個文件的*/modules: [//要優(yōu)化的模塊 —— 里面的配置項即各頁面的 相對baseUrl路徑的 省略后綴“.js”的 入口文件(入口文件 ---- 即加載頁面時引入require.js的script標簽上data-main屬性所指定的文件)//該屬性必不可少，因為一個程序至少需要有一個入口{ name:'main'},{ name:'index'} ],out: 'index-build.js',　　//輸出文件名name:'main',fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,　　 //正則匹配過濾文件，匹配到的文件將不會被輸出到輸出目錄去，這里過濾掉的是 r.js、build.js、*.scss三類文件optimizeCss: 'standard',removeCombined: true, //如果為true，優(yōu)化器將從輸出目錄中刪除已合并的文件paths: { //各模塊相對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 即可實現(xiàn)壓縮。
在鏈接https://www.cnblogs.com/rubyl... 中有很好的示例，可以參看學習。

(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...
首先需要設置

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文件。

總結

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

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