script.js и переменные из php
 

Если в код js необходимо вставить переменную из php скрипта, то потом этот код нельзя вынести в отдельный файл myscript.js
Как поступают в таких случаях?

я делаю так:

<script type="text/javascript">
var k1='<?=$k1?>';
var k2='<?=$k2?>';
</script>

<script type="text/javascript" src="myscript.js"></script>

И в этом myscript.js уже использую переменные k1 и k2

Но как-то я не уверен, что это правильно или оптимально. Как надо делать?

Надо делать чистый HTML без php, а все что надо - тянуть через AJAX.

Чистый html не всегда возможно написать. Например, нужно вывести таблицу, число столбцов в которой напрямую зависит от некоего условия в php скрипте.

Ну на мой взгляд надо разделять клиентскую и серверную логику и будуйщее за singlePage application. Так что на клиенте должны быть шаблоны страниц, а сервер только управляет бизнес логикой и дает данные.

Да, этот подход конечно неоспорим, когда речь идет о крупном проекте над которым работают верстальщики, дизайнеры, программеры...И каждому должно быть удобно и понятно. Но если речь идет о небольшом сайте, поддержкой которого от силы двое занимаются, то усложнять код шаблонами смысла нет, на мой субъективный взгляд.

А все-таки, как шаблоны решают задачу, когда количество столбцов таблицы зависит от условия, которое определяется на сервере в момент загрузки страницы?

Складываешь все в один большой массив-неймспейс и отдаешь клиенту одним объектом. Формально это не json, но при желании, в будущем можно вынести это в отдельный файл и дергать по науке, как json-ручку. Ну, и все под рукой: в консоли всегда можно посмотреть что пришло с сервера, просто посмотрев содержимое переменной.

<?
$json_state = Array();
$json_state['table_rows'] = 100500;
$json_state['table_cols'] = 1;
?>

<script>
var State = <?= json_encode($json_state); ?>;
</script>

Условие лишь формирует массив данных которые придут на клиент, и не важно через HTML или AJAX. А прогоняя данные через шаблон мы получаем страницу с динамическим количеством колонок и столбцов.

Пример темплейта с переменным количеством столбцов и строк на angularjs:

<table>
   <tr ng-repeat="row in rows">
      <td ng-repeat="cal in row.cals">{{ cal }}</td>
   </tr>
</table>

Декларативные — никак, их просто натравливаешь на данные и говоришь как рендерить строки и колонки, дальше они сами все делают. Императивные — чуть сложнее, проходом foreach каким-нибудь, все зависит от возможностей шаблонизатора.

Спасибо!

Никто не мешает делать так:

<!-- index.html -->
<script type="text/javascript" src="somescript.php"></script>

<?php
//somescript.php
header('Content-type: text/javascript');
$one = 1;
?>

var one = <?= $one ?>;
alert(one);