视图或模板文件中的 JavaScript 代码答案

【问题标题】：JavaScript code in view or template files视图或模板文件中的 JavaScript 代码
【发布时间】：2020-04-15 11:03:09
【问题描述】：

我有一个关于在任何 CMS 或框架视图/模板文件中编写小块 JavaScript 代码的问题。即 WordPress 模板文件或 Laravel 刀片文件

以 Laravel 的刀片文件为例。

我正在view1.blade.php & view2.blade.php 中编写小的 JS 块

更具体地说是包装在 DOM 就绪事件侦听器中的 jQuery 代码：

jQuery(document).ready(function($) {

    some_func($);

});

function some_func($) {

    $('body').addClass('some-class');

}

我知道正确的方法应该是将所有 JS 代码添加到外部 JS 文件中。即scripts.js

但另一种方式对我来说更方便。

我的问题是它会影响网站性能吗？我没有看到这种情况发生，因为我在视图中的所有 JS 代码都包装在一个 DOM 就绪事件侦听器中。它也不会阻塞 DOM 渲染。谢谢

【问题讨论】：

对网站性能的影响很小。更大的影响将是使用的带宽，因为在项目中传播你的 JS 代码将意味着它不能被缩小，或者容易地缓存在单个 URL 中，但这也是最小的。更大的问题只是可维护性。您应该遵循关注点分离原则，这样您或任何不幸在您之后从事该项目的人都知道所有相关代码的确切位置，以及需要更改的内容，并且不会浪费时间搜索它。您现在使用的模式在任何团队项目中都是不可接受的。
没错。这就是我在视图/模板文件中编写小型 JS 代码的原因。另一个原因是我将视图/模板/部分文件分解为易于理解的文件夹。当然，如果 JS 代码比我将它们放在外部 JS 文件中更大。

【解决方案1】：

将@stack('scripts') 添加到您的通用模板中。类似于主模板布局。

要将代码推入其中，请使用：

@push('scripts')
<script>Your code</script>
@endpush

另一种方法是 @yield('script') 在通用模板中，您希望在其中包含脚本并在单个刀片上添加代码：

@section('script')
<script>Your code</script>
@endsection

【讨论】：