Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian xử lý những vấn đề đã có giải pháp tốt hơn từ lâu.
Bạn cứ mãi săn bug, viết đi viết lại một đoạn code, hoặc dán tạm bằng các giải pháp “vá lỗi” vì không biết có cách làm sạch hơn. Dưới đây là 9 mẹo nhỏ nhưng cực kỳ hiệu quả để giúp công việc lập trình web của bạn dễ thở và nhanh chóng hơn.
1. Vẫn còn dùng document.querySelector khắp nơi? Tạo Shortcut đi!
Đừng lặp đi lặp lại như con vẹt nữa. Tạo hàm rút gọn của riêng bạn:
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);
Giờ thì $('#app') dùng y như jQuery, nhưng bạn vẫn đang dùng JavaScript thuần. Ngon chưa?
2. Không cần Framework vẫn có thể làm Animation mượt mà
Hàm Element.animate() có sẵn trong trình duyệt, cực kỳ hiệu quả mà ít người biết:
element.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: 500,
easing: 'ease-in'
});
Animation mượt mà, không cần thêm class CSS hay thư viện bên ngoài nào cả.
3. HTML có sẵn thẻ <dialog>. Dùng nó đi!
Thay vì tự chế modal bằng JavaScript:
<dialog id="myModal">Hello!</dialog>
Hãy dùng:
document.getElementById('myModal').showModal();
Boom — modal “xịn” ngay trong HTML, sạch sẽ, dễ tiếp cận, không cần thư viện.
4. Đừng dùng localStorage cho mọi thứ
localStorage thì dễ dùng, nhưng nó đồng bộ và có thể làm chậm luồng chính.
Nếu bạn lưu dữ liệu lớn hoặc phức tạp:
- Dùng IndexedDB (hoặc thư viện như
idb-keyval) - Hoặc thử Caches API – vốn dùng cho service worker nhưng bạn có thể tận dụng phía client.
5. Dùng type="module" để Import trực tiếp trong trình duyệt
Không muốn dùng Webpack/Vite chỉ để thử module?
<script type="module">
import { hello } from './utils.js';
hello();
</script>
Hoàn toàn chạy được trên trình duyệt hiện đại. Dev nhàn tênh.
6. Toast Notification Gọn Nhẹ Với CSS + <template>
Không cần UI library để tạo toast:
<template id="toast">
<div class="toast">Copied!</div>
</template>
Thử cái này xem:
const toast = document.importNode(toastTemplate.content, true);
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);
Thêm tí CSS là xong. Tái sử dụng được, cực nhẹ và nhanh.
7. Dùng rel=”noopener” với link ngoài nếu không muốn bị Hack
Bạn đang mở link thế này?
<a href="https://external.com" target="_blank">Open</a>
Hãy thêm:
<a href="https://external.com" target="_blank" rel="noopener">Open</a>
Giúp tránh lỗ hổng window.opener – đơn giản mà cực kỳ quan trọng.
8. Tự động Lazy-Load ảnh không cần JavaScript
Chỉ cần:
<img src="cat.jpg" loading="lazy" />
Lazy load tích hợp sẵn trên trình duyệt hiện đại. Không cần viết thêm script gì cả.
9. Luôn Dùng defer Cho Thẻ <script>
Bạn có thể biết async, nhưng với các script phụ thuộc vào DOM, hãy dùng:
<script src="main.js" defer></script>
Giúp không chặn quá trình render và giữ đúng thứ tự thực thi. “Chạy là chuẩn”.
Hy vọng các mẹo vặt này sẽ giúp ích cho các bạn!
Nguồn: viblo.asia