java EE js css 加载及版本集中管理器

网站中大部分js css有重复的引用代码，生产环境中需要对新的js css版本做更新，此管理器实现了

1. js css 引用统一配置

2. 可方便地更新版本号

3. 引用路径支持相对路径、单一绝对路径、多域名绝对路径、是否使用.min格式

一、自定义控件

public class JavascriptLoader extends BodyTagSupport {

private static final long serialVersionUID = 1L;

/**
* 控件参数1：用于匹配xxxLoader.xml中的定义
*/
private String pageName;
/**
* 控件参数2：用于指定处理类型：js css
*/
private String fileType = "js";

// 以下变量会有变化，用于适用css js不同的处理类型 begin
private  String loaderXmlPathDef = "/WEB-INF/JavascriptLoader.xml";// xxxLoader.xml具体文件名
private String urlAttr = "src";
private String fullUrl1 = "<script type='text/javascript' src=\"{1}/{0}\"></script>";
private String fullUrl2 = "<script type='text/javascript' src=\"{0}{1}\"></script>";
private String fullUrl3 = "<script type='text/javascript' src=\"{1}/{0}\"></script>";
private String fullUrl4 = "<script type='text/javascript' src=\"{0}\"></script>";
private String jsRoot = "/" + fileType;// js文件所属目录，开头加/
private String minFileRoot = fileType + "/min";// js压缩后文件所属目录，开头不加/
private String minFileName = "{0}_min_{1}." + fileType;// outputType=3时生成压缩文件名
private String minFileString = "{0}/{1}/{2}_min_{3}." + fileType;// outputType=3时生成压缩文件完整路径，存放在minFileRoot对应目录下
private String tempFileString = "{0}/{1}/{2}_temp_{3}." + fileType;// outputType=3时生成临时合并文件文件格式，存放在minFileRoot对应目录下
private String deletedFilePattern = "{0}_min_\\d+." + fileType;// 需清除的旧的合并压缩文件的匹配正则表达式
private String commonEle = "script";

// end

public JavascriptLoader() {
}

/**
* 当前是否JS处理模式
*
* @return
*/
private boolean forJS() {

return (fileType == null || fileType.length() == 0 || fileType .equals( "js"));
}

@Override
public int doEndTag() throws JspException {

return super.doEndTag();
}

@Override
public int doStartTag() throws JspException {

// 如果fileType为空，则默认当前为JS输出模式，否则为CSS输出模式
if (!forJS()) {

loaderXmlPathDef = "/WEB-INF/CSSLoader.xml";
urlAttr = "href";
fullUrl1 = "<link href=\"{1}/{0}\" rel='stylesheet' type='text/css' />";
fullUrl2 = "<link href=\"{0}{1}\" rel='stylesheet' type='text/css' />";
fullUrl3 = "<link href=\"{1}/{0}\" rel='stylesheet' type='text/css' />";
fullUrl4 = "<link href=\"{0}\" rel='stylesheet' type='text/css' />";
jsRoot = "/" + fileType;
minFileRoot = fileType + "/min";
minFileName = "{0}_min_{1}." + fileType;
minFileString = "{0}/{1}/{2}_min_{3}." + fileType;
tempFileString = "{0}/{1}/{2}_temp_{3}." + fileType;
deletedFilePattern = "{0}_min_\\d+." + fileType;
commonEle = "link";
}

// web根目录的资源管理器路径
String dirPath = this.pageContext.getServletContext().getRealPath("/");
// web根目录的站点根路径
String urlPath = this.pageContext.getServletContext().getContextPath();
// 配置文件位置
String loaderXmlPath = dirPath + loaderXmlPathDef;// getClass().getClassLoader().getResource("JavascriptLoader.xml").getPath();

// 读取web.xml中的MergeAndCompress，判断是否所有资源按outputType=1的形式输出
String mergeAndCompress = this.pageContext.getServletContext()
.getInitParameter("MergeAndCompress");
String useMinJsCss = this.pageContext.getServletContext()
.getInitParameter("UseMinJsCss");
// 配置文件读取，所有CSS JS各一个文件

Document doc = LoaderTagSupport.getMessage(loaderXmlPath, fileType);
Element root = XmlParser.getRootNode(doc);
// 读取common节点
java.util.List<Element> commonList = XmlParser.getChildElements(root,
"common/" + commonEle);

Map<String, CommonScript> commonMap = new HashMap<String, CommonScript>();
if (commonList != null) {
for (Element common : commonList) {
Attribute outputTypeAttr = XmlParser.getAttribute(common,
"outputType");
String name = XmlParser.getAttribute(common, "name").getText();
commonMap.put(
name,
new CommonScript(name, XmlParser.getAttribute(common,
urlAttr).getText(),
outputTypeAttr == null ? null : outputTypeAttr
.getText()));

}
}

// 读取server节点
java.util.List<Element> serverEleList = XmlParser.getChildElements(
root, "servers/server");
List<String> serverList = new ArrayList<String>();
if (serverEleList != null) {
for (Element server : serverEleList) {
serverList.add(server.getText());
}
}
// 读配置文件对应page节点
Element page =(Element)  XmlParser.getSingleNode(root, "page[@name='"
+ pageName + "']");
// page节点的所有子集，对于JS对于script节点，对于css对于link节点
List<Element> srcriptList  =null;
if(page!=null)
srcriptList = XmlParser.getChildList(page);
else {
srcriptList=new ArrayList<Element>();
}
// 判断outputType，根据outputType存入不同集合
List<String> outTypeList1 = new ArrayList<String>();
List<String> outTypeList2 = new ArrayList<String>();
List<String> outTypeList3 = new ArrayList<String>();

//加入group公共组，开始
//由于group功能是后期加入的，不想对javascriptloader.xml做大修改，所以暂时只对cssloader.xml有效
if(!forJS()){
Element groups = XmlParser.getChild(root,"groups");
List<Element> groupList = XmlParser.getChildList(groups);
@SuppressWarnings("unchecked")

//取出page的groupid
org.dom4j.Attribute groupid = XmlParser.getAttribute(page, "groupid");
if(groups!=null  && groupList.size() >0  ){
//未配置groupid，使用默认group或第一个group
if(groupid==null   ){
Element defaultEle  = (Element) XmlParser.getSingleNode(groups,"group[@default='true']");
if(defaultEle==null  )
defaultEle =  groupList.get(0);
srcriptList.addAll(0,XmlParser.getChildList(defaultEle));
}
else{
//已配置groupid，则找到对应group加入到scriptlist
Element groupEle  = (Element) XmlParser.getSingleNode(groups,"group[@id='"+ groupid.getText() +"']");
if(groupEle!=null)
srcriptList.addAll(0,XmlParser.getChildList(groupEle));
}
}
}
//加入group公共组，结束

// 当前page的所有script
for (Element script : srcriptList) {

org.dom4j.Attribute outputType = XmlParser.getAttribute(script,
"outputType");
String curOutputType = outputType==null?null:outputType.getText();
// 判断script是否存在ref
org.dom4j.Attribute ref = XmlParser.getAttribute(script, "ref");
// 存在ref
String src;
if (ref != null) {
CommonScript commonScript = commonMap.get(ref.getText());
src = commonScript.getSrc();
if(curOutputType==null && commonScript.getOutputType()!=null)
curOutputType = commonScript.getOutputType();
} else {
src = XmlParser.getAttribute(script, urlAttr).getText();
}
if(!StringHelp.IsNullOrEmpty(useMinJsCss) &&  useMinJsCss.equals("true") &&  !StringHelp.IsNullOrEmpty(src) && !src.startsWith("http") && !src.contains(".min")){
src = src.replace("."+fileType, ".min."+fileType );
}
// 按照xml的outputtype指定输出，用于生产环境
if (mergeAndCompress.equals("true")) {
// 如果未指定outputtype，则默认outputtype=2
if (curOutputType == null) {
outTypeList2.add(src);
} else {
switch (curOutputType) {
case "1":
outTypeList1.add(src);
break;
case "2":
outTypeList2.add(src);
break;
case "3":
outTypeList3.add(src);
break;
}
}

} else {
// 不按照xml指定的outputtype输出，而是全部原样输出，用于测试环境
outTypeList1.add(src);
}
}

// outputType=1的处理，原样输出
for (String src : outTypeList1) {
// Long lastModified = LoaderTagSupport.getLastModified(src);
if (src == null)
continue;
String scriptString = src.startsWith("http") ? MessageFormat
.format(fullUrl4, src) : MessageFormat.format(fullUrl1,
src, urlPath);
try {
this.pageContext.getOut().println(scriptString);
} catch (IOException e) {

e.printStackTrace();
}
}
// outputType=2的处理，每个js随机服务器地址输出
for (String src : outTypeList2) {
// Long lastModified = LoaderTagSupport.getLastModified(src);
String scriptString = MessageFormat.format(fullUrl2,
LoaderTagSupport.RandomJSAbsoluteUrl(serverList), src);
try {
this.pageContext.getOut().println(scriptString);
} catch (IOException e) {

e.printStackTrace();
}
}
// outputType=3的处理  基本没用过，略

return super.doStartTag();
}

/**
* 指定页面代号以获取相关配置
*
* @return
*/
public String getPageName() {
return pageName;
}

public void setPageName(String pageName) {
this.pageName = pageName;
}

public String getFileType() {
return fileType;
}

public void setFileType(String fileType) {
this.fileType = fileType;
}

}

二、jsp引用js配置文件

<?xml version="1.0" encoding="UTF-8"?>
<root>

<!-- 定义随机地址列表，也可删除，只有 MergeAndCompress=true 且 outputType=2时才会起作用 -->
<servers>
<server>http://js1.domain.com/</server>
<server>http://js2.domain.com/</server>
<server>http://js3.domain.com/</server>
</servers>

<common>

<script src="js/JsRender.js" name="jsrender"></script>
<script src="js/jquery-1.10.2.min.js" name="jquery"></script>
<script src="js/jquery.validate.1.14.001.js" name="jqvalidate"></script>
<script src="js/selectArea.js?v=0004" name="selectArea"></script>
<script src="js/mobileBUGFix.mini.js" name="mobilebf"></script>
<script src="js/jquery.blockUI.js" name="blockui"></script>
</common>

<!-- 注意， 不指定 outputType,则等效于 outputType=2，所以一般都不需指定 -->

<page name="demo_beginform">

<script ref="jquery"></script>
<script ref="jqvalidate"></script>
<script ref="jsrender"></script>
<script src="js/selectArea.js?v=0003"></script>
<script ref="mobilebf"></script>
<script src="js/qst.js"></script>
<script src="js/uploadImg.js"></script>
<script ref="blockui"></script>

</page>

<page name="test">
<script ref="jquery"></script>
<script ref="jsrender"></script>
<script src="js/selectArea.js?v=20160105"></script>
<script ref="jweixin"></script>
<script ref="wxsdk"></script>
</page>
<!-- 测试 end -->

</root>

三、 jsp引用css配置文件

<?xml version="1.0" encoding="UTF-8"?>
<root>

<servers>

<server>http://css1.domain.com/</server>
<server>http://css2.domain.com/</server>
<server>http://css3.domain.com/</server>

</servers>

<common>
<link href="css/citycss.css?v=0015" name="citycss" />
<link href="css/base.css?v=0015" type="text/css" name="mt_base" />
</common>

<!-- 会默认为每个jsp添加的css引用，默认为page加载第一个或default="true"的group 。可以在 page 节点指定 groupid="1"匹配对应group，或指定
groupid="none"不加载group，未匹配page节点的jsp页，也会加载 group[@default="true"]
-->
<groups>
<group default="true" id="1">
<link ref="mt_base" />
<link ref="citycss" />
</group>

</groups>

<page name="test">
<link href="css/wap_indexokwei.css?v=20160105" />
</page>

</root>

四、jsp中加入相关代码

<custom:JsLoaderTag pageName="beginform"></custom:JsLoaderTag>

<custom:JsLoaderTag pageName="beginform" fileType="css"></custom:JsLoaderTag>

五、效果