HomeLập trìnhJavaScriptCách thêm JavaScript...

Cách thêm JavaScript vào ứng dụng Rails 6 của bạn


Là một nhà phát triển Full-Stack mới vào nghề, trọng tâm chính của tôi là phần phụ trợ. Tôi muốn tìm hiểu cách lập trình máy chủ phụ trợ để phục vụ ứng dụng web của mình.

Nhưng sau khi tìm hiểu kiến ​​thức cơ bản về phần phụ trợ, tôi biết được rằng phần đầu cũng quan trọng như phần phụ trợ. Và một cách để tăng tính sinh động cho ứng dụng web của bạn là thêm JavaScript.

JavaScript là điều cần thiết để thêm tính tương tác vào ứng dụng web của bạn. Tất nhiên, nó đã trở nên xa hơn thế bây giờ. Nó là một ngôn ngữ lập trình mà các trình duyệt web chạy. Nhiều trang web bạn đã truy cập sử dụng một số mã JavaScript ở giao diện người dùng của họ.

Bạn có thể đã bắt đầu sử dụng Ruby on Rails để xây dựng ứng dụng web của mình và tự hỏi làm thế nào để thêm JavaScript vào mã của mình. Trong bài viết này, tôi sẽ chỉ cho bạn cách thêm mã JavaScript vào ứng dụng Rails của bạn.

Tại sao lại là JavaScript?

Bạn có thể thắc mắc tại sao ngay từ đầu bạn lại cần JavaScript trong ứng dụng web của mình. Nói tóm lại, nếu bạn không bao gồm bất kỳ JS nào, thì trải nghiệm người dùng ứng dụng web của bạn sẽ không tốt.

Đọc thêm  Học JavaScript – Khóa học JS miễn phí cho người mới bắt đầu

Giả sử bạn có một biểu mẫu mà người dùng điền vào và bạn muốn xác thực biểu mẫu. Nếu người dùng gửi biểu mẫu mà không điền vào các giá trị thích hợp, trang dành cho biểu mẫu phải tải lại lần nữa, chạm vào máy chủ và xuất hiện lại cho người dùng. Điều đó mất rất nhiều thời gian và có thể sẽ làm phiền người dùng.

Tất nhiên, đôi khi bạn có thể thoát khỏi việc xác thực biểu mẫu HTML, nhưng điều đó không phải lúc nào cũng có thể. Thêm một tập lệnh đơn giản để kiểm tra đầu vào của người dùng và thông báo cho họ rằng họ nên nhập thông tin chính xác sẽ tốt hơn nhiều.

Tất nhiên điều này không có nghĩa là bạn có thể bỏ qua xác thực phía máy chủ, nhưng đó là một bài viết khác.

Một trường hợp sử dụng khác là tải tệp không đồng bộ, bạn có thể thực hiện điều này bằng JavaScript mà không cần tải lại toàn bộ trang. Bạn có thể đã sử dụng một số ứng dụng web tải nhiều hình ảnh và bài viết hơn khi bạn cuộn xuống mà không phải làm mới hoặc thay đổi trang nhiều lần.

Những trường hợp sử dụng này và các trường hợp sử dụng khác là những lý do tuyệt vời để sử dụng JavaScript trong ứng dụng của bạn. Trên thực tế, nhu cầu về JavaScript ngày càng tăng. Bạn thậm chí có thể sử dụng nó để viết phần phụ trợ của mình.

Đọc thêm  ES6 cung cấp cho các nhà phát triển JavaScript nhiều cách hơn để làm mọi việc. Nhưng đó không phải lúc nào cũng là một điều tốt.

Nhưng chúng tôi yêu thích Rails, vì vậy chúng tôi sẽ gắn bó với nó một thời gian.

Những gì chúng tôi sẽ đề cập ở đây

Tại thời điểm viết bài, phiên bản mới nhất của khung là Rails 6 và nó đã mang lại một số thay đổi đối với cách bạn tương tác với JavaScript.

Trước Rails 6, chúng tôi đã có đường dẫn nội dung để quản lý các tệp CSS và JavaScript. Nhưng bắt đầu từ Rails 6, Webpacker là trình biên dịch mặc định cho JavaScript. CSS vẫn được quản lý bởi đường ống nội dung, nhưng bạn cũng có thể sử dụng Webpack để biên dịch CSS.

Bạn sẽ không tìm thấy thư mục JavaScript của mình ở cùng một vị trí như trong Rails 5. Cấu trúc thư mục cho JavaScript đã thay đổi thành ứng dụng/javascript/gói/ thư mục.

Trong thư mục đó, bạn sẽ tìm thấy ứng dụng.js tệp, giống như tệp ứng dụng.css tập tin. Nó sẽ được nhập theo mặc định trong ứng dụng.html.erb tệp khi bạn tạo ứng dụng Rails mới của mình.

Các ứng dụng.html.erb tập tin sẽ được sử dụng bởi tất cả các chế độ xem.

Thêm tập lệnh sẽ được sử dụng bởi tất cả các chế độ xem

Nếu bạn muốn JavaScript của mình có sẵn trong tất cả các chế độ xem hoặc trang, bạn chỉ cần đặt nó vào ứng dụng.js tập tin:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

console.log('Hello from application.js')
ứng dụng/javascript/gói/application.js

Bốn dòng đầu tiên ở đó theo mặc định. tôi đã thêm một console.log tuyên bố để cho bạn thấy rằng JavaScript sẽ có sẵn ở mọi nơi.

Đọc thêm  Tổng quan nhanh về các ký hiệu JavaScript

Bạn có thể kiểm tra điều này bằng cách xem bất kỳ trang nào trong ứng dụng của mình và mở bảng điều khiển dành cho nhà phát triển.

Nhưng không phải lúc nào bạn cũng muốn mã JavaScript của mình được tải trên mọi trang. Thay vào đó, bạn chỉ có thể cung cấp tập lệnh khi truy cập một trang cụ thể.

Thêm tập lệnh sẽ được sử dụng bởi một tệp cụ thể

Nếu bạn muốn JavaScript của mình chỉ khả dụng cho một chế độ xem cụ thể, thì bạn có thể sử dụng javascript_pack_tag để nhập tệp cụ thể đó:

<h1 class="text-center">I want my JS here only</h1>

<%= javascript_pack_tag 'my_js' %>
ứng dụng/lượt xem/bài đăng/index.html.erb
console.log('Hello from My JS')
ứng dụng/javascript/packs/my_js.js

Hãy nhớ rằng bạn cần thêm tệp vào gói danh mục. Các javascript_pack_tag cũng nên tham khảo tên của tệp JavaScript bạn đã tạo.

Bây giờ tập lệnh sẽ chỉ chạy khi chế độ xem cụ thể bao gồm javascript_pack_tag được tải trong trình duyệt.

kết thúc

Tôi hy vọng bài viết này sẽ giúp giải tỏa mọi nhầm lẫn mà bạn có thể gặp phải khi cập nhật ứng dụng của mình lên Rails 6 hoặc nếu bạn mới bắt đầu với Rails.

Bạn có thể theo dõi tôi trên Github nếu muốn tìm hiểu thêm.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status