當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

requireJS文件夹

發布時間：2025/6/15 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 requireJS文件夹小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

對于像我這樣的requireJS剛開始學習的人而言，requireJS最難理解的部分應該是它的路徑問題。晚上隨便折騰了一下，算是略微理清了這個文件夾問題吧。

requireJS學習網址：requireJS中文網 requireJS英文網

requireJS簡單介紹

隨著前端代碼量的日益龐大和復雜的結構，以及越來越多框架的出現。怎樣有效的管理你的代碼，已經成為一個團隊亟待解決的問題。而RequireJS的目標是鼓舞代碼的模塊化，它使用了不同于傳統script標簽的腳本載入步驟。

能夠用它來加速、優化代碼，但其主要目的還是為了代碼的模塊化。RequireJS以一個相對于baseUrl的地址來載入全部的代碼。下圖是隨便寫的一個小的DEMO文件文件夾：

baseUrl模塊查找的根路徑

首先在index.html頁面中引入requireJS文件

或者

引入requireJS文件，能夠須要接下來文件的主入口屬性data-main。也能夠不須要。

無data-main屬性

假設沒有data-main屬性。則baseUrl默覺得引入requireJS文件的HTML所處的位置，上述代碼中為“wechart/”。

有data-main

假設有data-main屬性，則baseUrl默覺得data-main屬性值中的文件文件夾，上述中即為“js”。

config中設置

能夠在require.config({})中明白設置。
DEMO中把相關的配置寫進了主入口文件即entry.js中

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

baseUrl的文件夾不是以“/”或者相關協議（如http或https）開頭，則默覺得相對路徑。比如我們把上面baseUrl改成“/js/”,則就變成相對于磁盤的根文件夾啦。

這里能夠看到jquery和a兩個文件沒有正確載入。原因是文件夾相對于c盤了。其余模塊正常載入原因繼續向下看。

上面所說的baseUrl文件夾，都是僅僅在定義模塊時用到的路徑。

如a.js文件：

define(['jquery'], function($) {return function() {$("#test").html("<p>aaa</p>");} });

模塊a中的文件依賴jquery。須要先載入jquery之后才干運行模塊里面的回調函數。而jquery的模塊查找完整路徑即為entry.js里面的baseUrl+paths配置文件夾(paths詳細配置可參考官網相關介紹)，即為**”wechart/js/lib/jquery/jquery-1.7.1.js”。

ps：requireJS內部默覺得須要載入的js文件加入后綴名“.js”，所以能夠省略對應的后綴名。假設配置中給jquery加入后綴名。則會出現兩個”.js”。

對于一個模塊載入還有一個模塊的文件夾問題

DEMO中我的模塊b依賴于模塊a：

define(['jquery','my/a'], function($, a) {a();console.log("bbb"); });

則模塊b載入前載入模塊的文件夾為baseUrl+依賴中定義的文件夾，上述載入模塊a的文件夾為js/my/a.js。因為模塊a的路徑也須要依據baseUrl來查找。所以上面baseUrl更改成“/js/”時，模塊a也載入出錯。

HTML中require相關模塊的路徑問題

require中相關模塊路徑查找為baseUrl+require依賴中所給文件夾
可是，
因為require內部模塊載入機制為異步載入，所以對應的baseUrl需區分下面情況

有主入口文件且為配置文件

因為上面敘述過，假設有data-main,且文件中有baseUrl配置。則baseUrl應為配置中的“js/”,但因為requireJS異步載入機制。主入口文件須要在HTML的全部script文件載入后才開始載入，即在require運行載入模塊時。對應的主入口文件entry.js尚未被載入。

則此時的baseUrl仍為主入口的文件文件夾。所以HTML中載入模塊b時須要使用“../”進入“js/”文件夾。
DEMO中index.html代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="test">111</div><script src="js/lib/require.js" data-main="js/entry/entry"></script><script>require(['../my/b'], function(b) {console.log("b has been called");});</script> </body> </html>

無主入口文件

把對應的配置文件代碼放在載入模塊代碼前。則此時的baseUrl即為配置中的文件夾。對應的HTML代碼更改為

對于無配置文件的情況不利于代碼的后期維護，果斷省略。

。。

轉載于:https://www.cnblogs.com/clnchanpin/p/7094224.html

總結

以上是生活随笔為你收集整理的requireJS文件夹的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： css03层次选择器
下一篇： PPP interface for lw