html或者jsp頁(yè)面引用jar包中的js文件

2019-11-14 15:28:26

字體：大中小

供稿：網(wǎng)友

一，頁(yè)面上引用jar包中的js文件的方法

使用java web框架AppFuse的時(shí)候發(fā)現(xiàn)，jquery、bootstrap等js框架都封裝到j(luò)ar包里面了。這些js文件通過(guò)一個(gè)wro4j的工具對(duì)其進(jìn)行了壓縮集成到一個(gè)js文件里面。頁(yè)面使用的時(shí)候的時(shí)候，引用這一個(gè)js文件即可。通過(guò)解讀wro對(duì)于js處理的過(guò)程，找到了html或者jsp引用jar包中的js文件的方法：

<c:set var="base" value="${pageContext.request.contextPath}"/><link rel="stylesheet" type="text/CSS" href="${base}/webjars/bootstrap/3.3.1/css/bootstrap.min.css"/><script type="text/Javascript" src="${base}/webjars/jquery.treegrid/0.3.0/js/jquery.treegrid.bootstrap3.js"></script>

注：如果是html頁(yè)面，直接刪除${base}和<c:set var="base" value="${pageContext.request.contextPath}"/>即可。

其中bootstrap的位置：

jquery.treegrid的位置：

通過(guò)對(duì)比可以發(fā)現(xiàn)規(guī)律，運(yùn)行期系統(tǒng)會(huì)將MATA-INFO/resources下面的文件解壓到系統(tǒng)根目錄下。

二，解讀wro對(duì)于jar包中的js以及css的壓縮集成以及頁(yè)面引用

首先，系統(tǒng)引入一個(gè)jar包：wro4j-core-1.7.5.jar。

項(xiàng)目的代碼里面有個(gè)wro配置文件：/src/main/webapp/WEB-INF/wro.xml，該文件的內(nèi)容：

<?xml version="1.0" encoding="UTF-8"?><groups xmlns="http://www.isdc.ro/wro">    <!-- CSS URL Rewriting fails when using webjar resource locator:         https://github.com/alexo/wro4j/issues/127 -->    <group name="main">        <css>classpath:META-INF/resources/webjars/bootswatch-spacelab/3.3.1+2/css/bootstrap.min.css</css>        <css>/styles/style.css</css>        <js>classpath:META-INF/resources/webjars/jquery/1.11.1/jquery.min.js</js>        <js>classpath:META-INF/resources/webjars/bootstrap/3.3.1/js/bootstrap.min.js</js>        <js>classpath:META-INF/resources/webjars/jquery-cookie/1.3.1/jquery.cookie.js</js>        <js>/scripts/script.js</js>    </group>    <group name="treegrid">        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.1/css/bootstrap.min.css</css>        <css>classpath:META-INF/resources/webjars/jquery.treegrid/0.3.0/css/jquery.treegrid.css</css>        <js>classpath:META-INF/resources/webjars/jquery.treegrid/0.3.0/js/jquery.treegrid.min.js</js>        <js>classpath:META-INF/resources/webjars/jquery.treegrid/0.3.0/js/jquery.treegrid.bootstrap3.js</js>    </group></groups>

兩個(gè)group，上面的main是框架帶的，下面的treegrid是我加的。

解析標(biāo)簽的標(biāo)簽文件：/src/main/webapp/WEB-INF/tags/assets.tag，這個(gè)文件的作用是使用xslt將jsp文件中的<t:assets group="treegrid" type="js"/>標(biāo)簽解析成html標(biāo)簽：<script type="text/javascript" src="/assets/v/92097/treegrid.js"></script>

再一個(gè)相關(guān)的文件是對(duì)assets.tag的聲明，/src/main/webapp/common/taglibs.jsp文件中的一行：<%@ taglib

串聯(lián)起來(lái)解釋一遍：

1.wro.xml是核心的配置文件，wro4j-core-1.7.5.jar根據(jù)這個(gè)配置文件抽取并壓縮相關(guān)js文件到一個(gè)js文件中。

2.taglibs.jsp中聲明了一個(gè)標(biāo)簽assets.tag，這個(gè)標(biāo)簽在jsp文件中出現(xiàn)時(shí)，jsp標(biāo)簽的將自身解析成html標(biāo)簽（指向壓縮后的單個(gè)js文件），頁(yè)面就可以引用了。

我為了了解html中引用jar包中的js，網(wǎng)上收索了很多資料，但沒(méi)有解釋的比較全面的。所以寫(xiě)一個(gè)博客來(lái)記錄一下，說(shuō)不定能幫上正在苦惱的人們。