您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)怎么在require.js中對(duì)路徑進(jìn)行配置,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
通常一般的前端加載js文件都是這樣 :
<script type="text/javascript" src="js/js1.js"></script> <script type="text/javascript" src="js/js2.js"></script> <script type="text/javascript" src="js/js3.js"></script> <script type="text/javascript" src="js/js4.js"></script>
但是當(dāng)一個(gè)項(xiàng)目特別大的時(shí)候 引入的js文件就特別多,這樣看起來(lái)不雅觀,并且不高效,當(dāng)js文件多而大的時(shí)候,網(wǎng)頁(yè)下載就會(huì)出現(xiàn)超時(shí),導(dǎo)致網(wǎng)站響應(yīng)超時(shí),直接500,所以一個(gè)神奇的
js框架(js工具包)就出現(xiàn)了:require.js。
require.js主要解決兩個(gè)問(wèn)題:
1、實(shí)現(xiàn)js的異步加載,避免js太多加載響應(yīng)時(shí)間太多導(dǎo)致網(wǎng)站超時(shí),
2、管理模塊之間的依賴性,便于編寫(xiě)與維護(hù)。
好了步入今天的正題,寫(xiě)一個(gè)require.js用法的案例,供大家參考一下:
假設(shè)我們的項(xiàng)目有一個(gè)這樣的資源目錄:
第一步在index.html中引入已經(jīng)下載好的require.js
然后我們新建一個(gè)config.js來(lái)寫(xiě)相應(yīng)的加在配置:
然后打開(kāi)config.js里面寫(xiě)入代碼如下:
require.config({ baseUrl:'/data/points/',//配置基目錄 urlArgs:'v='+(new Date()).getTime(),//清楚緩存 paths:{ 'css': 'libs/js/css.min', 'jquery': 'libs/js/jquery-1.11.1.min', 'vur': 'libs/js/vue.min', 'amazeui': 'libs/js/amazeui.min', 'color': 'libs/js/color.min' }, shim:{ 'amazeui':{ deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'], }, 'color':{ deps:['css!libs/css/color.min'] } } });
其中加入css應(yīng)該用模塊的依賴性 也就是deps
deps:['css!libs/css/color.min'] 這里會(huì)優(yōu)先加在css這個(gè)模塊名下的文件(libs/js/css.min.js) 然后一個(gè) "!"后面緊接著在基目錄下加在libs/css/color.min.css
其中css.min.js這個(gè)是一個(gè)依賴模塊js,這里面是寫(xiě)了一個(gè)加載css文件的方法,
具體css.min.js
define( function () { if (typeof window == "undefined")return { load: function (n, r, load) { load() } }; var head = document.getElementsByTagName("head")[0]; var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)/) || 0; var useImportLoad = false; var useOnload = true; if (engine[1] || engine[7])useImportLoad = parseInt(engine[1]) < 6 || parseInt(engine[7]) <= 9; else if (engine[2])useOnload = false; else if (engine[4])useImportLoad = parseInt(engine[4]) < 18; var cssAPI = {}; cssAPI.pluginBuilder = "./css-builder"; var curStyle; var createStyle = function () { curStyle = document.createElement("style"); head.appendChild(curStyle) }; var importLoad = function (url, callback) { createStyle(); var curSheet = curStyle.styleSheet || curStyle.sheet; if (curSheet && curSheet.addImport) { curSheet.addImport(url); curStyle.onload = callback } else { curStyle.textContent = '@import "' + url + '";'; var loadInterval = setInterval(function () { try { curStyle.sheet.cssRules; clearInterval(loadInterval); callback() } catch (e) { } }, 10) } }; var linkLoad = function (url, callback) { var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; if (useOnload)link.onload = function () { link.onload = function () { }; setTimeout(callback, 7) }; else var loadInterval = setInterval(function () { for (var i = 0; i < document.styleSheets.length; i++) { var sheet = document.styleSheets[i]; if (sheet.href == link.href) { clearInterval(loadInterval); return callback() } } }, 10); link.href = url; head.appendChild(link) }; cssAPI.normalize = function (name, normalize) { if (name.substr(name.length - 4, 4) == ".css")name = name.substr(0, name.length - 4); return normalize(name) }; cssAPI.load = function (cssId, req, load, config) { (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + ".css"), load) }; return cssAPI } );
現(xiàn)在好了瀏覽器打開(kāi)index.html發(fā)現(xiàn)沒(méi)有把我們需要額外加在的加在進(jìn)來(lái),這個(gè)是為是么呢?好了,這里的話記得要在index.html的head下<script type="javascript/text" src="config.js"></script>后面調(diào)用require.js中的方法require,也就是加上這一句
<script type="javascript/text' >require['color']</script>//標(biāo)識(shí)調(diào)用配置中的color模塊
再次訪問(wèn)index.html好了完美出現(xiàn)我們想要的了。
如圖:
注意
index.html中引入的順序不能打亂
<script type="text/javascript" src="config.js"></script> <script type="text/javascript" src="require.js"></script> <script type="text/javascript">require(['color']);</script>
require.config()接受一個(gè)配置對(duì)象,這個(gè)對(duì)象除了有前面說(shuō)過(guò)的paths屬性之外,還有一個(gè)shim屬性,專門(mén)用來(lái)配置不兼容的模塊。具體來(lái)說(shuō),每個(gè)模塊要定義(1)exports值(輸出的變量名),表明這個(gè)模塊外部調(diào)用時(shí)的名稱;(2)deps數(shù)組,表明該模塊的依賴性。
看完上述內(nèi)容,你們對(duì)怎么在require.js中對(duì)路徑進(jìn)行配置有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。