javascript高級(jí)模塊化require.js的具體使用方法

更新時(shí)間：2017年10月31日 14:01:54 作者：Yana_li

本篇文章主要介紹了javascript高級(jí)模塊化require.js的具體使用方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

本文介紹了require.js的具體使用方法，分享給大家，也給自己留個(gè)筆記。

Require.js：

RequireJS是一個(gè)非常小巧的javascript模塊載入框架，是AMD（Asynchronous Module Definition，異步模塊加載機(jī)制）規(guī)范最好的實(shí)現(xiàn)之一。最新版的requireJS壓縮后只有14k，堪稱(chēng)非常輕量。它還同時(shí)可以和其他的框架協(xié)調(diào)工作，使用requireJS必將使我們的前端代碼質(zhì)量得以提升。

首先我們先來(lái)看一下一個(gè)普通的頁(yè)面js加載

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/index02.js" ></script>
  </head>
  <body>
    <h1>this is a page.</h1>
  </body>
</html>

運(yùn)行結(jié)果：

此時(shí)，如果我們不對(duì)彈出框做操作，頁(yè)面就不會(huì)接著加載，就不會(huì)有頁(yè)面內(nèi)容，這并不是我們想要實(shí)現(xiàn)的結(jié)果。

下面我們用require.js進(jìn)行操作：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/require2.1.11.js"></script>
    <script type="text/javascript">
      require(["js/index","js/index01"],function(){
        console.log("當(dāng)js加載成功后會(huì)執(zhí)行的函數(shù)");
      },function(){
        console.log("當(dāng)js加載失敗后會(huì)執(zhí)行的函數(shù)");
      });
    </script>
  </head>
  <body>
  </body>
</html>

index.js

define(function(){
  console.log("this is a test!");
  function test(){
    console.log("haha,i am a test!");
  }
  test();
});

首先頁(yè)面上不再導(dǎo)入test02.js，只是導(dǎo)入了requireJS，其次在javascript中我們使用require()方法，在其中傳遞了一個(gè)數(shù)組的參數(shù)，實(shí)參為我們要導(dǎo)入的js文件的【路徑+文件名稱(chēng)。

此時(shí)的運(yùn)行結(jié)果：

可以看出，此時(shí)頁(yè)面內(nèi)容已經(jīng)顯現(xiàn)出來(lái)了。并不像前面我們傳統(tǒng)的一樣在等待js運(yùn)行完成后頁(yè)面再加載，而是頁(yè)面加載完成后才運(yùn)行js代碼，這樣在運(yùn)行效率上就大大的提高了。

根據(jù)上面的代碼，我們可以來(lái)分析requirejs的基本API:

requireJS會(huì)定義三個(gè)變量：define，require，requirejs

require==requirejs,一般使用require更簡(jiǎn)短。
define 用來(lái)定義一個(gè)模塊
require 加載依賴(lài)模塊（引用定義好的模塊），并執(zhí)行加載完后的回調(diào)函數(shù)

require有三個(gè)參數(shù)：

require(["js/index","js/index01"],function(){
        console.log("當(dāng)js加載成功后會(huì)執(zhí)行的函數(shù)");
      },function(){
        console.log("當(dāng)js加載失敗后會(huì)執(zhí)行的函數(shù)");
      });
//第一個(gè)參數(shù)：定義require中的依賴(lài)，參數(shù)必須是數(shù)組形式，即使只有一個(gè)依賴(lài)，也必須使用數(shù)組形式傳參。
//第二個(gè)參數(shù)：是一個(gè)回調(diào)函數(shù)，用來(lái)處理加載完畢后的邏輯，當(dāng)所有模塊加載完成后觸發(fā)
//第三個(gè)參數(shù)：也是一個(gè)回調(diào)函數(shù)，用來(lái)處理模塊加載失敗后的情況。如上面代碼，js中沒(méi)有定義index01.js這個(gè)文件，所以出調(diào)用這個(gè)回調(diào)函數(shù)。

加載網(wǎng)絡(luò)文件

之前我們加載的都是本地的js文件，但是，有些時(shí)候我們又需要加載網(wǎng)絡(luò)上的文件，那又該怎么加載呢？下面我們就來(lái)介紹一下怎樣加載網(wǎng)絡(luò)上的js文件.

我們現(xiàn)在以加載一個(gè)jquery.js文件為例：

//百度cdn公共庫(kù)jQuery地址：   http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址：      https://code.jquery.com/jquery-3.1.1.js
//注意：網(wǎng)絡(luò)上去取時(shí)不能加后綴，否則取不到
require.config({
  paths : {
    //為網(wǎng)絡(luò)上的庫(kù)去一個(gè)名字：jquery
    "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("頁(yè)面加載成功~~");
},function(){
  alert("頁(yè)面加載失敗~~")
});

在取網(wǎng)絡(luò)上的文件時(shí)注意：

1、config方法的參數(shù)是一個(gè)對(duì)象
2、paths的值也是一個(gè)對(duì)象
3、當(dāng)我們?yōu)榫W(wǎng)絡(luò)上的庫(kù)取名字是任意，但是建議取有意義的名字，別人可以通過(guò)名稱(chēng)知道你的網(wǎng)絡(luò)資源是什么資源
4、庫(kù)的值是一個(gè)數(shù)組，意味著可以多個(gè)同時(shí)寫(xiě)，防止網(wǎng)絡(luò)異常取不到
5、特別注意：網(wǎng)絡(luò)資源路徑不能帶后綴名，否則取不到
6、我們也可以先讓去網(wǎng)絡(luò)中去取，如果取不到，再在本地取，減輕本地服務(wù)的壓力（屬于項(xiàng)目?jī)?yōu)化）。

require.config({
  paths : {
    //這樣配置，減輕本地服務(wù)器的壓力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("頁(yè)面加載成功~~");
},function(){
  alert("頁(yè)面加載失敗~~")
});

同樣我們也可以將本地的配置到paths中：

require.config({
  paths : {
    //這樣配置，減輕本地服務(wù)器的壓力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //將本地的js文件同樣配置，之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

//
require(["jquery","test01","test02"],function(){
  alert("頁(yè)面加載成功~~");
},function(){
  alert("頁(yè)面加載失敗~~")
});

上面的例子中重復(fù)出現(xiàn)了require.config配置，如果每個(gè)頁(yè)面中都加入配置，必然顯得十分不雅，requirejs提供了一種叫”主數(shù)據(jù)”的功能，我們首先創(chuàng)建一個(gè)main.js：

require.config({
  paths : {
    //這樣配置，減輕本地服務(wù)器的壓力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //將本地的js文件同樣配置，之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

然后再頁(yè)面中使用下面的方式來(lái)使用requirejs：

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

  require(["jquery","t1","t2"],function(){
    alert("頁(yè)面加載成功~~");
  },function(){
    alert("頁(yè)面加載失敗~~")
  });

</script>

在官方提供了一種基于標(biāo)簽屬性的方式：

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

將所有的配置和導(dǎo)入js都放在了main.js中，這樣在頁(yè)面只要這樣一個(gè)標(biāo)簽就行了。

代碼演示如下：

//test01.js--定義一個(gè)js模塊
define(function(){
  function test(){
    console.log("this is test01.js");
  }
  test();

  $("p").css("color","#DB7093");
});

//main.js--requirejs的全局配置
require.config({
  paths:{
    "jquery":["jquery-1.8.3"],
    "test":["test01"]
  },
  shim:{
    "test":["jquery"]
  }
});
require(["test"],function(){
  console.log("success!");
});

//index.html--此時(shí)，引入js文件只需一行代碼
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" ></script>
  </head>
  <body>
    <p>i am liyanan and this is a testn Page.</p>
  </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: