Xin lưu ý rằng bài đăng này hiện đã được 3 tuổi. Như bạn đã biết, mọi thứ diễn ra nhanh chóng trong thế giới công nghệ và sự kiện của chúng ta mặc dù các nguyên tắc được mô tả trong bài đăng này vẫn còn hiệu lực, nhưng có thể có những cách tốt hơn để đạt được kết quả tương tự;
Ngoài ra, Laravel 8 mang đến một bộ khởi động mới để nhanh chóng xây dựng giao diện người dùng cho dự án tiếp theo của bạn. Nó được gọi là Laravel Jetstream và rất đáng để xem qua. Tôi sẽ chọn Laravel Jetstream với giàn giáo Inertia cho dự án tiếp theo của mình
Do đó, tôi đang xóa kho lưu trữ mã ban đầu đi kèm với bài đăng này
bài gốc
Bài đăng này là phần đầu tiên của loạt bài lớn hơn về cách thêm Javascript vào dự án Laravel. Nếu chưa, tôi thực sự khuyến khích bạn bắt đầu với bài đăng tổng quan nơi dự án mẫu và mục tiêu của chuỗi được mô tả
Cho đến nay, chúng tôi đã tạo một biểu mẫu đăng ký trong chế độ xem phiến và bước tiếp theo là thêm hành vi mong muốn vào biểu mẫu
- Chọn giới tính nên thêm trường văn bản vào biểu mẫu để nhập tên của bạn. Nhãn của trường văn bản sẽ trở thành Mr. hoặc cô. tùy thuộc vào giới tính đã chọn
- Xác thực địa chỉ email hợp lệ khi trường email mất tiêu điểm và nếu hợp lệ thì kiểm tra xem email còn hay không [thông qua yêu cầu AJAX đến máy chủ]. Hiển thị thông báo phản ánh điều này
- Kiểm tra sự kết hợp giữa mã zip và quốc gia khi chọn cái này hay cái kia. Hiển thị thông báo nếu mã zip không tuân thủ các quy tắc dành cho quốc gia cụ thể
Trong bài đăng này, tôi sẽ mô tả cách dễ nhất để đạt được điều này. bằng cách thêm thẻ tập lệnh ngay bên dưới biểu mẫu bên trong chế độ xem phiến và viết tất cả logic Javascript bằng jQuery
Including tags in head and view
Cách tiếp cận ban đầu được mô tả ở đây sử dụng jQuery. Đó là cách lâu đời nhất [và nhanh nhất và dễ nhất] mà tôi biết và trong một số dự án cũ của tôi, nó vẫn được sử dụng. Vì mã này vẫn hoạt động bình thường hoặc do thời gian hoặc ngân sách hạn chế để cập nhật mã
Ngày trước, tôi đã sử dụng jQuery để thêm bất kỳ hành vi đặc biệt nào. Do đó, jQuery được tải từ CDN trong phần của tài liệu [trong app.blade.php]. Vì dự án mẫu của chúng tôi có menu Bootstrap, nên Popper. js và Bootstrap. tập lệnh js phải được bao gồm để làm cho nó hoạt động. Lưu ý rằng thứ tự của các tập lệnh này rất quan trọng
Do đó, app.blade.php trông như thế này
Ứng dụng mẫu hiện chỉ có một trang duy nhất. Nội dung của trang được chèn vào tại @yield['content'] mà bạn thấy ở dòng 34 của app.blade.php
Trong khung nhìn này, chúng tôi bao gồm biểu mẫu, một phần của cánh [xem dòng 17]
Vì chúng tôi có sẵn jQuery thông qua phần bao gồm trong phần đầu, hãy thêm thẻ script sau vào bên trong trang
Tập lệnh bắt đầu với dòng sẵn sàng của jQuery truyền thống để đảm bảo rằng jQuery được tải đầy đủ và được khởi tạo để thực hiện phép thuật của nó. Sau đó, chúng tôi bọc toàn bộ mã bên trong một biểu thức hàm được gọi ngay lập tức [IIFE] để có thể sử dụng $ thay vì jQuery. Bản thân cái sau không cần thiết cho bài đăng này, nhưng trong các bài đăng sắp tới, chúng tôi sẽ chỉ ra lý do tại sao điều này lại cần thiết
Bên trong LIFE, chúng tôi thêm mã thông báo Laravel CSRF vào tiêu đề AJAX. Bằng cách này, chúng tôi sẽ không nhận được bất kỳ lỗi nào khi thực hiện yêu cầu POST
Sau đó, chúng ta đến với trình lắng nghe sự kiện được gắn với các phần tử DOM. Mã này khá dễ hiểu nên tôi sẽ không thảo luận chi tiết. Một điều cần chỉ ra mặc dù. phương pháp này yêu cầu chúng tôi thêm và xóa các nút DOM để phản ứng với đầu vào của người dùng
Ví dụ: các thông báo lỗi từ các sự kiện trước đó cần được xóa trước khi tiếp tục gọi lại trình xử lý sự kiện [dòng 41]. Ngoài ra, một trường văn bản được chèn sau khi người dùng chọn giới tính của mình [dòng 35], một thông báo được hiển thị sau khi nhập địa chỉ email [dòng 48 và 80], v.v.
Đây thường là cách jQuery hoạt động. Đây là ngôn ngữ bắt buộc hoạt động trực tiếp trên DOM bằng cách thêm, xóa, cập nhật, ẩn và hiển thị các nút DOM
Ưu và nhược điểm của phương pháp nàyTrong suốt nhiều năm và trước khi chúng tôi sử dụng các khung Javascript [Vue, React, Angular để kể tên một số], jQuery là cách thực tế để xử lý các tương tác của người dùng bởi vì
- nó rất dễ học đối với người mới sử dụng Javascript
- nó chỉ làm cho mã của bạn hoạt động trên các trình duyệt
Trước đây, đây là một chiến thắng lớn, ngày nay hầu hết các trình duyệt đang chuyển đổi sang hành vi rất giống nhau - nó có [tôi có nên nói là có không?] một cộng đồng sôi động tạo ra một lượng lớn plugin
- nó đi kèm với $. ajax làm trình bao bọc cho Javascript XMLHttpRequest gốc
- nó cho phép bạn viết mã mà không cần bận tâm đến việc đóng gói và tương tự
Tuy nhiên, khi thời gian trôi qua và các ứng dụng web ngày càng phát triển và trở nên phức tạp hơn, những nhược điểm khi sử dụng jQuery trở nên rõ ràng.
- các thẻ script cần được chèn theo đúng thứ tự
- khó suy luận về dòng mã
- địa ngục gọi lại đang chờ bạn
- khó [hoặc thậm chí không thể] để kiểm tra mã
- jQuery được định nghĩa là một biến toàn cục đi kèm với các vấn đề của nó như được mô tả rất chi tiết trong bài đăng này
Kết luậnĐiều này làm cho việc duy trì mã khó khăn. Nó làm cho việc xóa mã cũ hoặc thẻ tập lệnh trở thành một trò chơi roulette. Bạn không biết những gì có thể phá vỡ. Sự phụ thuộc giữa các phần khác nhau này trong mã của bạn là ẩn. Bất kỳ chức năng nào cũng có thể lấy bất kỳ thứ gì trên toàn cầu, vì vậy bạn không biết chức năng nào phụ thuộc vào tập lệnh nào
Vấn đề thứ hai là vì các biến này nằm trong phạm vi toàn cầu, nên mọi phần của mã bên trong phạm vi toàn cầu đó đều có thể thay đổi biến đó. Mã độc hại có thể cố tình thay đổi biến đó để làm cho mã của bạn làm điều gì đó mà bạn không muốn hoặc mã không độc hại có thể vô tình ghi đè lên biến của bạn
Nói chung, tôi đã rất hài lòng với jQuery trong quá khứ. Nhưng khi các ứng dụng tôi đang làm trở nên lớn hơn và phức tạp hơn, đã đến lúc cần một cách tiếp cận tốt hơn. Ví dụ: sử dụng trình đóng gói để đóng gói, giảm thiểu và làm xấu mã và có thể nhập các mô-đun npm và các hàm trợ giúp của riêng chúng tôi. Đây sẽ là chủ đề của bài đăng tiếp theo của loạt bài này về cách sử dụng Javascript trong Laravel, nơi chúng tôi sử dụng webpack để thực hiện chính xác điều này