使用velocity模板使javaWeb的html+js实现模块化

页面上一些基础数据或者其他页面经常用到部分，可以独立出来做成小组件，组件预留调用入口，需要的页面直接调用即可。

如图，页面中的展示分类和搜索标签在多个页面重复使用，可以将这部分内容独立出来，做成组件，供后续开发调用：

classify_search_tag.html文件如下，其中包含HTML节点和Jquery代码；

<!--
展示分类与搜索标签组件使用说明：
    1.新增时父页面调用方法：页面加载时调用 goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一级展示分类 **/
    2.编辑时父页面调用方法：页面加载时调用 goodsClassifyAndSearchTag.getClassifyAndSearchTag(String classifys);
        ShowClassifyList类型json串，可参考 \js\standard_v2\group\group_edit.js  该方法 groupGoodsObj.getEditClassify();
    3.返回页面选中的展示分类和搜索标签，调用 goodsClassifyAndSearchTag.returnSelectedClassifyAndTag();
    注意事项：可能会出现js冲突问题，父页面的js最好在文件顶部加载
-->
<!--展示分类-->
<div class="row form-horizontal">
    <div class="col-md-12">
        <div class="form-group">
            <label class="col-md-1 control-label pr0">展示分类</label>
            <div class="col-md-1">
                <select class="form-control" id="first_classify" οnchange="goodsClassifyAndSearchTag.getSecondClassify(this)">
                    <option value="0">请选择</option>
                </select>
            </div>
            <div class="col-md-1">
                <select class="form-control" id="second_classify" οnchange="goodsClassifyAndSearchTag.getThirdClassify(this)">
                    <option value="0">请选择</option>
                </select>
            </div>
            <div class="col-md-1">
                <select class="form-control" id="third_classify" οnchange="goodsClassifyAndSearchTag.getSearchTag(this)">
                    <option value="0">请选择</option>
                </select>
            </div>
        </div>
    </div>
</div>
<!--搜索标签-->
<div class="row mb15">
    <div class="col-md-12">
        <h2><small>搜索标签：</small></h2>
    </div>
</div>
<div class="row form-horizontal" id="classify_template">
    <div class="col-md-12" name="tag_original">
        <div name="selectTagDom" id="selectTagDom"></div>
        <div name="commonTagDom" id="commonTagDom"></div>
    </div>
</div>
<!-- 展示分类模板 -->
<script id="classifyTemplate" type="text/x-jsrender">
    <option value="{
  {:id}}">{
  {:classilyName}}</option>
</script>
<!-- 普通标签模板 -->
<script id="commonTagTemplate" type="text/x-jsrender">
    <div class="form-group">
        <label class="col-md-1 control-label pr0">{
  {:optionName}}</label>
        <div class="col-md-9">
            {
  {for optionValues}}
                <label class="checkbox-inline">
                    {
  {if checked==true}}
                        <input type="checkbox" checked name='{
  {: #data.optionId}}' optionid='{
  {: #data.optionId}}' valueid='{
  {: #data.id}}'>
                    {
  {else}}
                        <input type="checkbox" name='{
  {: #data.optionId}}' optionid='{
  {: #data.optionId}}' valueid='{
  {: #data.id}}'/>
                    {
  {/if}}
                    <span>{
  {: #data.value}}</span>
                </label>
            {
  {/for}}
        </div>
    </div>
</script>
<!-- 级联标签模板 -->
<script id="selectTagTemplate" type="text/x-jsrender">
    <div class="form-group" id='label_{
  {:optionI