避免 php 和 javascript 之间的重复代码答案

【问题标题】：Avoiding duplicate code between php and javascript避免 php 和 javascript 之间的重复代码
【发布时间】：2011-04-03 22:53:37
【问题描述】：

我有一个 php 页面，上面有一个用于将人员添加到小组的表单。

对于每个被添加的人，都有一个带有多个表单元素的表单元素，每个元素都根据人的编号命名。例如：

<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>

对于数据库中的每个人，php 页面都会填充一个表单部分。

要添加其他人，用户可以单击“+”图标，此时页面使用 jQuery 动态填充新的 .为此，我只是将新的 div html 附加到现有表单中。这意味着 javascript 页面包含所有与 php 页面相同的 html 标记（待附加）。

这似乎是不必要的代码重复。每当我在 php 页面中更改某些内容时，我也必须在 javascript 代码中进行更改。

有没有什么通用的方法可以避免这种代码重复？我唯一能想到的是使用 jQuery 从已经存在的 div 中获取 html。但是在这种情况下，用户 n 的表单字段的值将出现在用户 n+1 的新代码中。

谢谢。

【问题讨论】：

js是client端，可以关掉，所以不能依赖，php是server端，可以依赖。
@Dagon -- 我们决定使用这个应用程序在用户端需要 javascript。当然，我仍在验证服务器端的所有输入等。

标签： php javascript code-duplication

【解决方案1】：

卡皮西:)？

<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>

<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>

现在添加另一个字段时...

<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>

然后你遍历$_POST[] 做你想做的事。

你在 .user 上有用户 ID，所以我删除用户你可以删除 HTML 的那部分（这更适用于 UX），更重要的是，你没有数百个变量，只有几个数组，你可以在一个循环中迭代。希望你明白这一点。干杯。

【讨论】：

Grazie webarto。卡皮斯科。使用数组是循环 $_POST 值的一种更简洁的方法。现在我只是使用动态变量名称来循环名称。 ${"LastName".$i} 等
但我现在主要想避免的是，必须在 javacript 中从我的 php 页面复制所有表单 html。 php 循环遍历所有现有记录，输出完整的表单字段。当用户想添加另一个人时，js插入相同的html。所以html写在两个地方——php循环和js。我想避免这种重复。谢谢！
您正在构建某种私人应用程序吗？你能发布整个 .class div，所以我可以给你更好的答案。我需要知道你在使用什么元素。

【解决方案2】：

php 代码应该为 javascript 提供一个“原型”，可以使用 javascript 对其进行修改。这样，即使没有任何用户，javascript 仍然可以工作。这个例子显然缺少很多代码（比如表单），但它应该给你一个想法。我没有测试它，因为我认为无论如何你都必须进行大量修改。

 <script type="application/x-javascript">
  addEventListener("load",function(){
   document.getElementById("add-user").addEventListener("click",function(){
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
    document.getElementById("user-list").appendChild(node);
    node.id="users_"+(n+1);
    for(var i=0;i<list.length;++i)
     list[i].name&&(list[i].name+="["+n+"]");
   },false);
  },false);
 </script>
</head>
<body>
 <div id="prototype-container">
  <? /* print out a div without any information in it */ ?>
 </div>
 <div id="user-list">
  <? /* print out divs with some infomation in them */ ?>
 </div>
 <button id="add-user">add a user</button>

【讨论】：

感谢您的建议。我想过做这样的事情，但我看到实现它的唯一方法就是在 php.ini 中复制我的代码。在 php 中，我有一个循环，它从 db 条目中填充该用户 div。然后我需要将“空”/未填充的 div 结构放在同一个 php 页面中。有没有一种干净的方法可以只在 php 中编写一次 div 结构，然后将其填充到 db 循环中并从 js 中获取它？对不起，如果这太笼统了。 . .
我最终使用了这种方法的修改。我创建了一个函数来输出 div 内容，它采用了一个用于填充 div 的值数组。我使用此功能回显了所有 div，包括一个“空白/模板”div。 div的html只写一次——在函数中——然后js就可以从空白div中拉出来了。