JavaScript: thêm hành vi và trạng thái

JavaScript phản hồi event, biến đổi data, cập nhật state và phản chiếu state trở lại UI. Giữ một single source of truth giúp màn hình không lệch với dữ liệu bên dưới.

Nhìn nhanh

Câu hỏi	Câu trả lời thực tế
Dùng khi nào?	Task list lưu một array task; thao tác add, complete và filter tạo state mới, sau đó một bước render cập nhật list và count trên màn hình.
Cần làm gì?	Xây task list có add, complete, filter và empty state; nếu dùng local storage thì chỉ lưu dữ liệu không nhạy cảm.
Biết là đúng bằng cách nào?	Item count luôn khớp state nhìn thấy, thao tác keyboard/mouse đều hoạt động và refresh chỉ khôi phục dữ liệu chủ động lưu.
Lỗi hay gặp?	Tránh phân tán state giữa DOM text, global variable và storage; hãy xác định representation nào là authoritative.

flowchart LR
  A[Câu hỏi] --> B[JavaScript: thêm hành vi và trạng thái]
  B --> C[Ví dụ nhỏ]
  C --> D[Bằng chứng]

Điểm quan trọng của sơ đồ là không dừng ở định nghĩa: hãy nối khái niệm với một ví dụ nhỏ và bằng chứng có thể quan sát.

Ví dụ đã phân tích

Task list lưu một array task; thao tác add, complete và filter tạo state mới, sau đó một bước render cập nhật list và count trên màn hình.

Trước khi làm, hãy viết dấu hiệu thành công. Sau đó chỉ thay đổi một yếu tố, quan sát kết quả và ghi lại assumption. Với JavaScript: thêm hành vi và trạng thái, cách này giúp tách điều bạn biết khỏi điều bạn chỉ đang đoán.

Thực hành trong 20–30 phút

Mục tiêu: Xây task list có add, complete, filter và empty state; nếu dùng local storage thì chỉ lưu dữ liệu không nhạy cảm.

1. Ghi lại trạng thái ban đầu và điều bạn dự đoán.
2. Thực hiện phiên bản nhỏ nhất, không thêm công cụ chưa cần thiết.
3. Thay đổi đúng một input hoặc constraint rồi chạy lại.
4. Lưu command, screenshot, output hoặc checklist làm bằng chứng.

Kết quả mong đợi: Item count luôn khớp state nhìn thấy, thao tác keyboard/mouse đều hoạt động và refresh chỉ khôi phục dữ liệu chủ động lưu.

Sai ở đâu và sửa thế nào

Tránh phân tán state giữa DOM text, global variable và storage; hãy xác định representation nào là authoritative.

Khi kết quả khác dự đoán, đừng đổi nhiều thứ cùng lúc. Kiểm tra input, version, environment, quyền truy cập và log trước; sau đó lặp lại từ ví dụ nhỏ nhất.

Định nghĩa hoàn thành

• Tôi giải thích được khái niệm bằng ngôn ngữ của mình.
• Tôi đã hoàn thành ví dụ nhỏ và giữ bằng chứng.
• Tôi biết một failure mode và cách kiểm tra nó.
• Người khác có thể làm lại mà không phải đoán bước còn thiếu.

Đi sâu hơn

Mở resource hoặc repository đi kèm ở cuối trang khi bạn cần implementation đầy đủ. Hãy kiểm tra version hiện hành trước khi dùng command trong dự án thật.