javascript require.js的具體使用方法-js教程-PHP中文網

首頁

web前端

js教程

javascript require.js的具體使用方法

小云云

Jan 04, 2018 am 09:22 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>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>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7545

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

DirectX修復工具怎麼用？ DirectX修復工具詳細使用方法 Mar 15, 2024 am 08:31 AM

　　DirectX修復工具是專業的系統工具，主要功能是偵測目前系統的DirectX狀態，如果發現異常就可以直接修復。可能還有很多用戶不清楚DirectX修復工具怎麼用吧，以下就來看看詳細教學。　　1、使用修復工具軟體進行修復檢測。　　2、如果修復完成後提示C++元件有異常的問題，請點選取消按鈕，然後點選工具選單列。　　3、點選選項按鈕，選擇擴展，點選開始擴展按鈕。　　4、擴展完成後再重新進行檢測修復即可。　　5、如果修復工具操作完成後仍未解決問題，可以嘗試卸載重新安裝報錯的程序。

HTTP 525狀態碼介紹：探究其定義與應用 Feb 18, 2024 pm 10:12 PM

HTTP525狀態碼簡介：了解其定義與使用方法HTTP（HypertextTransferProtocol）525狀態碼是指伺服器在SSL握手過程中發生錯誤，導致無法建立安全連線。在傳輸層安全性（TLS）握手期間發生錯誤時，伺服器將傳回此狀態碼。此狀態碼屬於伺服器錯誤類別，通常表示伺服器配置或設定問題。當客戶端嘗試透過HTTPS連接到伺服器時，伺服器無

百度網盤怎麼用-百度網盤的使用方法 Mar 04, 2024 pm 09:28 PM

有很多朋友還不知道百度網盤怎麼用，所以下面小編就講解了百度網盤的使用方法，有需要的小伙伴趕緊來看一下吧，相信對大家一定會有所幫助哦。第一步：安裝好百度網盤後直接登入(如圖);第二步：接著可依頁面提示選擇「我的分享」與「傳輸清單」(如圖);第三步：在「好友分享」裡可以把圖片和檔案直接分享給好友(如圖所示);第四步：接著選擇「分享」後可勾選電腦檔案或是網盤檔案(如圖所示);第五步：然後就可以尋找好友(如圖所示);第六步：還可以在「功能寶箱」中尋找自己需要的功能(如圖所示)。上面就是小編為大

快速學會複製和貼上操作 Feb 18, 2024 pm 03:25 PM

複製貼上快捷鍵使用方法複製貼上是我們在日常使用電腦時經常會遇到的操作。為了提高工作效率，熟練複製貼上快捷鍵是非常重要的。本文將介紹一些常用的複製貼上快捷鍵使用方法，幫助讀者更方便地進行複製貼上操作。複製快速鍵：Ctrl+CCtrl+C是複製的快速鍵，按住Ctrl鍵然後再按C鍵，即可將選取的文字、檔案、圖片等內容複製到剪貼簿。要使用該快捷鍵，

KMS啟動工具是什麼？ KMS啟動工具怎麼用？ KMS啟動工具使用方法？ Mar 18, 2024 am 11:07 AM

KMS啟動工具是一種用來啟動微軟Windows和Office產品的軟體工具。 KMS是KeyManagementService的縮寫，即金鑰管理服務。 KMS啟動工具透過模擬KMS伺服器的功能，使得電腦可以連接到這個虛擬的KMS伺服器，從而實現對Windows和Office產品的啟動。 KMS激活工具體積小巧，功能強大，可以一鍵永久激活，無需聯網狀態就可以激活任何版本的window系統和任何版本的Office軟體，是目前最成功的且經常更新的Windows激活工具，今天小編就跟大家介紹一下kms激活工

如何使用快捷鍵合併儲存格 Feb 26, 2024 am 10:27 AM

合併儲存格的快速鍵怎麼用在日常工作中，我們常常需要對表格進行編輯和排版。而合併單元格是一種常見的操作，可以將相鄰的多個單元格合併為一個單元格，以提高表格的美觀程度和資訊展示效果。在MicrosoftExcel和GoogleSheets等主流的電子表格軟體中，合併儲存格的操作非常簡便，可以透過快速鍵來實現。以下將介紹在這兩個軟體中合併儲存格的快速鍵用法。在

potplayer怎麼用-potplayer的使用方法 Mar 04, 2024 pm 06:10 PM

potplayer是一款非常強大的媒體播放器，但不少夥伴還不知道potplayer怎麼用，今天小編就來詳細介紹一下potplayer的使用方法，希望能幫助大家。 1.PotPlayer快捷鍵PotPlayer播放器預設常用快捷鍵如下：(1)播放/暫停：空格(2)音量：滑鼠滾輪，上下方向鍵(3)前進/後退：左右方向鍵(4)書籤：P-加入書籤，H-查看書籤(5)全螢幕/還原：Enter(6)倍速：C-加速，X-減速，Z-復位(按一次調整0.1倍速度，可以在0.2到12倍速之間調節)( 7)上/下一幀：D/

PyCharm是什麼？功能介紹與使用方法詳解 Feb 20, 2024 am 09:21 AM

PyCharm是一款由JetBrains公司開發的專業的Python整合開發環境（IDE），它為Python開發者提供了強大的功能和工具，使得編寫Python程式碼更有效率、更方便。 PyCharm支援多種作業系統，包括Windows、macOS和Linux，同時也支援多種Python版本，並且提供了豐富的插件和擴充功能，方便開發者根據自己的需求客製化IDE環境。 P

See all articles

javascript require.js的具體使用方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題