Tạo khuôn mẫu là một phần quan trọng khi làm việc với các ứng dụng JavaScript. Việc dữ liệu có sẵn cho bạn là khá phổ biến, nhưng không phải ở định dạng sẵn sàng hiển thị trên màn hình. Đó là dữ liệu thường (nhưng không phải luôn luôn) ở định dạng JSON. Đó là một định dạng tuyệt vời để làm việc với JavaScript, nhưng chúng ta vẫn cần phải định dạng nó thành một thứ gì đó chúng ta có thể sử dụng.
Ví dụ: đây là một số dữ liệu hư cấu mà chúng tôi có thể có trong tay:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Và cuối cùng chúng tôi muốn biến điều đó thành:
Ender's Game
Gavin Hood
Bạn có thể nghĩ rằng jQuery thật tuyệt vời. jQuery có đầy đủ các công cụ thao tác / duyệt DOM. Nhưng nó không có một bộ công cụ tạo DOM mạnh mẽ như bạn có thể nói. Tôi tin rằng nhóm jQuery đã xem xét việc thêm khuôn mẫu vào một thời điểm nào đó và thậm chí đã đùa giỡn với một plugin "chính thức", nhưng nó không thành công.
Trong video này, chúng tôi chỉ không làm những gì ngày nay theo truyền thống được coi là tạo khuôn mẫu. Chúng tôi chỉ cần xây dựng một cái mới với jQuery và sử dụng nối chuỗi để tạo HTML mà chúng tôi cần và cuối cùng đưa nó vào trang. Không có gì sai về mặt kỹ thuật về điều đó, nhưng tôi cố gắng lái xe về nhà để làm sao phương pháp này có thể nhanh chóng vượt qua tầm tay.
Chỉ trong một chút JS mà chúng tôi viết trong video này, chúng tôi đang kết hợp nhiều mối quan tâm / công việc:
- Lấy dữ liệu. Chúng tôi chỉ có nó trong tay ở đây, nhưng có thể điều này phức tạp hơn một chút. Có lẽ một yêu cầu Ajax không đồng bộ với xử lý lỗi và bộ nhớ đệm, v.v.
- Hiển thị logic. Quyết định những gì chúng ta cần thể hiện. Bao nhiêu? Gồm những bộ phận nào? Dựa trên cái gì?
- Xử lý sự kiện. Các div mới được tiêm của chúng tôi đã thêm xử lý sự kiện khi chúng tôi tạo chúng, thay vì ủy quyền.
- Tạo khuôn. HTML mà chúng tôi tạo ra để hoàn thành thiết kế, cấu trúc dữ liệu và đáp ứng hoặc nhu cầu.
Đây là mã spaghetti-ish mà chúng tôi đã hoàn thành:
Xem Bút 31b07f30dce13b31904da36693b29b41 của Chris Coyier (@chriscoyier) trên CodePen
Khối video tiếp theo sẽ tập trung nhiều vào việc tạo khuôn mẫu vì điều đó cực kỳ quan trọng, nhưng cuối cùng chúng tôi sẽ loại bỏ tất cả những mối quan tâm này và kết thúc bằng mã có tổ chức và dễ bảo trì hơn nhiều.