Как передать данные в js файл?

Question

[nepster-web]

Я всегда стараюсь выносить весь код js в отдельные файлы:

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

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

Ну например id какой-то записи дли изменения в js.

Тогда приходится делать что то вроде:

<script type="text/javascript">
var id = <?=$id?>
operation(id);
</script>

Хотелось бы узнать, можно ли как-то передать переменную в файл. Ну например в отдельном файле написать что то вроде:

var id = {id}

а {id} как-то заменить на нужные данные ?

Что то вроде str_replace только провернуть это с файлов js ?

Answer 1

[Виталий Архипов]

Если в lib у вас лежат библиотеки, то там код не должен быть привязан к конкретным данным, т.е. там либо список функций, либо классы.
А вот в каком месте вы их вызываете?
Ну и как вариант всегда в html передать эти данные

<input type="hidden" id="xxx" value="2" />

Answer 2

[Александр]

Я бы посмотрел на это не со стороны php, а с javascript. Пусть Ваш javascript "спрашивает" (тем же ajax'ом) у веб-сервера данные, который в свою очередь, через php-скрипт вернет ему нужные данные. Лично я юзаю ajax от jQuery, все просто, и я доволен как слон :)

Answer 3

[Дмитрий Гукетлев]

Никак, потому что статику принято отдавать не через php, а напрямую nginx'ом. Если гнать все js через php вы себе сервер просадите.

Варианты:
1) выводите в теле

<script type="text/javascript">
var id = <?=$id?>
operation(id);
</script>

В этом ничего страшного нет.

2) сделайте отдельный config.php.js который будет отдавать Json объект который будет содержать необходимое состояние\настоойки.

Comments

[aen]

Учтите, что так вы создадите глобальную переменную.

[Дмитрий Гукетлев]

Ну и что? можно создать одну глобальную переменную state или config и хранить в ней все ценное :-)

Answer 4

[Алексей Шеин]

Еще можно использовать data-атрибуты, например:

<ul class="products">
<li data-product-id="55">Toster</li>
</ul>

Из js к ним можно получить доступ с помощью функции .data:

$('.products li').on('click', function() { 
      console.log($(this).data('product-id'));  // 55
});

Answer 5

[Yuri Shikanov]

Лучше всего для этой цели подойдут кастомные meta-теги страницы. Добавляете в них нужное значение во время рендеринга и считываете затем в своем javascript коде.

Что-то вроде:
<meta name="my_id" content="123123123" />

Comments

[aen]

А почему это "лучше всего"?

[Yuri Shikanov]

@aen наиболее логичный способ, естественно, ИМХО

[aen]

@dizballanze зачем это пихать в мета-теги? Что тут логичного?

[Yuri Shikanov]

@aen "пихать", как вы выразились, в мета-теги, логично для тех случаев, когда данные не привязаны к каким-либо элементам страницы, например, чтобы передать id-сущности на странице которой мы находимся. Т.к. вся страница относится к этой сущности - удобно добавить мета-тег, а не генерировать js-код (что даже звучит не правильно).

Answer 6

[vinograd19]

Хранить данные в html верстке (hidden input value, data-аттрибуты, meta-теги, т.д.) - просто, но вам это точно надоест, когда данных станет много. Потому как html не придумывался для хранения структурированных данных.

Если у вас html создаётся каким-то шаблонизатором, можете попытаться создавать там js объект. в PHP есть функция json_encode , в python есть json.dumps, в ruby есть метод .to_json.

Если вам далее этот js объект нужно будет превращать в html, можете воспользоваться js-шаблонизаторами, например hadlebars, hogan или underscore.

Если вы в js передаёте модели из серверных MV* фреймворков, то лучшей организацией данных будет задействовать в js MV*-фреймворки, например backbone, angular, ember, т.д.