require.js詳解

時間 2019-11-13

標籤 require.js require 詳解欄目 JavaScript 简体版

原文原文鏈接

一:什麼是require.jsjavascript

①：require.js是一個js腳本加載器，它遵循AMD(Asynchronous Module Definition)規範，實現js腳本的異步加載，不阻塞頁面的渲染和其後的腳本的執行，並提供了在加載完成以後的執行相應回調函數的功能；css

②：require.js要求js腳本必需要實現模塊化，即文件化；而require.js的做用之一就是加載js模塊，也就是js文件。html

③：require.js能夠管理js模塊/文件之間的依賴;即不一樣的框架例如Jquery，AngularJs等採用了不一樣的語法，而使用這些語法的js文件在導入時必須排在Jquery.js或Angular.js以後才能順利執行，require.js則可以解決排序依賴問題。java

二:爲何要使用require.jsjquery

①：加載的時候，瀏覽器會中止網頁渲染，緣由以下：ajax

在不使用require.js時，文件編寫方式以下：數組

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="a.js"></script>
    </head>
    <body>
      <span>Hellow World</span>
    </body>
</html>

在導入的a.js文件中：瀏覽器

(function(){
    function fun1(){
      alert("JS文件已生效");
    }
    fun1();
})()

在運行以上代碼時咱們能夠注意到在alert彈出的提示框出現的時候，網頁html的部分仍然是空白的，沒有顯示出任何內容，當咱們點擊肯定以後"Hellow World"纔會顯示在網頁中，這就是JS阻塞瀏覽器渲染致使的結果。加載文件越多，網頁失去響應的時間就會越長。服務器

②：因爲js文件之間存在依賴關係，所以必須嚴格保證加載順序，依賴性最大的模塊必定要放到最後加載，當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難。例如：框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
		<script type="text/javascript" src="js/b.js" ></script>
	</head>
	<body>
		<div id="div1" style="width: 100px;height: 100px;background-color: red;"></div>
	</body>
</html>

在b.js文件中

$(function(){
	$("#div1").css("background-color","blue");
})

爲了使b.js中的代碼生效，必需要把<script type="text/javascript" src="js/b.js" ></script>這行代碼放到<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>後面，這樣在使用的框架和js文件較多的時候，它們的導入順序就會變得很麻煩。

require.js的誕生就是爲了解決上面所說的兩個問題：

1.實現js文件的異步加載，避免網頁失去響應；

2.管理模塊之間的依賴性，便於代碼的編寫和維護。

三：require.js的加載

①：首先，咱們要去官網下載最新的版本，官方網址：http://requirejs.org/docs/download.html

　　下載完成後，將它放在網站項目的js子文件夾下就可使用了：

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

這裏可能會遇到一個問題：加載這個文件，也可能形成網頁失去響應，這個問題的解決辦法有兩種：

1.將這行代碼寫成以下格式：

<script src="js/require.js" defer async="true" ></script>

其中：async屬性和defer屬性代表這個文件須要異步加載，避免網頁失去響應。IE只支持defer屬性，而不支持async屬性。

2.將文件放到網頁底部加載。

②：加載完require.js以後，咱們就能夠加載本身的代碼了，假設咱們本身的js文件命名爲main.js，一樣放於js文件夾下，那麼,只須要執行以下代碼：

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

上述代碼中，data-main屬性的做用是指定網頁程序的主模塊。即js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠省略掉".js"簡寫成main。

四：基本API

在上一部分中，咱們引入了main.js文件，main.js的寫法：

define(function(){
    function fun1(){
      alert("main.js已生效");
    }
    fun1();
})

這樣，咱們就經過define函數定義了一個模塊，而後在頁面中經過AMD規範定義的的require()函數使用：

require(["js/main"]);

通常狀況下，它會依賴於其餘的js框架，好比jquery等等，那麼，咱們這時就要在頁面文件中。咱們須要按照如下格式來寫：

　　require(['A', 'B', 'C'], function (A, B, C){
　　　　// js代碼
　　});

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的框架，上例就是['A', 'B', 'C']，即main.js裏的代碼須要用到這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊。

require()會異步加載A,B,C三個模塊，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。

下面。咱們就以jquery爲例，說明這個函數是怎樣運行的：

require(['jquery'], function ($){
　　// jquery代碼
});

require.js會先加載jQuery，而後再運行回調函數。main.js的代碼就寫在回調函數中。注意：require中的依賴是一個數組，即便只有一個依賴，你也必須使用數組來定義。

五：加載文件

在上一部分中，main.js的依賴模塊是['jquery']。默認狀況下，require.js會假定這個模塊與main.js在同一個目錄，文件名是 jquery.js，而後自動加載，除此以外，咱們能夠經過require.config()方法，咱們能夠對模塊的加載行爲進行自定義，require.config()就寫在main.js的頭部，它的參數是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"anjular": "anjular.min"
　　　　}
　　});

上述模塊路徑默認與main.js在同一個目錄（js子目錄）。若是這些模塊在其餘目錄，好比js/lib目錄，則有兩種寫法。一種是逐一指定路徑：

require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"anjular": "lib/anjular.min"
　　　　}
　　});

另外一種則是直接改變根目錄（baseUrl）：

require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"anjular": "anjular.min"
　　　　}
　　});

以前的例子中加載模塊都是本地js，可是大部分狀況下網頁須要加載的JS可能來自本地服務器、其餘網站或CDN，這樣就不能經過這種方式來加載了，咱們以加載一個jquery庫爲例：

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

上面的例子中重複出現了require.config配置，若是每一個頁面中都加入配置，必然會十分麻煩，requirejs提供了一種叫"主數據"的功能，咱們能夠將全部的require.config配置放到main.js中，在頁面中調用它，

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

就可使每個頁面都使用這個配置，而後頁面中就能夠直接使用require來加載全部的短模塊名。

六：AMD模塊的寫法

require.js加載的模塊，採用AMD規範，也就是說，模塊必須按照AMD的規定來寫。具體來講，就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。假定如今有一個math.js文件，它定義了一個math模塊。那麼，math.js就要這樣寫：

define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

而後在頁面中：

require(['math'], function (math){
　　alert(math.add(1,1));
});

若是這個js文件還依賴其餘模塊，那麼define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

define(['jquery'], function($){
    $("#div1").css("background-color","red");
})

當require()函數加載上面這個模塊的時候，就會先加載jquery.js文件。

七：第三方模塊

經過require加載的模塊通常都須要符合AMD規範即便用define來申明模塊，可是部分時候須要加載非AMD規範的js，這時候就須要用到另外一個功能：shim：

1. 非AMD模塊輸出，將非標準的AMD模塊變成可用的模塊，例如：在老版本的jquery中，是沒有繼承AMD規範的，因此不能直接require["jquery"],這時候就須要shim

require.config({
    shim: {
        "jquery" : {exports : "$"}
    }
})

這樣配置後，咱們就能夠在其餘模塊中引用jquery模塊：

require(["jquery"], function(_){
   $("#div1").css("background-color","red");
})

2.插件形式的非AMD模塊，咱們常常會用到jquery插件，並且這些插件基本都不符合AMD規範，好比jquery.form插件，這時候就須要將form插件加入到jquery中：

require.config({
    shim: {
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

以上就是require的基本用法詳解。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。