前提

在开发网站时，我遇到了一个问题，这个问题与使用Javascript和PHP组合网页有关。我决定问这个问题，因为我不知道应该用什么样的术语来找到答案（如果有的话，我很怀疑）。

背景-我所拥有的

小背景可能有助于你理解我为什么要问这个问题。

我正在编制一份人员名单。管理员基本上会有一个所见即所得的编辑器，在那里他可以键入每个人的信息。请注意，所有这些人及其所有信息都可以在同一网页上看到，你没有为每个人单独的页面。

每个人都是从PHP中的MySQL数据库中检索的，并在页面上生成。属性（电子邮件、地址、姓名、角色、银行账户等）的数量有些重要。

通过单击页面上的按钮添加新人，可以将新人添加到人员列表中（此功能在Javascript中使用JQuery实现）。通过AJAX可以保存对人员的更改，而无需重定向到单独的页面。

解决问题

现在，在引擎盖之下（也就是说，在源代码中）存在着实际的问题。我提到了如何使用PHP生成人员列表，这很好。然而，因为我想使用Javascript将一个人添加到列表中，所以我必须重复大部分相同的代码，尽管与PHP中的代码略有不同。我使用JQuery提供的append方法将人员添加到人员列表中。它看起来像这样：

$('#vsrk_henkiloLaatikko_nappulaUusiHenkilo').click(function(){
    $('#vsrk_henkiloLaatikot').append(
        "<div class='vsrk_henkiloLaatikko'>"+
            "<div class='vsrk_henkiloLaatikko_kuva'>"+
                "<img src='media/img/tuntematon.png' alt='Ei kuvaa'/>"+
            "</div>"+
            "<div class='vsrk_henkiloLaatikko_tiedot'>"+
                "<h2 class='vsrk_kenttaEditoitava' contenteditable='true'>Etunimi Sukunimi</h2>"+
                "<h3 class='vsrk_kenttaEditoitava' contenteditable='true'>Henkilön rooli</h3>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true'></p>"+
                "<div></div>"+
                "<p><b>Henkilötunnus:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Osoite:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Puhelinnumero:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Sähköposti:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Tilinumero:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Seurakunta:</b></p>"+
                "<select class='vsrk_henkiloLaatikko_valintaSeurakunta vsrk_yleinen_syoteNormaali' style='width:100%'>"+
                    <?php
                        foreach($GLOBALS["paikat"] as $paikka){
                            echo
"                               '"<option>" . $paikka . "</option>'"+'n";
                        }
                    ?>
                "</select>"+
                "<div>"+
                    "<p>Käyttäjätunnus:</p>"+
                    "<input class='vsrk_yleinen_syoteNormaali' type='text' placeholder='Ei käyttäjätunnusta' style='width:100%'/>"+
                    "<p>Näkyvyys:</p>"+
                    "<select class='vsrk_yleinen_syoteNormaali vsrk_henkiloLaatikko_valintaNakyvyys' style='width:100%'>"+
                    "<option selected='selected'>Näkyvissä</option>"+
                    "<option>Piilotettu</option>"+
                    "</select>"+
                "</div>"+
                "<div>"+
                    "<input class='vsrk_yleinen_nappulaNormaali vsrk_yleinen_nappulaPurppura vsrk_henkiloLaatikko_nappulaPoistaHenkilo' style='margin:2px 0 2px 0; width:100%' type='button' value='Poista tämä henkilö' />"+
                    "<input class='vsrk_yleinen_nappulaNormaali vsrk_yleinen_nappulaPurppura vsrk_henkiloLaatikko_nappulaTallennaHenkilo' style='margin:2px 0 2px 0; width:100%' type='button' value='Tallenna henkilötiedot'/>"+
                "</div>"+
            "</div>"+
        "</div>"
    );
});

问题是，现在我必须维护Javascript和PHP以包含相同的信息。这种双重工作可能会有点烦人，尤其是如果你必须使用两种不同的语言来完成这项工作。

思考解决方案

现在，由于有点懒惰，但也很"合理"，我想到了一个解决方案：如果我可以用PHP从数据库中收集信息，形成一些有用的形式，使用Javascript获取数据，然后在客户端使用Javascript，使用我的append-方法（或类似方法）生成实际的人员列表，会怎么样。这意味着，一旦我编辑了这个"附加方法"，我不仅可以在页面加载后生成人员列表，还可以使用相同的方法向列表中添加新人员。没有额外的重复，修改人员包含的信息类型会变得更容易。

现在，终极问题

这是个好主意吗？此外，如果这是一个好主意，你会推荐什么样的存储形式，以便Javascript可以"重新排列"使用PHP检索的数据？