Как предотвратить дублирование кода при реализации прогрессивного улучшения?

Я запускаю PHP webapp, который позволяет пользователям просматривать списки элементов.Как предотвратить дублирование кода при реализации прогрессивного улучшения?

Голый костью сайт использует PHP, чтобы написать HTML, чтобы показать результаты поиска:

<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>

Однако, когда Javascript включен, я использую AJAX для отображения результатов:

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 может просто написать PHP-функцию get_item_html($item) и сделать запрос AJAX возвратом чистого HTML-кода и просто поместить его в DOM, но если запрос возвращает много результатов, которые будут реальной тратой пропускной способности, когда мне действительно нужно построить HTML-код это номер imageName и text.

Является ли это чем-то, чем я должен справиться или есть какое-то изящное решение?

И имеет ли эта проблема имя, чтобы я мог это сделать?

источник

2013-02-18 Dori

Это называется templating. Некоторые форматы шаблонов могут использоваться как на сервере, так и на стороне клиента. – Bergi

Я бы хотел, чтобы функция ajax вернула json-сборку, а затем я сделаю ваш .append() в пользовательскую минимизированную функцию, чтобы уменьшить размер, тогда в результате вы получите более чистый код.

источник

2013-02-18 11:12:56 Hultin

Как это решить проблему? У меня все еще будет функция PHP и функция Javascript, делающая то же самое. – Dori

К сожалению, я пропустил нить, и нет, мой ответ не помог бы вообще. ~ обвиняет, что у него не было кофе, когда был написан ответ ~ – Hultin

Как упоминал Берги, используйте шаблон для инкапсуляции отображения информации и отправьте только имя изображения и текст в запросах ajax.

Существует много способов реализации шаблонов (я слышал много хороших вещей о handlebars.js, havent попробовал его еще), простым было бы написать разметку html с данными, полученными по запросу ajax и добавлением это к контейнеру, возможно, используя простую функцию, которую позже вы можете заменить соответствующим шаблоном.

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 возвращает что-то вроде: [{ "ImageName": "blabla.png", "Текст": "moomoo"}, ...]

Порожденных поиска .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 и скриптами Javascript – Dori

Вы не копируете код, в этом случае используется Javascript для отправки запроса AJAX на сервер, который должен возвращать JSON-кодированные данные. Используйте echo json_encode (yourarray) в скрипте php. Ill отредактируйте сообщение с помощью php-фрагмента. – cernunnos

Но для прогрессивного улучшения мне нужен PHP, чтобы знать, как построить HTML. Знать, как построить строку JSON, совместимую с клиентским скриптом, недостаточно. – Dori

Хорошо, получилось.

Лучшее решение, которое я нашел, это использовать Mustache, написать несколько шаблонов и прочитать шаблоны как в Javascript, так и в PHP.

Mustache библиотека обеспечивает PHP и Javascript реализации, поэтому не стоит беспокоиться там:

Создать некоторые .mustache шаблоны
В PHP использовать классы и методы, предоставляемые the library для создания HTML и echo его
В Javascript используйте шаблон, добавив скрипт mustache.js, и для каждого шаблона, используемого на странице, добавьте тег скрипта с содержимым файла шаблона echo ЕД в:
<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

Как предотвратить дублирование кода при реализации прогрессивного улучшения?

ответ

Смежные вопросы