Cho đến nay, chúng tôi đã làm rất tốt việc tổ chức. Đưa HTML của chúng tôi ra thành một mẫu là một bước tiến lớn. Có thể nói, chúng ta còn làm vẩn đục nước. Các phần chức năng khác nhau của chúng tôi trong JavaScript được chia thành các phần kín đáo, giúp mọi thứ dễ hiểu và dễ bảo trì hơn. Tôi biết chúng tôi đang làm việc với một bản demo khá nhỏ, nhưng tôi hy vọng bạn có thể hình dung ra cách một ứng dụng trở nên phức tạp hơn và nhiều dòng mã hơn, tổ chức này vô cùng có giá trị.
JavaScript không có bất kỳ "ý kiến" nào như nó là về tổ chức. Đó có thể là lý do tại sao một số người yêu thích nó và một số người cảm thấy mất hứng thú với nó. Bạn chọn tổ chức như thế nào là hoàn toàn tùy thuộc vào bạn. Đó cũng có khả năng là lý do tại sao một số người thực sự bám vào các khuôn khổ, dù có chấp nhận hay không, cung cấp một cấu trúc tổ chức. Ví dụ, Backbone. Nhưng đó là một bộ truyện khác!
Đối với bản demo của chúng tôi, chúng tôi sẽ đơn giản tổ chức xung quanh một đối tượng mà chúng tôi chỉ tạo ra.
var Movies = ( )Mọi thứ chúng tôi đang làm ở đây đều liên quan đến việc đưa một số phim lên trang, vì vậy chúng tôi sẽ chứa nó trong một “thứ” được gọi là Phim. Hãy nhớ rằng chúng tôi chỉ làm bất cứ điều gì có ý nghĩa đối với chúng tôi về mặt tổ chức. Điều này cũng có lợi khi chỉ đưa một biến vào “phạm vi toàn cầu”. Nếu chúng ta đã làm mọi thứ ở phạm vi toàn cục, nó sẽ là một mớ hỗn độn khi vô tình ghi đè các biến (và các hàm và bất cứ thứ gì) được khai báo ở nơi khác.
Tuy nhiên, một đối tượng như thế không thực sự “làm” được gì cả. Chúng tôi sẽ cần phải "bắt đầu nó".
var Movies = ( init: function() ( ) ) Movies.init();Có một chức năng có tên init là một tiêu chuẩn cho phép bất kỳ ai đọc mã này đều biết rằng mã bên trong có nội dung chạy khi nhóm mã này được thực thi. Điều đó sẽ đọc giống như một mục lục về những gì xảy ra với nhóm mã này. Sau đó, chúng tôi tạo các hàm khác (nhiều thuộc tính hơn của đối tượng Movies) để thực hiện những việc mà chúng tôi cần làm, theo từng phần rời rạc. Hãy nhớ rằng chúng ta có thể gọi bất cứ thứ gì chúng ta muốn, bất cứ thứ gì có ý nghĩa với chúng ta.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Khá rõ ràng hả? Bạn có thể nhận thấy appendMovesToPagekhông được gọi trong init. Đó là bởi vì chúng tôi không thể gọi như vậy cho đến khi chúng tôi có dữ liệu để gửi nó. Dữ liệu đó sẽ đến từ một cuộc gọi Ajax, nghĩa là chúng ta cần một cuộc gọi lại. Vì vậy, getDatasẽ kết thúc cuộc gọi đó.
Mọi thứ khác sẽ điền ở đây chỉ là di chuyển các bit mã mà chúng ta đã viết vào đúng vị trí.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
Và thực hiện.
Hãy xem xét bốn mối quan tâm mà chúng tôi đã nêu ra trước đó và xem chúng tôi đã làm gì với chúng.
- Lấy dữ liệu. Chúng tôi đã chuyển JSON thành một tệp mà chúng tôi có thể xử lý
$.getJSON, vì có khả năng chúng tôi sẽ cần thực hiện trong một tình huống thực tế. Ngoài việc chỉ thực hành điều đó, điều này sẽ cho phép chúng tôi viết các bài kiểm tra xung quanh nó. - Hiển thị logic. Bây giờ chúng ta có một hàm appendMoviesToPage rất cụ thể được gọi khi chúng ta sẵn sàng nối phim của mình vào trang. Các chức năng đơn mục đích rất tốt cho (một lần nữa) tổ chức, tính dễ hiểu và khả năng bảo trì.
- Xử lý sự kiện. Bằng cách sử dụng ủy quyền sự kiện, chúng tôi không còn trộn “logic nghiệp vụ” này với logic hoặc mẫu hiển thị. Chúng tôi thậm chí không phải lo lắng về việc thực thi lệnh nguồn, vì cuối cùng chúng tôi đang gắn các sự kiện vào
document. Chức năng của chúng tôi sẽ hoạt động bất kể khi nào / như thế nào mẫu được thêm vào trang. - Tạo khuôn. Hoàn toàn chuyển sang sử dụng các thư viện dành riêng cho việc tạo khuôn mẫu.
Tôi gọi đó là chiến thắng. Đây là nơi chúng tôi đã kết thúc:
Xem Pen BwbhI của Chris Coyier (@chriscoyier) trên CodePen