html或者jsp页面引用jar包中的js文件 - 赵文元

时间：2024-03-02 13:03:11

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

一，页面上引用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 prefix="t" tagdir="/WEB-INF/tags" %>

串联起来解释一遍：

1.wro.xml是核心的配置文件，wro4j-core-1.7.5.jar根据这个配置文件抽取并压缩相关js文件到一个js文件中。

2.taglibs.jsp中声明了一个标签assets.tag，这个标签在jsp文件中出现时，jsp标签的将自身解析成html标签（指向压缩后的单个js文件），页面就可以引用了。

我为了了解html中引用jar包中的js，网上收索了很多资料，但没有解释的比较全面的。所以写一个博客来记录一下，说不定能帮上正在苦恼的人们。

 

相关文章