Chúng tôi đã rời đi trong video cuối cùng với một chút lộn xộn. Tất cả trong một khối JavaScript, chúng tôi đã trộn lẫn truy xuất dữ liệu, hiển thị và logic nghiệp vụ và tạo khuôn mẫu. Trong video này, chúng ta sẽ bắt đầu chia nhỏ những điều đó để đưa chúng ta đến với mã có tổ chức, dễ bảo trì và dễ hiểu hơn. Một phần lớn trong số đó là khuôn mẫu.
Hãy # 1 trong cuộc phiêu lưu hấp dẫn của chúng tôi là với Handlebars. Handlebars có một cách tiếp cận thông minh trong đó HTML cho mẫu được đặt trong HTML theo đúng nghĩa đen. Bạn sử dụng một thẻ đặc biệt . Nó giúp tạo ra một tác giả tốt bởi vì chúng ta có thể thoát khỏi sự vụng về của việc nối chuỗi (tất cả những dấu ngoặc kép và dấu ngoặc kép đó) và có được cú pháp tô sáng tuyệt vời cho HTML mà trình soạn thảo của bạn cung cấp. Mẫu của chúng tôi cuối cùng trông như thế này:
((movieTitle))
((movieDirector))
Lưu ý typethuộc tính kỳ lạ trên thẻ script. Điều đó ngăn không cho nội dung của thẻ đó thực thi. Cuối cùng Handlebars chỉ cần rút ruột của thẻ này và biến nó thành một hàm mẫu. Cách khá thông minh để xử lý nó thực sự.
Những bit như ((movieTitle))là những phần quan trọng. Cuối cùng, chúng tôi chuyển một đối tượng đến hàm tạo mẫu được tạo và các thuộc tính của đối tượng đó khớp với các bit giữ chỗ này. Có lẽ là Handlebars được đặt tên là handbars, bởi vì các bit giữ chỗ đó được bao bọc trong dấu ngoặc nhọn trông giống như các thanh điều khiển từ phía trên.
Làm theo hướng dẫn đơn giản trên trang web Handlebars, chúng tôi tạo hàm tạo khuôn mẫu của chúng tôi như sau:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Sau đó, trong forvòng lặp của chúng tôi , chúng tôi gọi hàm tạo mẫu mới với đối tượng (ngữ cảnh) chứa một bộ phim duy nhất. HTML sẽ được trả về và chúng tôi nối nó vào trang.
var html = template(data.movies(i)); $("#movies").append(html);Chúng tôi cũng lấy mẫu trong video này và quay nó sang một cây bút khác. Điều đó chỉ cho thấy bạn có thể sẽ chia nhỏ mã của chính mình trong một dự án thực như thế nào. Mẫu gần như chắc chắn sẽ là “bao gồm” một số loại.
Đây là nơi chúng tôi đã kết thúc:
Xem Pen mdCjJ của Chris Coyier (@chriscoyier) trên CodePen
Chúng tôi đã thực hiện một số bước tiến tốt ở đây để hướng tới mã tốt hơn, nhưng chúng tôi còn nhiều việc phải làm để làm cho nó hoàn toàn sạch sẽ.