1. Laravel cung cấp cho chúng ta thẻ @stack và @push

Nói về thuật ngữ này bằng văn bản thì rất khó hình dung nên mình sẽ đi qua ví dụ để các bạn thấy công dụng, từ đó có thể hiểu được nó. Chẳng hạn trong ứng dụng của bạn có rất nhiều trang con, tất cả các trang con đều được include với một file JS chung. Một số trang con đặc biệt sẽ có file JS riêng để xử lý.

Đây là cấu trúc thư mục cho ví dụ:

resources/
├── views/
|   ├── pages/
|   |   |   login.blade.php
|   |   | ...
|   |   layout.blade.php

Ở blade view layout, ta có nội dung sau:

<html>
    <head>
        <script src="main.js"></script>// File JS chung
    </head>
    </body>
        @yield('page')
    </body>
</html>

Còn blade view login thì:

@extends('layout')

@section('page')
    <form name="login">
        //
    </form>
@endsection

Bây giờ mình muốn include file JS login.js thì cách nhanh nhất là bỏ dòng code include JS vào trong section page ở blade view pages.login như thế này:

@section('page')
    <form name="login">
        //
    </form>
    
    <script src="login.js"></script>
@endsection

Cách trên thì có thể code vẫn hoạt động bình thường nhưng sẽ cảm thấy một chút gì đó rất khó chịu, có thể gây một số phiền phức sau này như không tốt cho SEO hoặc bất đồng bộ trong code Javascript.

Laravel cung cấp cho ta một giải pháp để giải quyết tình huống trên dựa vào hai thẻ @stack và @push. Bạn hãy tưởng tưởng @stack giống như một kệ sách, còn @push giống như những cuốn sách, dù bạn đặt những cuốn sách ở đâu thì sau quá trình dọn dẹp (biên dịch) thì những cuốn sách sẽ được đưa vào kệ sách.

Tức là bây giờ mình muốn đưa cuốn sách <script src="login.js"></script> vào một kệ sách nào đó trong <head> thì mình phải khai báo kệ sách đó trước đã.

<head>
    <script src="main.js"></script>// File JS chung
    
    @stack('scripts')
</head>

Như các bạn thấy mình đã khởi tạo một kệ sách với tên là scripts rồi, việc cần làm bây giờ là đưa cuốn sách <script src="login.js"></script> về kệ sách scripts thôi.

Tại blade view pages.login, mình chỉnh sửa nội dung lại như sau:

@extends('layout')

@push('scripts')
    <script src="login.js"></script>
@endpush

@section('page')
    <form name="login">
        //
    </form>
@endsection

Giờ chắc các bạn đã hiểu cách hoạt động của @stack và @push rồi đúng không nào. Ngoài ra, Laravel còn cung cấp thẻ @prepend, thẻ này giúp ta sẽ thêm cuốn sách "yêu thích" nào đó vào đầu ngăn sách.

@push('scripts')
    <script src="script_2.js"></script>
@endpush

// Later...

@prepend('scripts')
    <script src="script_1.js"></script>
@endprepend

PreviousVII. Toàn tập Blade template Laravel (ok)Next2. Service injection (ok)

Last updated 3 years ago