【1】簡要
在jsp 頁面頭部head標籤中，常常見到<link/> <script/>標籤。其中link引用的是項目其他路徑下的css文件，script引用的則是項目其他路徑下的js文件。
前者定義了html 樣式，後者定義了一些你可能在該jsp頁面使用到的js 函數。
如下所示：
<script src="<%=uiPath%>ui/jquery/jquery.min.js" type="text/javascript"></script>
<link href="<%=uiPath%>ui/skins/default/css/commons.css" rel="stylesheet" type="text/css" />
<link href="<%=uiPath%>ui/skins/default/css/test.css" rel="stylesheet" type="text/css" />
<script src="<%=uiPath%>ui/js/commons.js" type="text/javascript"></script>
<script src="<%=uiPath%>ui/js/common_edit.js" type="text/javascript"></script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
【2】link
link 引用其他路徑下的CSS文件，在jsp頁面中，link是強次序的。
我們做個實驗。
jsp頁面如下：
<div>
<span class="testls">test link script</span>
</div>
- 1
- 2
- 3
- 4
commons.css中對class=testls的定義如下：
.testls{
color:red;
font-weight:bold;
}
- 1
- 2
- 3
- 4
test.css中對class=testls的定義如下：
.testls{
color:blue;
font-size:14px;
}
- 1
- 2
- 3
- 4
頁面引用次序如下：
<link href="<%=uiPath%>ui/skins/default/css/commons.css" rel="stylesheet" type="text/css" />
<link href="<%=uiPath%>ui/skins/default/css/test.css" rel="stylesheet" type="text/css" />
- 1
- 2
- 3
使用瀏覽器訪問：
兩個link次序顛倒一下，使用瀏覽器訪問：
說明：JSP頁面中link標籤有強烈的先後次序，可以這樣理解。對同一個class定義的不同方式，將會”求同存異”。
如兩次瀏覽器顯示所表明的，都定義了color，但是color依據第二個被加載的css中定義的屬性值。但是卻兼容了第一個css中的font-weight和第二個css中的font-size。
這和你同時使用兩個class是一致的。
<div>
<span class="test1 test2">test link script</span>
</div>
- 1
- 2
- 3
【3】script
一些公共js 函數常常會寫到一些公共js文件中供頁面使用。
與link標籤不同的是，頁面中script引用是弱次序的。
jsp頁面如下：
<script type="text/javascript">
$(function(){
test1();
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
頁面對js文件引用次序如下：
<script src="<%=uiPath%>ui/js/commons.js" type="text/javascript"></script>
<script src="<%=uiPath%>ui/js/common_edit.js" type="text/javascript"></script>
- 1
- 2
- 3
commons.js文件如下：
- 定義了test1,test2函數，其中test2函數調用了test3函數。
function test1(){
console.log("this is test1-common js");
}
function test2(){
console.log("this is test2-common js reference common_edit js test3");
test3();
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
common_edit.js文件如下：
- 定義了test1函數,test3函數，其中test1調用了test2函數。
function test1(){
console.log("this is test1-common_edit js reference commons js test2");
test2();
}
function test3(){
console.log("this is test3-common_edit js");
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
使用瀏覽器訪問：
如圖所示，調用的是第二個script引用中的test1函數。這說明，第二個引用中的test1函數在當前頁面中覆蓋掉了第一個引用中的test1函數。
這說明jsp頁面如果引用的兩個js文件中有同名函數，那麼在jsp頁面調用時，後來引用的js文件中的函數將會在當前頁面覆蓋掉前面js文件中的函數。
換句話說，common_edit.js中的test1函數在當前jsp頁面覆蓋掉了commons.js中的test1函數。
即，script引用是有次序的。
說script引用是弱次序，請往下看。
更改函數調用如下：
<script type="text/javascript">
$(function(){
test2();
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
使用瀏覽器訪問：
首先執行common.js文件中的test2函數，該函數調用了common_edit.js文件中的test3函數。
這裏額外說明一點：js文件中函數是不驗證的，只有在調用的時候才校驗。
當加載common.js文件時肯定還沒有加載comon_edit.js文件。此時common.js文件中的test2函數並不報錯。
當瀏覽器獲取到jsp的響應後，會一個個去加載link，script。
如上圖所示，network中的網絡請求與頁面上link標籤和script標籤引用次序一致。
該頁面中函數的執行是在頁面加載完執行的(無需多言，加載不完肯定保錯)。
故而，總結如下：
-
如果兩個js文件中無同名函數，你可以理解jsp頁面script標籤引用是無次序的(相當於將兩個js文件中的函數都放在了頁面，隨意使用)。
-
如果兩個js文件中有同名函數，一定要注意次序。後加載的js文件會覆蓋掉上一個js文件中的同名函數。