Hướng dẫn javascript (es6) code snippets. - đoạn mã javascript (es6).

Là 1 lập trình viên Front-end, mỗi ngày chúng ta phải giải quyết rất nhiều vấn đề không chỉ về giao diện html, css bình thường mà còn phải quan tâm đến xử lí các vấn đề về hiệu ứng, các vấn đề về logic với Javascript.

Trong bài viết ngày hôm nay mình sẽ giới thiệu với các bạn 1 số javascript code snippets (cú pháp es6) mà theo mình thấy là rất hữu ích và giải quyết rất nhiều vấn đề thường gặp về logic phải sử dụng Javascript để xử lí. Bắt đầu thôi nào.

1. Reset Animation

Bạn đã bao giờ gặp trường hợp muốn reset lại hiệu ứng animation (sử dụng CSS) đối với 1 phần tử nào đấy ở 1 (hoặc nhiều) sự kiện nhất định chưa? Đoạn code sau đây sẽ giúp bạn hiện thực hóa điều đó. 

2. Lấy vị trí scroll hiện tại của phần tử

Đoạn code trên sẽ trả về cho ta 1 object với x là giá trị scroll theo trục ngang và y là giá trị scroll theo trục dọc. Ở đoạn code trên sử dụng cú pháp của ES6 khi có khai báo tham số mặc định là window, tức là nếu bạn không truyền tham số vào thì hàm đó sẽ tự hiểu là phần tử bạn đang muốn lấy vị trí scroll là window.

3. Smooth Scroll To Top

Đôi khi làm web bạn muốn có 1 button hay 1 phần tử nào đó để khi ở đâu trong trang mà bạn click vào nó thì sẽ đưa người dùng trở về vị trí đầu của trang (vị trí top). Nhưng bạn lại muốn hiệu ứng khi scroll to top nó mượt mà 1 chút ví dụ như thế này.

Đơn giản thôi, đoạn snippet code sau đây sẽ giúp bạn làm điều đó:

4. Kiểm tra xem phần tử có nằm trong viewport hay không. 

Cái hay của đoạn code này là bạn có thể chọn kiểm tra xem phần tử có nằm trọn trong viewport hay không hay chỉ nằm 1 phần. 

5. Kiểm tra thiết bị hiện tại là mobile hay desktop/pc

6. Trích xuất các parameters của URL

Ví dụ: 

Chú ý là đoạn code trên sẽ tự động xóa các parameters trùng lặp.  

7. Lấy dữ liệu từ form dưới dạng Object

8. Xóa event listener của 1 phần tử 

9. Format lại thời gian với giá trị truyền vào là milliseconds

10. Tính toán khoảng cách giữa 2 Date (đơn vị trả về là ngày)

Các bạn chú ý tham số truyền vào là 2 Date Objects nhé. 

11. Lưu giá trị 1 xâu vào clipboard

12. Xóa các object trùng lặp trong 1 mảng các objects

13. Toggle Class của 1 phần tử. '

Toggle class ở đây tức là sẽ kiểm tra xem phần tử đó có class được truyền vào không, nếu không có thì sẽ thêm class đó vào, nếu có rồi thì sẽ xóa class đó đi. 

14. Kiểm tra email có hợp lệ hay không

15. Xóa các kí tự không thuộc ASCII

16. Smooth Scroll tới 1 phần tử nào đó. 

17. Trả về giá trị của 1 thuộc tính CSS nào đó. 

18. Encode String

Tạm kết

Okay, vậy là trên đây mình đã giới thiệu qua với các bạn 1 số Javascript Code Snippets mà mình thấy là thông dụng và cực kì hữu ích đối với các bạn làm front-end về xử lí logic các sự kiện, animation, ... Mong là bài viết có ích cho các bạn. Ngoài những code snippets mình nêu trên thì các bạn còn có những code snippets xịn xò nào thì có thể chia sẻ cùng mình và mọi người nhé. Nếu thấy hay thì đừng quên để lại bình luận góp ý cũng như rate cho mình 5* nhé. Thân ái. 

Nguồn tham khảo: Stackoverflow, 30secondsofcode.org