Tạo TODO app với Backbonejs và Requirejs.
Theo như bài trước chúng ta đã có thể tạo được một app cực kì đơn giản với backbonejs. Nhìn lại thì code đó vẫn còn lung tung lắm, khó quản lý code :).
Chính vì vậy hôm nay mình sẽ giới thiệu sử dụng thằng backbonejs này underscorejs, requirejs để refractor lại TODO app đó.
Đầu tiên mình cũng cần một chút khái niệm về requirejs đã nhé.
Requirejs là một thư viện hỗ trợ script loading, nhằm cải thiện tốc độ load js file, hỗ trợ load theo các module.
Với hướng dẫn lần trước mình sẽ include script file theo thứ tự:
<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="todo/app.js"></script><!-- Main app file -->
Nếu load theo cách trên thì trình duyệt sẽ phải load script file một cách tuần tự, từ trên xuống. Điều đó sẽ ảnh hưởng 1 chút đến tốc độ render của website chúng ta.
Một cách khác nếu sử dụng requirejs, thì các script file sẽ được load sau khi document đã được load xong, và các script file của chúng ta sẽ load theo cơ chế bất đồng bộ nhưng vẫn đảm bảo các file được load theo đúng thứ tự.
<script data-main="js/main.js" src="js/require.js"></script><!-- Main app file -->
Nội dung main.js
Cách các script file được load trên trình duyệt.
Ok mình sẽ quay lại TODO app của chúng ta
Mình sẽ liệt kê lại các thành phần chính trong TODO app lần trước.
TodoModel
TodoView
TodoListView
TodoCollection
AppView
Lần này cấu trúc app mình có thay đổi một chút như sau:
Đi thẳng vào code luôn nhé. :)
// khai báo TodoModel (model/todo.js)
// khai báo TodoCollection (collection/todo.js)
// khai báo TodoView (view/todo.js)
// khai báo TodoListView (view/todo-list.js)
// khai báo AppView (app.js)
// Khai báo main app (main.js)
Nếu các bạn để ý có thể thấy rằng đối với mỗi đối tượng như TodoModel, TodoView, … mình đều khai báo cũng không khác hướng dẫn lần trước cho lắm, chỉ có 1 điểm khác biệt là lần này mình khai báo như một module riêng biệt và sẽ được gọi thông qua requirejs.
Kiểu khai báo 1 module của requirejs như sau:
define([?dependency], function(dep1, dep2, ….){
// Some function with dep1
// Some function with dep2
// ….
});
hoặc
define(function(require){
var something = require(some_path);
});
Link Demo: http://vntrace.github.io/backbone/bb-rj/
Xin lỗi các bạn do mình không có nhiều thời gian, nên chỉ có thể đăng được nội dung hd như trên, chưa có đi vào giải thích từng vấn đề cụ thể được. Nếu các bạn quan tâm hơn có thể để lại comment bên dưới, đảm bảo mình sẽ reply lại nhiệt tình nhé.
