服务器端代码与客户端代码混合-最佳实践 - server side code mixed with client side code - best practices

server side code mixed with client side code - best practices

在给定的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)'data transfer'对象，由服务器端脚本填充。例如:

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。在html中使用php生成这些变量。

html和php中的例子

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

然后你可以在你的external.js

中使用BASE_URL变量

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

这是一个很多网站都在使用的简单场景。在包含外部脚本之前，在body中生成全局脚本变量

可以调用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,