html或者jsp頁面引用jar包中的js文件

2019-11-14 15:28:26

字體：大中小

來源：轉載

供稿：網友

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

使用java web框架AppFuse的時候發現，jquery、bootstrap等js框架都封裝到jar包里面了。這些js文件通過一個wro4j的工具對其進行了壓縮集成到一個js文件里面。頁面使用的時候的時候，引用這一個js文件即可。通過解讀wro對于js處理的過程，找到了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頁面，直接刪除${base}和<c:set var="base" value="${pageContext.request.contextPath}"/>即可。

其中bootstrap的位置：

jquery.treegrid的位置：

通過對比可以發現規律，運行期系統會將MATA-INFO/resources下面的文件解壓到系統根目錄下。

二，解讀wro對于jar包中的js以及css的壓縮集成以及頁面引用

首先，系統引入一個jar包：wro4j-core-1.7.5.jar。

項目的代碼里面有個wro配置文件：/src/main/webapp/WEB-INF/wro.xml，該文件的內容：

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

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

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

再一個相關的文件是對assets.tag的聲明，/src/main/webapp/common/taglibs.jsp文件中的一行：<%@ taglib

串聯起來解釋一遍：

1.wro.xml是核心的配置文件，wro4j-core-1.7.5.jar根據這個配置文件抽取并壓縮相關js文件到一個js文件中。

2.taglibs.jsp中聲明了一個標簽assets.tag，這個標簽在jsp文件中出現時，jsp標簽的將自身解析成html標簽（指向壓縮后的單個js文件），頁面就可以引用了。

我為了了解html中引用jar包中的js，網上收索了很多資料，但沒有解釋的比較全面的。所以寫一個博客來記錄一下，說不定能幫上正在苦惱的人們。