javascript - PHP JavaScript 101. 关注点分离

Question

上下文:

我在 PHP 和 Laravel 方面是个新手。

我继承了一个旧的应用程序，在整个代码库中发生了很多有趣的事情...再加上对 PHP 和 Laravel 是新手...在这个阶段，这一切似乎都非常棘手。 (在 Angular 工作了大约 4/5 年之后，我必须重新学习很多东西)

场景:

我们的应用程序主要针对非洲地区，并且必须在 Opera-Mini 上运行。我在网上被告知并读到 Opera Mini 和 AJAX 根本不是 friend 。 (这也是我第一次以一等公民的身份拥有这个平台)

我想向一些 PHP 专家询问一些一般做法，并更具体地确认/反驳我的想法:

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

应用程序中大约 90% 的 javascript 驻留在 *.blade.php <script></script> 内的文件标签，带 Blade {{ }}绑定(bind)混合在一起。

@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())
])

问题:

1. 以这种方式将这两种范式混合到这种程度是常见的做法吗？例如，JS 不应该驻留在 JS 文件中。 (我并不是说不要一起使用 PHP 和 JS...更像是，如何正确使用它们？)

   • 我的直接想法是将更多的 JS 转变为自己的 正确文件，从而使浏览器能够缓存 他们，然后有更多的客户端 Controller 之类的
   • 这样做显然有很多复杂性，因为内联 PHP 不能存在于 JS 文件中，因此我需要以某种形式使用 DI...，这又是一个完全不同的故事了。

2. 如果以上都可以。 PHP -> 里面 -> JS -> 里面 -> blade.php -> 里面 -> <script>

   为什么我的 IDE 会提示？我是否缺少一个配置/设置来使其正常？ (我知道这听起来多么荒谬)

我尝试将上述内容用文本引号括起来，虽然它确实解决了红色波形曲线...这确实意味着我需要从文本 -> bool 值/实际值进行另一级别的解析/解码。

我看到了另一种绑定(bind)到 DOM 的选项。创建隐藏字段，并使用 {{ }} 绑定(bind)到它们，然后使用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 混合，导致难以阅读，那么它绝对值得重构。但是，如果代码片段很简单(就像您的示例中一样)，我直到稍后才会重构它