PHP JavaScript 101.关注点分离

Question

上下文：

我在 PHP 和 Laravel 方面非常新手。

我继承了一个较旧的应用程序，在整个代码库中发生了很多有趣的事情...再加上 PHP 和 Laravel 的新手...这一切在这个阶段似乎很毛茸茸。（在 Angular 工作了大约 4/5 年，我不得不 re-learn 很多）

场景：

我们的应用程序主要针对非洲 space，并且必须运行 Opera-Mini。有人告诉我并在网上查到 opera mini 和 AJAX 根本不是朋友。（这也是我第一次接触这个平台作为第一个class公民）

我想请教一些 PHP 专家，了解一些一般做法，更具体地说 confirming/disproving 我的想法：

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

应用程序中大约 90% 的 javascript 驻留在 <script></script> 标签内的 *.blade.php 文件中，其中 blade {{ }} 绑定.

@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 和 JS...更像是，如何正确使用它们？）
- 我的直接想法是将更多的 JS 转移到他们自己的正确个文件，从而使浏览器能够缓存他们，然后有更多的客户端控制器
- 这样做显然有很多复杂性，因为内联 PHP 不能存在于 JS 文件中，因此我需要以某种形式使用 DI...，再次就是这样另一个故事。
如果以上都觉得ok。 PHP -> 内部 -> JS -> 内部 -> blade.php -> 内部 -> <script>

为什么我的 IDE 会抱怨？是否缺少 config/setting 才能使这一切正常？（我知道这听起来有多荒谬）

我已经尝试将上面的内容用文本引号括起来，虽然它确实解决了红色波浪形...这确实意味着我需要另一个级别的 parsing/decoding 来自文本 -> boolean/actual 值.

我看到了另一种绑定到 DOM 的选项。创建隐藏字段，使用 {{ }} 绑定到它们，然后使用 JS 检索字段值，但这似乎也很迂回？ (是吗)

Answer 1

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

<?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>

Boolean 只是一个数字 0 和 1，在这种情况下，如果您在引号中放入布尔值，那么浏览器会自动将 boolean 转换为数字，这样您就可以看到 var isHappen = "1"; 并且在此如果你不能像 > < 那样进行比较，但如果你只是想检查是 true 还是 false.

还是可以的

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

希望对您有所帮助，

Answer 2

混合使用 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 混合以至于难以阅读，那么绝对值得重构。但是如果代码片段很简单（就像在你的例子中），我不会在稍后再重构它

PHP JavaScript 101.关注点分离

PHP JavaScript 101. Separation of concerns

javascript

php

laravel

separation-of-concerns