渲染JS与HTML代码模板及输出脚本至页脚的PHP代码处理需求

我需要实现一个可通过JavaScript渲染的HTML模板，用于完成文章标签的添加与管理功能。目前已编写了相关的HTML结构及用于输出模板脚本的PHP代码，具体内容如下：

标签添加功能的HTML结构 #

<form id="add_post">
  <div id="post-add-tag">
    <div class="input-group">
      <input type="text" id="post_tags" name="post_tags" />
      <span class="input-group-btn">
        <button id="add_tag_button" type="submit">Add</button>
      </span>
    </div>
    <ul id="tags_list"></ul>
  </div>
</form>

用于将模板脚本输出到页脚的PHP函数 #

function post_tag_template(){
?>
<script type="text/template" id="the_template">
  <li><%= tag %><button class="remove-tag">×</button></li>
</script>
<?php
}
add_action('wp_footer', 'post_tag_template');

实现方案说明 #

我来给你梳理下怎么完成这个JavaScript模板渲染的功能，这里的模板用了类似Underscore.js的模板语法（<%= %>），下面提供两种可行的实现方式：

方式一：基于Underscore.js实现（推荐）

如果你使用的是WordPress环境，可以先在主题的functions.php中引入依赖脚本：

function enqueue_tag_template_scripts() {
    // 引入Underscore库
    wp_enqueue_script('underscore');
    // 引入自定义的标签处理脚本
    wp_enqueue_script('tag-handler', get_template_directory_uri() . '/js/tag-handler.js', array('jquery', 'underscore'), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_tag_template_scripts');

然后在tag-handler.js中编写核心逻辑：

jQuery(document).ready(function($) {
    // 编译模板
    var tagTemplate = _.template($('#the_template').html());

    // 监听添加标签的表单提交事件
    $('#add_post').on('submit', function(e) {
        e.preventDefault();
        var tagInput = $('#post_tags');
        var tagText = tagInput.val().trim();
        
        if (tagText) {
            // 渲染模板并追加到标签列表
            var tagItemHtml = tagTemplate({ tag: tagText });
            $('#tags_list').append(tagItemHtml);
            // 清空输入框
            tagInput.val('');
        }
    });

    // 监听标签删除按钮的点击事件
    $('#tags_list').on('click', '.remove-tag', function() {
        $(this).parent('li').remove();
    });
});

方式二：自定义简单模板解析函数（无需额外依赖）

如果不想引入Underscore库，可以自己实现一个轻量的模板解析函数：

// 自定义模板解析函数
function parseSimpleTemplate(templateStr, data) {
    return templateStr.replace(/<%= (\w+) %>/g, function(match, key) {
        return data[key] || '';
    });
}

jQuery(document).ready(function($) {
    // 获取并预编译模板
    var templateStr = $('#the_template').html();
    var tagTemplate = function(data) {
        return parseSimpleTemplate(templateStr, data);
    };

    // 以下逻辑和方式一一致
    $('#add_post').on('submit', function(e) {
        e.preventDefault();
        var tagInput = $('#post_tags');
        var tagText = tagInput.val().trim();
        
        if (tagText) {
            var tagItemHtml = tagTemplate({ tag: tagText });
            $('#tags_list').append(tagItemHtml);
            tagInput.val('');
        }
    });

    $('#tags_list').on('click', '.remove-tag', function() {
        $(this).parent('li').remove();
    });
});

两种方式都能实现输入标签内容、点击Add按钮渲染模板添加标签项，以及点击删除按钮移除对应标签的功能。

内容的提问来源于stack exchange，提问作者John