3

我有一个使用 Listener 类的 php 应用程序，它基本上只是用 jquery 设置了一个 ajax 请求（下面的示例）。但出于某种原因，呼应 javascript 似乎并不优雅。更好的做法是为要传递的 javascript 构建一个单例类（这可能会引入耦合）还是像我现在正在做的那样回显脚本？

这是我正在做的代码片段。

<?php

        $script = "
                    <script>
                    $(document).ready(function(){
                        $('".$trigger."').".$action."(function() {
                        ".$js_variables."
                            var ajax_load = '';
                            var loadUrl = '".$this->controller_path."';
                            var action = $(this).attr('id');

                            $('".$this->parent."')
                            .hide(2)
                            .html(ajax_load)  
                            .load(loadUrl, {action: action, ".$post_mapper."})
                            .fadeIn(800);
                        });
                    });
                </script>
        ";

      echo $script;

?>

编辑：使用单例类也将允许我只使用一次$(document).ready()或快捷方式版本$(function(){})，而不是每次添加侦听器时。但我不确定这是否值得额外的时间和精力......有什么想法吗？

4

4 回答 4

8

用 php 回显 JavaScript 是不好的做法吗？

一般：是

从 php 中回显 JavaScript 是一种常见的做法，但我强烈反对这样做。

在大多数情况下，您可以通过遵循前端 MVC 结构来避免混合语言：

HTML 属于.html* 文件。就是模型。
CSS 属于.css文件。是景色。
JS 属于.js文件。是控制器。

我发现实际上需要从服务器端语言生成 JavaScript 的情况非常少见。大多数时候，我真正需要的是传递 JavaScript 可以使用的信息。

而不是试图输出：

<a href="#" id="foo">bar</a>
<script>
    $('#foo').click(function () {
        $.ajax('http://example.com')...
        return false;
    });
</script>

对于每个链接，尝试使用原生 HTML 属性来完成大部分繁重的工作：

<a href="http://example.com/" class="ajax-link">bar</a>

在你的脚本中你可以有：

$(document).on('click', '.ajax-link', function () {
    $.ajax($(this).attr('href'))...
    return false;
});

委托函数只需绑定一次，可以从静态 JS 文件中完成，无需尝试将 JS 注入 PHP 代码。

如果您需要传递的更多信息，请结合使用data-*属性.data(...)。

* 或.php用于模板的任何其他服务器端语言。

从服务器回显客户端代码是有特殊原因的。一个示例是为 JSONP API 生成 JSON，您需要在其中动态生成回调。

如果你没有充分的理由使用服务器端语言生成 JS，那就不要。

于 2012-06-08T18:59:42.463 回答
1

嗯，这都是偏好......我通常会这样做，这样我的文本编辑器就能够确定什么是 javascript 和什么是 PHP，这样它就不会让我的眼睛流血，试图查看非代码颜色的文本。

<script>
    $(document).ready(function(){
        $('<?php echo $trigger ?>').<? echo $action ?>(function() {
            <?php echo $js_variables ?>
            var ajax_load = '';
            var loadUrl = '<?php echo $this->controller_path ?>';
            var action = $(this).attr('id');

            $('<?php echo $this->parent ?>')
                .hide(2)
                .html(ajax_load)  
                .load(loadUrl, {action: action, <?php echo $post_mapper ?>})
                .fadeIn(800);
            });
    });
</script>
于 2012-06-08T18:47:35.987 回答
1

一如既往，这取决于。如果您正在编写一个小型应用程序，这种混合物不会伤害您。当应用程序增长到一定大小时，我个人觉得更容易维护，因为我不在一个文件中混合语言。

历史告诉我们前端不要在一个文件中混合 HTML、JavaScript 和 CSS。最好将它们分开，否则当您尝试跟踪错误时很难找到合适的位置。混合使用 JavaScript 和服务器端语言也好不到哪里去。我仍然想到一些我觉得没问题的事情。例如，需要具有动态值的配置或本地化文件。

在您的示例中，我宁愿将其分开。您所做的一切都可以通过 HTML 元素上的（数据）属性和一些 DOM 查找来完美完成。您似乎还需要为您的视图收集一些信息，以便更好地存储在 HTML 中。例如：$action这可以从一个形式相当简单地推导出来：

HTML

<from method="POST" action="/you-name-it">
  ...
</form>

JS

$(function(){
    var form = $('form');
    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
});

提交此确切表单的逻辑可以是 JavaScript 和/或 PHP。他们如何沟通并不重要。

于 2012-06-08T19:07:13.523 回答
1

这是完全可以接受的，但有点冒险——您正在动态生成部分 JS，这意味着您必须生成VALID JS 代码，否则整个代码块将被语法错误杀死。

例如，如果您使用 PHP 在 JS 代码块中插入 PHP 变量的值，例如：

<script type="text/javascript">
var last_name = '<?php echo $last_name ?>';
</script>

并且 $last_name 恰好是O'Brien，您现在引入了语法错误，因为生成的代码将是：

var last_name = 'O'Brien';
                ^^^--- string with contents O
                   ^^^^^--- unknown/undefined variable Brien
                  ^^--string followed by variable, but no operator present.
                        ^--- start of a new unterminated string containing a ;

每当您将基于 PHP 的原始数据插入到 Javascript 变量中时，您基本上必须使用json_encode()，这可以保证生成的 JS 数据是语法上有效的 JS 代码：

var last_name = <?php echo $last_name ?>;

请注意，我没有'在这个版本中添加任何内容 - json_encode 会为您处理这些。

于 2012-06-08T19:15:04.793 回答