javascript
requireJS文件夹
前言
對于像我這樣的requireJS剛開始學(xué)習(xí)的人而言，requireJS最難理解的部分應(yīng)該是它的路徑問題。晚上隨便折騰了一下，算是略微理清了這個文件夾問題吧。
requireJS學(xué)習(xí)網(wǎng)址：requireJS中文網(wǎng) requireJS英文網(wǎng)
requireJS簡單介紹
隨著前端代碼量的日益龐大和復(fù)雜的結(jié)構(gòu)，以及越來越多框架的出現(xiàn)。怎樣有效的管理你的代碼，已經(jīng)成為一個團(tuán)隊(duì)亟待解決的問題。而RequireJS的目標(biāo)是鼓舞代碼的模塊化，它使用了不同于傳統(tǒng)script標(biāo)簽的腳本載入步驟。
能夠用它來加速、優(yōu)化代碼，但其主要目的還是為了代碼的模塊化。RequireJS以一個相對于baseUrl的地址來載入全部的代碼。下圖是隨便寫的一個小的DEMO文件文件夾：
baseUrl模塊查找的根路徑
首先在index.html頁面中引入requireJS文件
<script src="js/lib/require.js" data-main="js/entry"></script>或者
<script src="js/lib/require.js"></script>引入requireJS文件，能夠須要接下來文件的主入口屬性data-main。也能夠不須要。
無data-main屬性
假設(shè)沒有data-main屬性。則baseUrl默覺得引入requireJS文件的HTML所處的位置，上述代碼中為“wechart/”。
有data-main
假設(shè)有data-main屬性，則baseUrl默覺得data-main屬性值中的文件文件夾，上述中即為“js”。
config中設(shè)置
能夠在require.config({})中明白設(shè)置。
DEMO中把相關(guān)的配置寫進(jìn)了主入口文件即entry.js中
baseUrl的文件夾不是以“/”或者相關(guān)協(xié)議（如http或https）開頭，則默覺得相對路徑。比如我們把上面baseUrl改成“/js/”,則就變成相對于磁盤的根文件夾啦。
這里能夠看到j(luò)query和a兩個文件沒有正確載入。原因是文件夾相對于c盤了。其余模塊正常載入原因繼續(xù)向下看。
上面所說的baseUrl文件夾，都是僅僅在定義模塊時用到的路徑。
如a.js文件：
define(['jquery'], function($) {return function() {$("#test").html("<p>aaa</p>");} });模塊a中的文件依賴jquery。須要先載入jquery之后才干運(yùn)行模塊里面的回調(diào)函數(shù)。而jquery的模塊查找完整路徑即為entry.js里面的baseUrl+paths配置文件夾(paths詳細(xì)配置可參考官網(wǎng)相關(guān)介紹)，即為**”wechart/js/lib/jquery/jquery-1.7.1.js”。
ps：requireJS內(nèi)部默覺得須要載入的js文件加入后綴名“.js”，所以能夠省略對應(yīng)的后綴名。假設(shè)配置中給jquery加入后綴名。則會出現(xiàn)兩個”.js”。
對于一個模塊載入還有一個模塊的文件夾問題
DEMO中我的模塊b依賴于模塊a：
define(['jquery','my/a'], function($, a) {a();console.log("bbb"); });則模塊b載入前載入模塊的文件夾為baseUrl+依賴中定義的文件夾，上述載入模塊a的文件夾為js/my/a.js。因?yàn)槟Ka的路徑也須要依據(jù)baseUrl來查找。所以上面baseUrl更改成“/js/”時，模塊a也載入出錯。
HTML中require相關(guān)模塊的路徑問題
require中相關(guān)模塊路徑查找為baseUrl+require依賴中所給文件夾
可是，
因?yàn)閞equire內(nèi)部模塊載入機(jī)制為異步載入，所以對應(yīng)的baseUrl需區(qū)分下面情況
有主入口文件且為配置文件
因?yàn)樯厦鏀⑹鲞^，假設(shè)有data-main,且文件中有baseUrl配置。則baseUrl應(yīng)為配置中的“js/”,但因?yàn)閞equireJS異步載入機(jī)制。主入口文件須要在HTML的全部script文件載入后才開始載入，即在require運(yùn)行載入模塊時。對應(yīng)的主入口文件entry.js尚未被載入。
則此時的baseUrl仍為主入口的文件文件夾。所以HTML中載入模塊b時須要使用“../”進(jìn)入“js/”文件夾。
DEMO中index.html代碼：
無主入口文件
把對應(yīng)的配置文件代碼放在載入模塊代碼前。則此時的baseUrl即為配置中的文件夾。對應(yīng)的HTML代碼更改為
<script>require.config({baseUrl: "js/",paths: {jquery: "lib/jquery/jquery-1.7.1"}});require(['my/b'], function(b) {console.log("b has been called");});</script>對于無配置文件的情況不利于代碼的后期維護(hù)，果斷省略。
。。
轉(zhuǎn)載于:https://www.cnblogs.com/clnchanpin/p/7094224.html
總結(jié)
以上是生活随笔為你收集整理的requireJS文件夹的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css03层次选择器
- 下一篇： PPP interface for lw