Require.js實作js模組化管理教程
- 高洛峰原創
- 2017-03-30 16:42:451167瀏覽
什麼是Require.js
Require.js是一個AMD規範的輕量級js模組化管理框架，最新版本require.js 2.1.11壓縮後只有14.88K，它可以把js程式碼分成一個個模組，實現非同步或動態加載，還能很清晰的看出模組之間的依賴，從而提高程式碼質量，性能和可維護性。 Require.js的作者是AMD規範的創辦人 James Burke。
Require.js能帶來什麼好處
下面我們可以舉一個簡單的例子說明:
通常我們的頁面結構是以下這樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require</title> <script src="js/a.js"></script> <script src="js/b.js"></script> <script src="js/c.js"></script> <script src="js/d.js"></script> <script src="js/e.js"></script> <script src="js/f.js"></script> <script src="js/g.js"></script> </head> <body> <p>require</p> </body> </html>
a.js裡面的程式碼
alert("require");當運行頁面可以發現當運行頁面可以發現當運行頁面可以發現當運行頁面可以發現當運行頁面可以發現當運行頁面可以發現當運行頁面可以發現當運行頁彈出alert時需要點選確定才會顯示p的內容，因為頁面的js是同步渲染，js的渲染必然會阻塞後面的html渲染。再者，引入一大堆的js檔案也不美觀，使用require.js即可實現js的模組化非同步載入。
如何使用Require.js
先到require.js官網下載最新版本,然後引入到頁面，如下：
<script src="js/require.js" data-main="js/main.js"></script>
data-main屬性不能忽略，data-main指向的文件是主代碼所在的文件，main.js裡面配置的腳本都會是非同步加載，main.js所在的目錄預設為根路徑。
require.js config
config方法用於配置運行參數。首先設定參數，看下面的例子：
我的專案檔案結構如下
主檔案main.js
require.config({
baseUrl: "js",
paths: {
"jquery": ["lib/jquery-1.8.3.min"],
"popup": ["lib/popup"],
"moduleA": ["app/moduleA"],
"moduleB": ["appmoduleB"]
},
shim: {
'popup': {
deps: ['jquery']
}
}
});config方法接收一個物件參數，以下解釋各屬性作用。
baseUrl：設定根路徑，如沒有設定該屬性則預設為主檔案所在的目錄，這裡設定JS目錄為根路徑。
paths：設定各模組的別名和路徑，在呼叫模組時需使用別名。資源檔案路徑可以是本地路徑，也可以是外部的鏈接，也可以設定多個路徑，路徑可以是一個字串路徑，也可以是一個數組，當存在兩個或以上路徑時必須是數組。
以JQ路徑為例，單一路徑"jquery": ["lib/jquery-1.8.3.min"]
多個路徑"jquery": ["http://apps.bdimg.com/libs/jquery/ 1.8.3/jquery.min.js","lib/jquery-1.8.3.min"]，多個路徑時會先取得第一個路徑的資源文件，第一個路徑載入失敗則會載入第二個路徑(注意：本人實踐中第一個路徑使用CDN時在IE11以下的IE瀏覽器會加載失敗且沒有調用本地資源，原因未知)
shim：非AMD規範的模組不能直接調用，該屬性用於設定非AMD規範的模組，屬性值是一個對象，本人寫的彈框插件非AMD規範因此需要設置，設置的模組名稱和所依賴的模組名稱需是該模組在paths定義的別名。 deps用於設定此模組的依賴，popup插件依賴JQ
define(name,deps,callback)函数
单从语义就应该猜到这个函数用来定于模块，下面解释define函数，若看不懂别着急，后面会举例。
在require.js源码中可以看到有这么一行代码define = function (name, deps, callback) {} ，可知define接收三个参数
name:为可选参数，该模块的标识，字符串类型，通俗来讲就是给该模块取的名称，可自定义，但不能与其他模块名称相同，如果该参数未选，那么该模块的名称为该文件在paths中定义的别名
deps:当前模块的依赖，数组类型，为已定义的模块名称，若不存在依赖该参数可不填
callback：是一个函数或者对象,为函数时，当依赖的模块加载完成后该回调函数将被调用，依赖关系会以参数的形式注入到该函数上，参数与依赖的模块一一对应，（注：如果定义的模块想被其他模块引用需返回一个对象）。
通过define定义模块的方式可分为以下两类。
1. 无依赖模块
也就是说该模块无需依赖其他模块，可以直接定义，如下：
define({
fnMethod: function() {
return ("这是一个无依赖模块")
}
});该模块只传了一个对象类型的callback，也等价于
define(function() {
return {
fnMethod: function () {
return ("这是一个无依赖模块")
}
}
});该模块则传了一个函数类型的callback，模块定义了一个函数fnMethod,返回一个字符串值，实际上返回值也可以是其他类型，第二种方法只是将函数做为对象返回，建议采用第二种方法来定义无依赖模块。
2. 有依赖模块
定义有依赖模块格式需要稍作改变，格式如下：
//假如moduleA模块返回了一个属性name,值为“老宋”,<p class="text">老马</p>
define(["jquery","moduleA"],function($, mA) { //参数和依赖的模块需一一对应
return {
fnMethod: function () {
return ($.text(".text") + mA.name);
}
}
});该例子表明当前模块依赖于jquery和moduleA,返回一个结果“老马老宋”。沿用上面的例子再举一个完整的例子：
define("module",["jquery","moduleA"],function($, mA) { //参数和依赖的模块需一一对应
return {
fnMethod: function () { //fnMethod即提供给外部调用的接口
return ($(".text").text() + mA.name);
}
}
});这里定义了一个名为module的模块，并且它依赖于jquery和moduleA模块。
当依赖的模块很多的时候再像下面这样写感觉是不是很挫？
define("module", ["jquery", "moduleA", "moduleB", "moduleC", "moduleD", "moduleE", "moduleF"], function ($, mA, mB, mC, mD, mE, mF) {
return {
fnMethod: function () {
return ($(".text").text() + mA.name);
}
}
});require.js2.0版本之后提供了一种更好的写法。
define("module", function (require) { //将“require”本身做为一个依赖注入到模块
var $ = require("jquery"),
mA = require("moduleA"),
mB = require("moduleB"),
mC = require("moduleC"),
mD = require("moduleD"),
mE = require("moduleE"),
mF = require("moduleF");
return {
fnMethod: function () {
return ($(".text").text() + mA.name);
}
}
}); 以上就是Require.js实现js模块化管理教程的内容，更多相关内容请关注PHP中文网（www.php.cn）！