如何通过PHP和JS重用相同的混合代码段？最佳实践？

问题描述

我才刚刚开始学习JavaScript和PHP，并且遇到了这个看似简单的问题-如何编写可重复使用的HTML代码段，以便它们可同时用于JS和PHP？

这是一个案例-我有一个简单的.PHP 页面，如下所示：

<body> <?PHP

    foreach( $members_array as $member ) {

        $id = $member->id;
        $name = $member->name;
        $img = $member->get_img();

        include( 'single-member.PHP' );
    }

    foreach( $other_members_array as $member ) {

        $id = $member->id;
        $name = $member->name; ?>

        <button type="button" onclick="addExtraMember" data-user-id="<?= $id? >">ADD <?= $name ?></button> <?PHP

    }

</body>

对于数组中的每个成员，将使用变量动态生成 HTML代码。 “ single-member.PHP”是这样的：

<div id="<?= $id ?>">
    <img src="<?= $img ?>">
    <p><?= $name ?></p>
</div>

然后在页面加载完成时列出所有成员。页面的用户可以单击$ other_members_array按钮之一，该按钮调用JavaScript函数。此JavaScript函数应在最后一个“ single-member.PHP”元素之后添加与“ single-member.PHP”相同的代码，以保持视觉一致性，以防万一我需要更改代码段的结构和样式，这仅是一个文件。我今天整个下午都在搜寻Google，这是我的基本解决方案：

将文件重命名为.html，然后load（）并替换JS中的属性和文本字段

PHP

页面

包括一个额外的'single-member.PHP'，具有空值，唯一ID和不显示它，因此JS可以从HTML DOM中获取它以供重用（以防$ members_array为空）
不要通过PHP加载成员，当页面使用重新设计的“ single-member.html”片段（不含PHP变量）完成加载后，将所有成员都添加到JS中。因此，当按下按钮时，JS函数可以再次使用'single-member.html'

我觉得这是一个普遍的问题-在JS和PHP之间重用元素和代码片段，所以我想知道最佳实践是什么？

我还缺少一些更优雅的库或解决方案吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript jquery reusability