php - 创建 HTML : PHP server-side vs. jQuery 客户端

Question

<分区>

Answer 1

为什么要用 PHP 生成 HTML:

• JavaScript 应该定义行为，而不是内容。
• 在 JavaScript 中创建需要更多标记(多行字符串不像在 PHP 中那么容易)。
• 如果您的 HTML 是在多个地方(PHP 和 JS)生成的，那么维护起来会更加困难。
• 您可以使用 jQuery 的 DOM 操作函数来创建 HTML，但从长远来看，您是在自取其辱。
• 在服务器上创建 HTML 比在浏览器上创建 HTML 更快(在计算意义上)。
• 使用 PHP 循环更容易 - 生成表格标记很容易。
• 如果您在页面加载时输出标记，如果用户禁用了 JavaScript，您将保留某种可战斗性。

为什么要用 jQuery 生成 HTML:

• 您会节省一些带宽。
• 绑定(bind)事件可能更简单。

所以，我赞成第一个选项，用 PHP 生成 HTML。

---

两种方法的可视化比较，创建一个简单的表格。

选项 1，使用 PHP:

// PHP

$html = '<table>';    
foreach($data as $row) {
    $html .= '<tr>';
    $html .= '<td><a href="#" class="button">Click!</a></td>';
    $html .= '<td>'.$row['id'].'</td>';
    $html .= '<td>'.$row['name'].'</td>';
    $html .= '</tr>';
}
$html .= '</table>'; 
echo $html;
?>

// jQuery

$('#container').load('handler.php', function() {
    $('#container a.button').click(function() {
        // Do something
    });
});

 

选项2，使用jQuery:

// PHP

echo json_encode($data);

// jQuery

$.ajax({
    url: 'handler.php',
    dataType: 'json',
    success: function(data) {
        var table = $('<table />');

        var len = data.length;
        for(var i = 0; i < len; i++) {
            var row = $('<tr />');
            var a = $('<a />').attr('href', '#').addClass('button');

            row.append($('<td />').append(a));
            row.append($('<td />').html(data[i].id);
            row.append($('<td />').html(data[i].name);

            table.append(row);
        }

        table.find('.button').click(function() {
            // Do something
        });

        $('#container').html(table);
    }
});

从设计/易于编码/美观的角度来看，我肯定会说使用 PHP 方法。