在开发网站时，我遇到了一个问题，该问题与使用 Javascript 和 PHP 组建网页有关。我决定问这个问题，因为我不知道用什么样的术语来找到答案（如果有的话，我对此表示怀疑）。
小背景可能会帮助您理解我提出这个问题的原因。
我正在制作一份人员名单。管理员基本上会有一个WYSIWYG（所见即所得）编辑器，他可以在其中输入有关每个人的信息。请注意，所有这些人及其所有信息都显示在同一网页上，您没有为每个人创建单独的页面。
每个人都从 PHP 中的 MySQL 数据库中检索并在页面上生成。属性（电子邮件，地址，姓名，角色，银行帐户等）的数量有些重要。
通过单击页面上的添加新人按钮，可以将新人添加到人员列表中（此功能在Javascript中使用JQuery实现）。通过 AJAX 可以保存对人的更改，而无需重定向到单独的页面。
现在，引擎盖下（即源代码中）存在实际问题。我提到了如何使用PHP生成人员列表，这很好。但是，因为我想使用Javascript将一个人添加到列表中，所以我必须重复大部分相同的代码，尽管有一点点变化，就像在PHP中一样。我利用追加 -method JQuery提供的方法将人员添加到人员列表中。它看起来像这样：
$('#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客户端使用我的追加 -method（或其他类似的东西）生成实际人员列表。这意味着一旦我编辑了这个“append-method”，我不仅可以在页面加载后生成人员列表，还可以使用相同的方法将新人添加到列表中。没有额外的重复，并且修改人员所包含的信息类型会变得更容易。
......这是个好主意吗？另外，你会推荐什么样的存储形式，以便Javascript可以“重新排列”使用PHP检索的数据，如果这是一个好主意？
答案 0 :(得分：3)
简短的回答是肯定的。
答案很长，你所谈论的内容实际上是将你的观点与模型分开。当您这样做时，您不需要使用相同的编程语言来检索和组织数据并呈现它。
通常会说＆＃34;有用的形式＆＃34;你指的是为了组织数据并使其可用，Javascript将是XML或JSon。因为JSon基于Javascript，所以我倾向于使用它。
除了JQuery之外，还有一些正在使用的Javascript框架，例如AngularJS和Ember。它们用于相同的目的，但专门设计为前端流体编程语言。较大的公司往往倾向于使用这些语言，并且它们往往可以很好地扩展。
无论您使用什么来呈现数据，关键是它必须适用于您的项目。 JQuery甚至vanilla Javascript都可以完成简单的工作，例如解析JSon，当你分离项目层时，你将能够更好地利用正确的工具来完成工作，而不是一直坚持使用PHP。