关于JSP页面的script和link标签

【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>

【2】link

link 引用其他路径下的CSS文件，在jsp页面中，link是强次序的。

我们做个实验。

jsp页面如下：


<div>
    <span class="testls">test link script</span>
</div>

commons.css中对class=testls的定义如下：

.testls{
    color:red;
    font-weight:bold;
}

test.css中对class=testls的定义如下：

.testls{
    color:blue;
    font-size:14px;
}

页面引用次序如下：

<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" />

使用浏览器访问：

这里写图片描述

两个link次序颠倒一下，使用浏览器访问：

这里写图片描述

说明：JSP页面中link标签有强烈的先后次序，可以这样理解。对同一个class定义的不同方式，将会”求同存异”。

如两次浏览器显示所表明的，都定义了color，但是color依据第二个被加载的css中定义的属性值。但是却兼容了第一个css中的font-weight和第二个css中的font-size。

这和你同时使用两个class是一致的。

<div>
    <span class="test1 test2">test link script</span>
</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文件中的同名函数。