JSP中的link与script引用
【1】简要
在jsp 页面头部head标签中，常常见到 标签。其中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>【2】link
link 引用其他路径下的CSS文件，在jsp页面中，link是强次序的。
我们做个实验。
jsp页面如下：
<div>
<span class="testls">test link scriptspan>
div>commons.css中对class=testls的定义如下：
.testls{
color:red;
font-weight:bold;
}test.css中对class=testls的定义如下：
.testls{
color:blue;
font-size:14px;
}页面引用次序如下：
"<%=uiPath%>ui/skins/default/css/commons.css" rel="stylesheet" type="text/css" />
"<%=uiPath%>ui/skins/default/css/test.css" rel="stylesheet" type="text/css" />使用浏览器访问：
两个link次序颠倒一下，使用浏览器访问：
说明：JSP页面中link标签有强烈的先后次序，可以这样理解。对同一个class定义的不同方式，将会”求同存异”。
如两次浏览器显示所表明的，都定义了color，但是color依据第二个被加载的css中定义的属性值。但是却兼容了第一个css中的font-weight和第二个css中的font-size。
这和你同时使用两个class是一致的。
<div>
<span class="test1 test2">test link scriptspan>
div>【3】script
一些公共js 函数常常会写到一些公共js文件中供页面使用。
与link标签不同的是，页面中script引用是弱次序的。
jsp页面如下：
<script type="text/javascript">
$(function(){
test1();
});
script>页面对js文件引用次序如下：
<script src="<%=uiPath%>ui/js/commons.js" type="text/javascript">script>
<script src="<%=uiPath%>ui/js/common_edit.js" type="text/javascript">script>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();
}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");
}使用浏览器访问：
如图所示，调用的是第二个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>使用浏览器访问：
首先执行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文件中的同名函数。