談?wù)凥TML/CSS/JS代碼中的文件相對(duì)路徑
轉(zhuǎn)載 作者microkof(http://www.reibang.com/u/eec05fd43014)
我們?cè)贖TML/CSS/JS代碼中經(jīng)常會(huì)寫一些文件的相對(duì)路徑和絕對(duì)路徑肺稀，絕對(duì)路徑還好說香到，相對(duì)路徑到底他媽的相對(duì)的誰呢呼巷？恐怕很多人都不敢說完全弄清楚了愧哟。尤其是現(xiàn)在的開發(fā)過程盏浇，有開發(fā)環(huán)境、測試環(huán)境佑稠、部署環(huán)境粗卜，每個(gè)環(huán)境的相對(duì)路徑可能又有區(qū)別。今天我就全面做測試桥爽，測試到底他媽的都是相對(duì)誰朱灿。
基礎(chǔ)知識(shí)
../
、./
钠四、/
盗扒、只寫文件名，這四種情況分別代表什么缀去？
../
代表父級(jí)目錄侣灶，連寫的話，比如../../
表示往上追溯兩級(jí)目錄
./
代表當(dāng)前目錄缕碎，連寫的話無意義
/
代表網(wǎng)站根目錄褥影，就是服務(wù)器www目錄
只寫文件名，跟./
效果一樣
HTML文件代碼中的相對(duì)路徑
測試起來很簡單咏雌，找一個(gè)路徑比較深的網(wǎng)頁凡怎，然后控制臺(tái)輸入document.write('<a href="../a/b/c.html">link</a>')
結(jié)論：HTML代碼中的相對(duì)路徑就是以本HTML文件所在目錄開始計(jì)算。
CSS文件代碼中的相對(duì)路徑
CSS文件中寫相對(duì)路徑的情況主要是設(shè)背景圖和引入字體文件赊抖，我們?cè)囋嚕?br>
HTML文件內(nèi)容：
<link rel="stylesheet" type="text/css" href="../../page2/page22/2.css"><p class="a">fsfsfdsfsdfsgsd3gdfhf</p>
CSS文件內(nèi)容：
@font-face { font-family: 'a'; src: url('../Lost in Wild.ttf');}.a { font-family: 'a';}
預(yù)覽可以看到栅贴，p元素成功應(yīng)用了字體。
結(jié)論：CSS文件內(nèi)如果寫相對(duì)路徑熏迹，是基于CSS文件本身的檐薯，跟誰引入了這個(gè)CSS無關(guān)。
JS文件代碼中的相對(duì)路徑
HTML文件，路徑是/page1/page11/1.html：
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="../../page2/page22/2.js"></script>
JS文件坛缕，路徑是/page2/page22/2.js：
$.get('../2.html', function(data) { console.log(data);});
現(xiàn)在是2.html放在JS文件的上一級(jí)目錄（也就是page2）墓猎，跟HTML文件的page1目錄無關(guān)。經(jīng)測試赚楚，JS文件內(nèi)寫的'../2.html'
是無效的毙沾。然后我改成'../../2.html'
，就生效了宠页。
結(jié)論：JS文件內(nèi)的相對(duì)路徑左胞，也是從HTML文件所在位置開始計(jì)算的。
總結(jié)
HTML文件和JS文件中的相對(duì)路徑举户，都是從HTML文件所在位置開始計(jì)算的烤宙。
CSS文件中的相對(duì)路徑，是從CSS文件所在位置開始計(jì)算的俭嘁。
怎么理解這種設(shè)定躺枕？
當(dāng)初創(chuàng)世者怎么考慮的，咱們不去探討供填，只是感受一下這種設(shè)定的好處：
JS因這種設(shè)定拐云，就可以實(shí)現(xiàn)瀏覽器的跨域限制；JS文件是為HTML服務(wù)的近她，以HTML為核心更科學(xué)叉瘩，而且除了ajax，JS文件很少再與其他文件產(chǎn)生關(guān)聯(lián)粘捎；CSS文件內(nèi)的img和字庫房揭，是為CSS服務(wù)的，當(dāng)然應(yīng)該相對(duì)于CSS文件所在位置進(jìn)行計(jì)算晌端。
