如何讓這段代碼更具可讀性

Question

這是php代碼的一部分，它使用contentArray，它是一個JSON，併爲用戶生成用戶界面，它生成html標籤，並且它也生成js代碼。它的工作原理，但我認爲代碼很難閱讀和維護，任何想法？謝謝。

for($i = 0; $i < count($contentArray); $i++){ 

    if($i %2 == 0){ 
     echo ("<li class='even_row'>"); 
    }else{ 
     echo ("<li class='odd_row'>"); 
    } 
    $content = $contentArray[$i];  

    echo("<textarea class='userdata' id='user_data_textarea_".$content->{'m_sId'}."'>"); 
    echo($content->{'m_sDataContent'}); 
    echo("</textarea>"); 

echo("</li>"); 

    echo("<script type='text/javascript'>"); 

    echo("$('#user_data_textarea_".$content->{'m_sId'}."').bind('keydown', function(e){"); 
    echo(" TypingHandler.handleTypingInUserDataTextArea(".$content->{'m_sId'}.", e);"); 
    echo(" });");  

    echo("</script>"); 

}    

Answer 1

首先爲您的奇數和偶數造型沒有需要的一類只使用CSS

here is info on that

然後在PHP只能隨聲附和你所需要的一行

$count = count($contentArray); 
for($i = 0; $i < $count; $i++){ 
    $content = $contentArray[$i];  
    echo('<li><textarea class="userdata" id="user_data_textarea_"'.$content->{'m_sId'}.'">'.$content->{'m_sDataContent'}.'</textarea></li>'); 
} 

並讓我們把jquery放在html頁面，遠離php

我們得到了可以通過使用陣列starts with selector

$('[id^=user_data_textarea_]').bind('keydown', function(e){ 
    var id = this.id.str_replace("user_data_textarea",""); 
    TypingHandler.handleTypingInUserDataTextArea(id, e); 
});  

Answer 2

你的「for」循環的一個提示，你應該在循環之前計算$ contentArray的計數。每次循環執行時，都必須調用該函數。

$count = count($contentArray); 

for ($i=0; $i<count; $i++) { 
// ... 
} 

Answer 3

jQuery代碼應該已經在HTML中，使用一些主選擇器而不是一個接一個的綁定元素，這對我來說沒有意義。這應該澄清你的代碼。

for($i = 0; $i < count($contentArray); $i++){ 
    $content = $contentArray[$i];  

    echo "<li class='" . (($i %2 == 0) ? "even_row" : "odd_row") . ">"; 
     echo "<textarea class='userdata' id='user_data_textarea_".$content->{'m_sId'}."'>"; 
     echo $content->{'m_sDataContent'}; 
     echo "</textarea>"; 
    echo "</li>"; 
}  

ADDED

一個通用的案例：

$(function() { 
    $('.userdata').click(function() { 
     some_function($(this).attr('id'); 
    }); 
}) 

也就是說，綁定使用類選擇和後期的使用做了一些工作的唯一標識符。

Answer 4

你可以嘗試真正的HTML：例如使用smarty

<?php 
for($i = 0; $i < count($contentArray); $i++){ 
    $rowClass = $i %2 == 0 ?'even_row' : 'odd_row'; 
?> 
    <li class='<?= $rowClass ?>'> 
     <textarea class='userdata' id='user_data_textarea_<?=$content->{'m_sId'}?>'> 
     <?= $content->{'m_sDataContent'} ?> 
     </textarea> 
    </li> 
    <script type='text/javascript'> 
    //etc... 
    </script> 
<?php } ?> 

Answer 5

獨立的內容和代碼。它需要在短期內進行一些基礎設施投資，但從長遠來看會改善維護。

反思評論，讓我們將PHP視爲一種真正的模板語言。

$contentCount = count($contentArray); 
for($i = 0; $i < $contentCount; $i++) 
{ 
    $rowType = ($i % 2) ? 'even' : 'odd'; 
    $content = $contentArray[$i]; 
    echo <<<EOT 
<li class='{$rowType}_row'> 
    <textarea class='userdata' id='user_data_textarea_{$content->m_sId}'> 
     {$content->m_sDataContent} 
    </textarea> 

</li> 
<script type="text/javascript"> 
    $('#user_data_textarea_{$content->m_sId}').bind('keydown', function(e) 
    { 
     TypingHandler.handleTypingInUserDataTextArea({$content->m_sId}, e); 
    } 
</script> 
EOT; 
} 

Answer 6

它應該看起來像這樣，爲了在IDE中更好的可讀性。

<?php 
foreach($contentArray as $content){ 
    ?> 
    <li> 
     <textarea class="userdata" id="user_data_textarea<?php echo htmlentities($content['m_sId']); ?>"> 
      <?php echo htmlspecialchars($content['m_sDataContent']); ?> 
     </textarea> 
     <script type="text/javascript"> 
      $('#user_data_textarea_<?php echo htmlspecialchars($content['m_sId']); ?>').bind('keydown',function(e){ 
       TypingHandler.handleTypingInUserDataTextArea('<?php echo htmlspecialchars($content['m_sId']); ?>',e); 
      }); 
     </script> 
    </li> 
<?php 
} 

Answer 7

您可以刪除（）從回聲陳述，他們不一定需要和可能幫助它看起來有點整潔......

Answer 8

這實際上看起來很理解我;我可以毫不費力地弄清楚你在做什麼。唯一的區別，我建議將是該行類使用ternary operators：

echo "<li class='".(($i%2 == 0) ? "even" : "odd")."_row'>"; 

...但是這只是我，有些人會發現，較爲混亂，而不是更少。我個人喜歡把它全部放在一行中。

Answer 9

Personnaly，我喜歡用printf在php中編寫html代碼。它可能看起來像：

for($i = 0; $i < count($contentArray); $i++){ 

    printf("<li class='%s'>", $i % 2 ? "odd_row" : "even_row"); 
    $content = $contentArray[$i];  

    printf("<textarea class='userdata' id='user_data_textarea_%s'>%s</textarea>", 
     $content->{'m_sId'}, 
     $content->{'m_sDataContent'}); 

    echo("</li>"); 

    echo("<script type='text/javascript'>"); 

    printf("$('#user_data_textarea_%1$s').bind('keydown', function(e){ 
     TypingHandler.handleTypingInUserDataTextArea(%1$s, e); 
     });", 
     $content->{'m_sId'});  

    echo("</script>"); 

}  

Answer 10

<?php 
    foreach($contentArray as $content){ 
     $class = ($i %2 == 0) ? "even_row": "odd_row"; ?> 
     <li class="<?php echo $class ?>"> 
      <textarea class='userdata' id='user_data_textarea_<? echo $content['m_sId'] ?>'> 
       <? php echo $content['m_sDataContent'] ?> 
      </textarea> 
     </li> 
     <script type='text/javascript'> 
      $('#user_data_textarea_<?php echo content['m_sId'] ?>').bind('keydown', function(e){ 
       TypingHandler.handleTypingInUserDataTextArea(<?php $content['m_sId'] ?>, e); 
      }); 
     </script> 
<?php } // end foreach ?> 

Answer 11

把一切都得到了每一個項目，然後在你的循環結束呼應他們。

// Put each item in the array, then echo at the end 
$items = array(); 
$js = array(); 

// I'm assuming that your content array has numeric keys 
// if not, use the for statement from your original code 
foreach ($contentArray as $i => $content) 
{ 
    // using sprintf 
    $items[] = sprintf('<li class="%s_row"><textarea class="userdata" id="user_data_textarea_%s">%s</textarea></li>' 
     , ($i % 2) ? 'even' : 'odd' 
     , $content->m_sId 
     , $content->m_sDataContent 
    ); 

    // or just plain old concatenation 
    $js[] = "$('#user_data_textarea_{$content->m_sId}').bind('keydown', function(e){TypingHandler.handleTypingInUserDataTextArea({$content->m_sId}, e);});"; 
} 

echo "<ul>" . join("\n", $items) . "</ul>\n" 
    . '<script type="text/javascript">' . join("\n", $js) . "</script>\n";