服务器端代码与客户端代码混合 - 最佳实践

在给定的 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 文件中。

处理这些情况的正确方法是什么？

我们使用两种方法使客户端可以访问服务器端创建的数据：

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 相关的属性集（例如插件设置）时，第二种方法似乎最有用。