점진적 향상을 구현할 때 중복 코드를 방지하는 방법은 무엇입니까?

사용자가 항목 목록을 볼 수있는 PHP 웹 응용 프로그램을 실행 중입니다.점진적 향상을 구현할 때 중복 코드를 방지하는 방법은 무엇입니까?

function fireSearch(query) { 
    $.post("ajax/search.php", {q: query}, function(items) { 
     for (var i in items) { 
     $("body").append(
      "<div class='item'>"+ 
       "<img src='images/items/"+items[i]['imageName']+".png' />"+ 
       "<span class='itemDescription'>"+items[i]['text']+"</span>"+ 
      "</div>"; 
     } 
    } 
}

I : 자바 스크립트를 사용할 때

<body> 
    <?php 
     foreach($results as $item) { 
     echo "<div class='item'>". 
       "<img src='images/items/".$item['imageName'].".png' />". 
       "<span class='itemDescription'>".$item['text']."</span>". 
       "</div>"; 
     } 
    ?> 
</body>

그러나, 나는 결과를 표시하는 AJAX를 사용

베어 - 뼈 사이트는 검색 결과를 표시 할 HTML을 작성하는 PHP를 사용하여 단순히 get_item_html($item)이라는 PHP 함수를 작성하고 AJAX 요청을 통해 깨끗한 HTML을 반환하고 간단히 DOM에 배치 할 수 있습니다. 그러나 요청이 HTML의 실제 생성에 필요한 대역폭의 실제 낭비가 될 수있는 많은 결과를 반환한다면 imageName 및 text.

내가 대처해야 할 부분인가 아니면 멋진 해결책인가?

그리고이 문제는 이름이있어서 Google에 게시 할 수 있습니까?

출처

2013-02-18 Dori

템플릿이라고합니다. 일부 템플릿 형식은 서버 및 클라이언트 모두에서 사용할 수 있습니다. – Bergi

나는 ajax 함수가 json 빌드를 리턴하도록하고, 그런 다음 .append()를 크기를 줄이기위한 사용자 정의 최소화 함수로 만들 것이고 결과적으로 좀 더 깔끔한 코드를 갖게 될 것이다.

출처

2013-02-18 11:12:56 Hultin

어떻게 문제를 해결할 수 있습니까? 나는 여전히 PHP 함수와 Javascript 함수를 똑같이하고있을 것이다. – Dori

슬프게도 스레드를 잘못 읽었지만, 내 대답은 전혀 도움이되지 않는다. ~ 쓸데없는 응답을 작성했을 때 커피가 없었어요 ~ – Hultin

Bergi가 언급했듯이 템플릿을 사용하여 정보 표시를 캡슐화하고 ajax 요청에 imageName과 text 만 보냅니다.

많은 방법으로 템플릿을 구현할 수 있습니다. (handlebars.js에 대한 많은 좋은 얘기를 들었으므로 아직 시도하지 않았습니다.) 간단한 것은 ajax 요청에서받은 데이터로 HTML 마크 업을 작성하고 추가하는 것입니다. 그것은 컨테이너에, 어쩌면 당신은 나중에 적절한 templating 접근 방식으로 대체 할 수있는 간단한 함수를 사용합니다.

가 검색에 의해 생성 된 [... { "moomoo" "참고 ImageName": : : "blabla.png", "텍스트"}]

function drawItem(item) { 
    return "<div class='item'>" + 
      "<img src='images/items/"+item.imageName+"' />" + 
      "<span class='itemDescription'>"+item.text+"</span>" + 
      "</div>"; 
} 

function fireSearch(query) { 
    $.post("ajax/search.php", {q: query}, function(items) { 
     for (var i=0; i<items.length; i++) { 
      $("body").append(drawItem(items[i]); 
     } 
    }, 'json'); 
}

아약스/search.php 같은 것을 반환 .php 파일은 다음과 같습니다 :

<?php 
echo json_encode(array(
    array("imageName"=>"blabla.png", "text"=>"moomoo"), 
    array("imageName"=>"example2.png", "text"=>"second example") 
)); 

?>

출처

2013-02-18 11:38:08 cernunnos

고마워하지만 난 아직도 당신이 어떻게 PHP 스크립트와 자바 스크립트 사이에 코드를 복사하지 않아도됩니다 귀하의 답변을 이해할 수 없다 – Dori

이 경우 Javascript가 사용됩니다 JSON 인코딩 된 데이터를 반환해야하는 AJAX 요청을 서버에 보냅니다. php 스크립트에서 echo json_encode (yourarray)를 사용하십시오. 아쉽게 PHP 스 니펫으로 게시물을 편집하십시오. – cernunnos

그러나 점진적 향상을 위해 HTML을 작성하는 방법을 알기 위해 PHP가 필요합니다. clientside 스크립트와 호환되는 JSON 문자열을 작성하는 방법을 알면 충분하지 않습니다. – Dori

좋아요.

가장 좋은 해결책은 Mustache을 사용하고 일부 템플릿을 작성하고 Javascript와 PHP 모두에서 템플릿을 읽는 것입니다.

Mustache 라이브러리는 PHP 및 Javascript 구현을 제공합니다, 그래서이 걱정 :

그것을

.mustache

the library

echo

자바 스크립트에서는 mustache.js 스크립트를 추가하여 템플릿을 사용하고 페이지에서 사용되는 모든 템플릿에 템플릿 파일의 내용이 포함 된 스크립트 태그를 추가하십시오에드 :
<script id="arbitraryID" type="text/mustache">
<?php echo file_get_contents(__DIR__."/templates/myTmpl.mustache"); ?>
</script>
템플릿 (jQuery를 스타일)을 수행하여 다음 할 수 있습니다 : 오픈이 질문을 발견 한 사람이 할 수
var tmpl = $("#arbitraryID").html();

희망을 ...

출처

2013-02-19 00:17:31 Dori

점진적 향상을 구현할 때 중복 코드를 방지하는 방법은 무엇입니까?

답변

관련 문제