javascript高階模組化require.js的具體使用方法實例分享-js教程-PHP中文網

首頁

web前端

js教程

javascript高階模組化require.js的具體使用方法實例分享

小云云

Jan 02, 2018 am 09:08 AM

javascript模組化

本文主要介紹了javascript高階模組化require.js的具體使用方法，非常具有實用價值，需要的朋友可以參考下，希望能幫助大家。

Require.js：

RequireJS是一個非常小巧的javascript模組載入框架，是AMD（Asynchronous Module Definition，非同步模組載入機制）規格最好的實現之一。最新版的requireJS壓縮後只有14k，堪稱非常輕量。它也同時可以和其他的框架協調工作，使用requireJS必將使我們的前端程式碼品質得以提升。

首先我們先來看看一個普通的頁面js載入

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

運行結果：

此時，如果我們不對彈出框做操作，頁面就不會接著加載，就不會有頁面內容，這並不是我們想要實現的結果。

下面我們要用require.js做：

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("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
    </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();
});

首先頁面上不再導入test02.js，只是導入了requireJS，其次在javascript中我們使用require()方法，在其中傳遞了一個數組的參數，實參為我們要匯入的js檔案的【路徑+檔案名稱。

此時的運行結果：

#可以看出，此時頁面內容已經顯現出來了。並不像前面我們傳統的一樣在等待js運行完成後頁面再加載，而是頁面加載完成後才運行js程式碼，這樣在運行效率上就大大的提高了。

根據上面的程式碼，我們可以來分析requirejs的基本API:

requireJS會定義三個變數：define，require，requirejs

require==requirejs,一般使用require比較短。
define 用來定義一個模組
#require 載入依賴模組（引用定義好的模組），並執行載入完後的回呼函數

require有三個參數：

require(["js/index","js/index01"],function(){
        console.log("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
//第一个参数：定义require中的依赖，参数必须是数组形式，即使只有一个依赖，也必须使用数组形式传参。
//第二个参数：是一个回调函数，用来处理加载完毕后的逻辑，当所有模块加载完成后触发
//第三个参数：也是一个回调函数，用来处理模块加载失败后的情况。如上面代码，js中没有定义index01.js这个文件，所以出调用这个回调函数。

載入網路檔案

之前我們載入的都是本地的js文件，但是，有些時候我們又需要載入網路上的文件，那又該怎麼載入呢？下面我們就來介紹一下怎樣載入網路上的js檔.

我們現在以載入一個jquery.js檔案為例：

//百度cdn公共库jQuery地址：   http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址：      https://code.jquery.com/jquery-3.1.1.js
//注意：网络上去取时不能加后缀，否则取不到
require.config({
  paths : {
    //为网络上的库去一个名字：jquery
    "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

在取網路上的檔案時注意：

1、config方法的參數是一個物件
2、paths的值也是一個物件
3、當我們為網路上的函式庫取名字是任意，但建議取有意義的名字，別人可以透過名稱知道你的網路資源是什麼資源
4、函式庫的值是一個數組，意味著可以多個同時寫，防止網路異常取不到
5 、特別注意：網路資源路徑不能帶後綴名，否則取不到
6、我們也可以先讓去網路中去取，如果取不到，再在本地取，減輕本地服務的壓力（屬於項目最佳化).

require.config({
  paths : {
    //这样配置，减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

同樣我們也可以將本機的設定到paths：

require.config({
  paths : {
    //这样配置，减轻本地服务器的压力
    "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("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

上面的範例中重複出現了require.config配置，如果每個頁面中都加入配置，必然顯得十分不雅，requirejs提供了一種叫」主資料」的功能，我們先建立一個main.js：

require.config({
  paths : {
    //这样配置，减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //将本地的js文件同样配置，之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

然後再頁面中使用下面的方式來使用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("页面加载成功~~");
  },function(){
    alert("页面加载失败~~")
  });

</script>

在官方提供了一種基於標籤屬性的方式：

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

將所有的設定和匯入js都放在了main.js中，這樣在頁面只要這樣一個標籤就行了。

程式碼示範如下：

//test01.js--定义一个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--此时，引入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>

相關推薦：

require.js的使用方法詳細介紹

#require.js的路徑配置和css的引入方法詳解

如何使用require.js？讓JS載入速度更快

以上是javascript高階模組化require.js的具體使用方法實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。