серверный код, смешанный с кодом на стороне клиента – лучшие практики

Внутри данного PHP-скрипта у меня есть следующее:

<script> function showMember() { return $.ajax({ //Perform an asynchronous HTTP (Ajax) request. type: 'get', //A string containing the URL to which the request is sent. url: '<?php echo $this->createUrl('member'); ?>', ... 

Это работает, если я помещаю это внутри php-файла.

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

Каков надлежащий способ справиться с этими сценариями?

Related of "серверный код, смешанный с кодом на стороне клиента – лучшие практики"

Мы используем два подхода для создания данных на стороне сервера, доступных на стороне клиента:

1) объект передачи данных, заполненный серверными сценариями. Например:

PHP:

 <?php $data = [ 'urls' => [ 'createSomething' => $this->createUrl($from, $something), // ... ], 'labels' => [ 'createSomething' => $this->cms($labelName), // .. ], ] ?> <script> var dto = <?= json_encode($data) ?>; </script> 

JS:

 $.ajax(dto.urls.createSomething, {}, function() { alert(dto.labels.createSomethingSuccess); } 

2) атрибуты набора данных, снова заполненные сервером. Например:

PHP:

 <button data-target-url="<?= $this->createUrl($from, $something) ?>" >Something</button> 

JS:

 $('button[data-target-url]').click(function() { var targetUrl = $(this).data('targetUrl'); $.post(targetUrl...); } 

Второй подход, по моему мнению, наиболее полезен, когда есть некоторый набор атрибутов, связанных с UI, которые все еще вычисляются на стороне сервера – например, настройки плагина.

Лучше всего разделить свой код php и javascript. То, что вы можете создать, является базовым URL-адресом, поэтому javascript может генерировать собственные URL-адреса. Создайте эти переменные с помощью php в html.

Пример в html и php

 <html> <head> <script> var BASE_URL = <?=$baseUrl?>; </script> <script src="external.js"></script> </head> <body> </body> </html> 

Затем вы можете использовать переменную BASE_URL в вашем external.js

 function showMember() { return $.ajax({ //Perform an asynchronous HTTP (Ajax) request. type: 'get', //A string containing the URL to which the request is sent. url: BASE_URL + "member", 

Это простой сценарий, который использует множество веб-сайтов. Генерируйте глобальные переменные скрипта в теле, прежде чем включать внешние скрипты.

Вы можете вызвать функцию javascript и отправить URL-адрес в качестве параметра функции.

 showMember(<?php echo $this->createUrl('member'); ?>); 

В js поймать и использовать его.

 function showMember(posturl) { return $.ajax({ //Perform an asynchronous HTTP (Ajax) request. type: 'get', //A string containing the URL to which the request is sent. url: posturl,