Question

上下文

我是非常新手的PHP＆amp; Laravel。

我继承了一个较旧的应用程序，在整个代码库中发生了很多有趣的事情......再加上PHP＆amp; Laravel ......在这个阶段，这一切看起来都很毛茸茸。（来自在Angular工作大约4/5年，我不得不重新学习很多）

情境：

我们的应用程序主要集中在非洲空间，而且还可以在Opera-Mini上运行。我被告知＆amp;在线阅读歌剧迷你＆amp; AJAX根本不是朋友。（这也是我第一次将这个平台作为一等公民参与）

我想问一些PHP专家，关于一些一般做法，更具体地证实/反驳我的想法：

我应该担心这个
尝试清理它
保持原样。

应用程序中大约90％的javascript位于*.blade.php个标记内的<script></script>个文件中，并且混合使用了刀片{{ }}绑定。

@section('scripts')
    @parent
    @if(config('my.whatever.something.isEnabled'))
        <script>
            // seems fine
            var fooText = "{{ $foo }}"

            // IDE will complain but is still "fine"
            var barBoolean = {{ config('my.whatever.something.booleanFlag') }}

            if(barBoolean) {
               console.log(fooText);

               // this seems dirty to me (within the context of this script tag)
               <?php trigger_analytics_click_event('ga_analytics_something') ?>
            }
        </script>
    @endif
@stop

用法：

@include('partials._foo',
[
   'foo' => true,
   'baz' => (config('partials.baz') - $baz->things->count())
])

问题：

通常的做法是以这种方式将这两种范式混合在一起吗？例如，JS不应该驻留在JS文件中。（我不是说不要一起使用PHP＆amp; JS ......更像是，如何才能正确使用它们？）
- 我的直接想法是将JS更多地转移到他们自己的身上正确文件，从而使浏览器能够缓存他们，然后有更多的客户端控制器
- 这样做显然有很多复杂性，因为内联PHP无法存在于JS文件中，因此我需要以某种形式使用DI ......再次说明其他故事。< / LI>
如果上述情况被视为正常。 PHP - ＆gt;里面 - ＆gt; JS - ＆gt;里面 - ＆gt; blade.php - ＆gt;里面 - ＆gt; <script>

为什么我的IDE会抱怨？有没有我想要的配置/设置使这个好吗？（我知道这听起来有多荒谬）

我尝试用文本引号包装上面的内容，虽然它确实解决了红色波形...它确实意味着我需要从文本中进行另一级解析/解码 - ＆gt;布尔值/实际值。

我见过另一种绑定到DOM的选项。创建隐藏字段，使用{{ }}绑定它们，然后使用JS检索字段值，但这似乎也是围绕着？（是吗）

Answer 1

混合PHP和JS不是一个好习惯。但它在传统的PHP应用程序中经常是不可避免的，因为您需要以某种方式将数据从PHP传递到Javascript。

使代码看起来更清晰的一种方法是将所有PHP变量包装在一个JS变量中并在JS代码中使用它。考虑一下这个例子：

在：

<script>
  // A lot of PHP inline variables. PHP & JS tightly coupled.
  func1("{{ $var1 }}");

  func2("{{ $var2 }}");

  if ("{{ $var3 }}") {
   func3();
  }
</script>

后：

<script>
  // PHP code in a single place
  var options = {
    one: "{{ $var1 }}",
    two: "{{ $var2 }}",
    three: "{{ $var3 }}"
  }; 

  // JS code without PHP-inlines 
  func1(options.one);
  func2(options.two);        
  if (options.three) {
   func3();
  }      
</script>

使用这种方法，JS代码与PHP的耦合变得更少，您甚至可以将其放在单独的.js文件中，并使用options变量作为函数参数调用它：

<强> someFunc.js

// JS code without PHP-inlines 
function someFunc(options) {
  func1(options.one);
  func2(options.two);        
  if (options.three) {
   func3();
  }
}

<强> view.blade.php ：

<script>
  // PHP code in single place
  var options = {
    one: "{{ $var1 }}",
    two: "{{ $var2 }}",
    three: "{{ $var3 }}"
  }; 

  someFunc(options);      
</script>

毕竟，这是您应该担心的代码的可读性和可维护性问题。如果某些复杂的JS代码在许多模板中重复或与PHP混合使用，以至于难以阅读，那么它绝对值得重构。但是如果代码片段很简单（就像在你的例子中那样），我就不会在以后重构它了

Answer 2

我刚做了一个快速测试，所以我根据你的问题写了一个简单的脚本

<?php
    $config = true;
?>
<script type="text/javascript">
    var isHappen = "{{($config) ?:false}}";
    //convert to boolean
    isHappen = (isHappen === "1");
    if(isHappen)
    {
        alert('ok');
    } else {
        alert('not ok');
    }
</script>

然后在浏览器

上运行时查看此源代码

<script type="text/javascript">
    var isHappen = "1";
    //convert to boolean
    isHappen = (isHappen === "1");
    if(isHappen)
    {
        alert('ok');
    } else {
        alert('not ok');
    }
</script>

布尔只是一个数字0和1，在这种情况下，如果您输入引号，布尔值会自动由浏览器转换为数字，以便您可以看到var isHappen = "1";，在这种情况下，您无法与> <进行比较，但如果您只是想检查true还是false，它仍然可以。

但是，在我看来，你应该避免在javascript中使用PHP变量，只是试着找到更好的解决方案。

希望得到这个帮助，

PHP JavaScript 101.关注点分离

2 个答案: