Chào mừng bạn đến với Dojo! Trong bài hướng dẫn này, bạn sẽ học được cách làm thế nào để tải Dojo và bắt đầu khám phá một số chức năng chính của Dojo. Bạn cũng sẽ được học về nền tảng kiến trúc AMD của Dojo, khám phá cách tải những Module bổ sung để thêm các chức năng mở rộng cho Website hoặc ứng dụng của bạn cũng như tìm kiếm giải pháp khi gặp lỗi.
Getting Started - Bắt đầu
Bắt đầu với Dojo thật đơn giản bằng cách đưa tệp dojo.js vào trang web của bạn, giống như những tệp JavaScript khác vậy. Dojo có thể chạy trên hầu hết các CDNs (mạng phân phối nội dung), vì vậy để bắt đầu ta chỉ việc thêm một tệp hellodojo.html rồi mở nó ra và gõ nội dung dưới đây vào.
<!DOCTYPE html>Thông thường, bạn phải tải thư viện JavaScript để có thể sử dụng tất cả các phương thức cần thiết. Điều này đúng với những phiên bản cũ của Dojo, nhưng từ bản Dojo 1.7 trở đi Asynchronous Module Definition (AMD) (Khai báo module bất đồng bộ) đã cho phép module hóa hoàn toàn trong việc phát triển ứng dụng web. AMD được chọn bởi vì nó làm việc với mã thuần Javascript, cho phép mã nguồn làm việc trên trình duyệt web, đồng thời cũng hỗ trợ trong việc xây dựng xử lý để sản xuất tối ưu hóa mã nguồn nhằm nâng cao hiệu suất mã nguồn trong quá trình triển khai.
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="xinChao">Hello</h1>
<!-- tải Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
Vậy thì thứ gì là sẵn có khi file <dojo.js> được nạp ?
Đó là Dojo's AMD và khai báo hai hàm toàn cục bằng việc sử dụng 2 lệnh <require> và <define>. Để hiểu thêm chi tiết về AMD, mời bạn đọc bài này . Để bắt đầu, cần hiểu rằng <require> cho phép bạn tải những module và dùng chúng, trong khi <define> cho phép bạn khai báo module của chính bạn. Một module thường là một tệp Javascript đơn.
Một vài module cơ bản của Dojo cho việc tương tác với HTML DOM là <dojo/dom> và <dojo/dom-construct>. Hãy xem cách làm thế nào để tải những module này và dùng các chức năng mà chúng cung cấp:
<!DOCTYPE html>Tham số đầu tiên để <require>(tại dòng 14-17) là một mảng các định danh module - các định danh cho những modules mà bạn muốn nạp. Nói chung, ở đây ta sẽ liên kết trực tiếp đến tên của tệp, còn nếu bạn tải từ trang phân phối của Dojo và tìm trong thư mục dojo, bạn sẽ thấy 2 tệp dom.js và dom-construct.js như khai báo các modules ở trên.
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="xinChao">Hello</h1>
<!-- tải Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var xinChaoNode = dom.byId('xinChao');
domConstruct.place('_ Dojo!_', xinChaoNode);
});
</script>
</body>
</html
Trình nạp AMD thực thi bất đồng bộ, và trong JavaScript thì bất đồng bộ thực thi với các callbacks, như tham số thứ hai <require> (dòng 17) là một hàm callback. Trong hàm này, bạn đã cung cấp các modules cho nó sử dụng. Trình nạp AMD gán các modules vào cho hàm như là các tham số (theo thứ tự mà chúng được chỉ định khai báo trong mảng định danh module). Bạn có thể tự đặt tên cho các tham số trong hàm callback của bạn theo ý muốn, nhưng để cho nhất quán và dễ đọc chúng ta nên sử dụng tên cơ bản trên từng định danh module.
Trên dòng 18 và 19, bạn có thể thấy hai modules <dom> và <dom-construct> được dùng để tham chiếu đến một DOM node bằng Id của nó và thao tác với nội dung của DOM node đó.
Trình nạp AMD sẽ tự nạp tất cả các phần liên quan cho một module được yêu cầu, do đó, bạn chỉ nên đưa những modules mà bạn cần sử dụng trực tiếp vào trong danh sách liên quan (để tránh việc trang web của bạn phải tải cả những module bạn không cần dùng).
Define AMD Modules - Khai báo các module AMD
Tại thời điểm này bạn đã nhìn thấy một ví dụ về việc tải và sử dụng các modules. Để khai báo và nạp các modules của chính mình, bạn sẽ cần phải đảm bảo rằng bạn đang tải tập tin HTML của mình từ một máy chủ HTTP (localhost thì ổn nhưng bạn cần một máy chủ HTTP được bảo mật để ngăn chặn các nguy cơ do làm việc với giao thức "file:///"). Với các ví dụ ở đây, bạn không cần quan tâm bất kỳ một chức năng nào trong web server ngoài việc cung cấp tệp tin. Thêm một thư mục <demo> trong thư mục chứa tệp tin <hellodojo.html>, và trong thư mục <demo>, ta tạo một tệp tên là <myModule.js>
hellodojo.html
demo/myModule.js
Bây giờ, điền các nội dung sau vào <myModule.js>
define([Chức năng <define> trong AMD chấp nhận các tham số như chức năng <require> - nghĩa là, một mảng các định danh modules và một hàm callback. Bộ nạp AMD lưu giữ giá trị trả về của hàm callback như giá trị của mô-đun, vì vậy bất kỳ đoạn mã khác mà nạp mô-đun với <require> (hoặc <define>) sẽ nhận được một tham chiếu đến các giá trị trả lại của các mô-đun được xác định.
//Module <dojo/dom> được yêu cầu nên nó sẽ nằm trong danh sách tham số
'dojo/dom'
], function(dom){
// Một khi tất cả các module trong danh sách tham số đã tải thì hàm function sẽ được gọi để khai báo module demo/myModule
//
// Module <dojo/dom> được thông qua như một đối số đầu tiên cho hàm function, các module sau đó cũng lần lượt được thông qua theo danh sách đối số.
var oldText = {};
//Đối tượng được trả về sẽ trở thành giá trị của hàm function
return {
setText: function (id, text) {
var node = dom.byId(id);
oldText[id] = node.innerHTML;
node.innerHTML = text;
},
restoreText: function (id) {
var node = dom.byId(id);
node.innerHTML = oldText[id];
delete oldText[id];
}
};
});
CDN Usage - CÁCH SỬ DỤNG CDN
Nạp các modules cục bộ trong khi dùng Dojo từ CDN yêu cầu thêm một số cấu hình (để biết thêm thông tin khi cấu hình trình tải AMD của Dojo và dùng nó với CDN có thể tìm thấy trong bài viết thiết lập AMD Advanced AMD và bài viết dùng Mudule với một CDN ). Nâng cấp tệp <hellodojo.js> như dưới đây:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="xinChao">Hello</h1>
<!-- Cấu hình Dojo -->
<script>
//thay vì dùng data-dojo-config, chúng ta đang tạo một đối tượng cấu hình dojo (dojoConfig) trước khi tải dojo.js
//thực ra chúng giống hệt nhau, chỉ là đơn giản hơn để học cách tiếp cận với những cấu hình lớn hơn.
var dojoConfig = {
async : true,
//Dòng mã này đăng ký vị trí chính xác của một packages "demo" để có thể tải Dojo từ CDN trong khi vẫn đang nạp module cục bộ
packages:[{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/,'')+'/demo'
}]
};
</script>
<!--Load Dojo-->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>
require(['demo/myModule'], function (myModule){
myModule.setText('xinChao','Hello Dojo!');
setTimeout (function(){
myModule.restoreText('xinChao');
},3000)
});
</script>
</body>
</html>
Ngoài việc thêm cấu hình cho Dojo, chúng ta đã định nghĩa lại main code (mã chính) - bây giờ chỉ tải duy nhất "demo/myModule", và sử dụng nó để hoàn thiện thao tác của văn bản trên trang. Như bạn có thể thấy, khai báo và nạp module thật đơn giản. Chúng ta cũng thay đổi URL để <dojo.js> bỏ qua giao thức HTTP (dòng 24) - nó tạo một liên kết sẽ dùng bất cứ giao thức nào mà trang đang sử dụng (http hoặc https), trong mộ số trình duyệt sẽ có sự cảnh báo an ninh để ngăn chặn nội dung được kết hợp này.
Tổ chức mã trong các modules AMD cho phép bạn tạo tài nguyên một cách module hóa JavaScript ngay từ khi nó được thực thi trên trình duyệt của bạn, và dễ dàng để gỡ lỗi hơn. Các modules AMD dùng trong phạm vi cục bộ cho các biến, tránh lộn xộn các biến toàn cục trong các không gian tên và cung cấp độ phân giải tên nhanh hơn. AMD là một đặc điểm kỹ thuật tiêu chuẩn với nhiều sự triển khai, vì vậy bạn không bị bó buộc vào bất cứ cách triển khai duy nhất nào đó - các modules AMD có thể được dùng với bất cứ trình nạp AMD nào.
Waiting for the DOM - Chờ đợi cho đến khi nạp xong DOM
Một trong những điều phổ biến mà bạn cần phải thực hiện với các ứng dụng web là để đảm bảo rằng DOM của trình duyệt có sẵn trước khi thực hiện mã. Nó thực hiện qua module AMD đặc biệt có tên là "plugin" (trình cắm/phụ tùng :v) . Các plugins có thể được yêu cầu như bất cứ một module nào khác nhưng các chức năng đặc biệt của chúng chỉ thực hiện bởi việc thêm dấu chấm than "!" khi kết thúc việc xác định một module. Trong trường hợp sự kiện DOM đã sẵn sàng, Dojo cung cấp plugin <dojo/domReady>. Đơn giản, ta chỉ cần <include> plugin này như một phần phụ thuộc vào bất kỳ lệnh gọi <require> hoặc <define> và hàm callback sẽ không được phát sinh cho đến khi DOM đã sẵn sàng
require([Xem ví dụ ở đây: http://jsfiddle.net/5nkopbb1/1/light/
'dojo/dom',
'dojo/domReady!'
], function (dom) {
var xinChao = dom.byId('xinChao');
xinChao.innerHTML += ' from Dojo!';
});
Ví dụ trên đơn giản là thêm một số văn bản vào phần tử <xinChao> - những điều đó chỉ có thể được thực hiện một khi DOM đã được nạp xong (chúng ta đã không sử dụng điều này trong các đoạn mã trước, những lúc mà thẻ <script> nằm dưới cùng trong thẻ <body> - điều này sẽ hoãn việc xử lý của các script cho đến khi DOM được nạp xong). Một lần nữa, lưu ý rằng các định danh mô-đun kết thúc với dấu chấm than "!"; không có điều này, module dojo/domReady sẽ chỉ đơn giản là chức năng giống như bất kỳ thành phần nào khác.
Trong một số trường hợp, tương tự như module <dojo/domReady>, chúng ta chỉ nạp một module cho việc tạo hiệu ứng trang và không cần tham chiếu tới nó. Trình tải AMD không biết điều này - tức là nó luôn thông qua các tham chiếu cho mỗi module trong mảng phụ thuộc đến hàm callback, vì vậy những modules nào của bạn không cần phải sử dụng chúng thì nên đặt chúng ở cuối cùng của mảng các phần phụ thuộc, và hàm callback sẽ bỏ qua chúng trong danh sách tham số.
Để biêt thêm thông tin trong chức năng thao tác DOM, bạn có thể tìm thấy trong hướng dẫn các chức năng của Dojo DOM Functions (http://dojotoolkit.org/documentation/tutorials/1.10/dom_functions/)
Adding Visual Effects - Thêm các hiệu ứng trực giác
Bây giờ chúng ta có thể phấn khởi lên bởi các ví dụ của chúng ta có thêm một vài hiệu ứng hình ảnh. Một module giúp chúng ta có thể tạo hiệu ứng cho trang web đó là <dojo/fx>. Hãy cùng thêm một hiệu ứng trượt vào thành phần xinChao với phương thức <slideTo> của <dojo/fx>:
require(['dojo/dom','dojo/fx','dojo/domReady!'],function(dom,fx){
//Một thành phần chúng ta có trước đây...
var xinChao = dom.byId('xinChao');
xinChao.innerHTML+=' from Dojo';
//...Nhưng bây giờ, cùng với hiệu ứng động!
fx.slideTo({
node: xinChao,
top: 100,
left: 200
}).play();
});
Xem ví dụ ở đây:Như bạn thấy, chúng ta đã thêm một thành phần phụ thuộc với <dojo/fx> ở từ khóa <require>, sau đó dùng module này để chạy hiệu ứng trong phần tử <xinChao> của mình
Để biết thêm chi tiết về hiệu ứng hay các hình ảnh động, bạn hãy tham khảo tại Dojo Effect và Aninmations
Using the Dojo Source - Sử dụng tài nguyên Dojo
CDNs thật là tiện dụng. Chúng ta dùng chúng trong ví dụ hướng dẫn, bởi vì điều đó có nghĩa là ta chỉ cần copy trực tiếp mã và không có sự thay đổi bất cứ điều gì để chúng làm việc cho bạn. Tuy nhiên chúng có vài nhược điểm:
*Hiệu năng, đó là phiên bản "built" của Dojo, có nghĩa là với mỗi module được giảm thiểu và tối ưu hóa để truyền tải hiệu quả trên Internet. Nó có nghĩa là khi bạn có vấn đề, thật khó để bắt lỗi.
*Họ yêu cầu người dùng của bạn phải truy cập Internet công khai để dùng ứng dụng của bạn. Trong rất nhiều trường hợp có thể có hoặc có thể không thực tế.
*Cần phải tốn công hơn để tùy chỉnh các modules của riêng bạn.
*Nếu bạn muốn sản phẩm hóa ứng dụng của mình, một phiên bản tích hợp của Dojo phù hợp với mục tiêu ứng dụng và trình duyệt cụ thể sẽ tăng hiệu suất ứng dụng hơn, điều mà bạn không thể đạt được với một bản build CDN theo kiểu "one-size fits all" (tạm dịch: một cỡ cho tất cả - nghe như quần áo may sẵn ấy!).
Để bắt đầu phát triển ứng dụng Dojo, thực hiện các bước sau để sử dụng tài nguyên của Dojo
1. Tải xuống Dojo (ở phía gần cuối có các gói mà bạn cần tải xuống)
Nếu bạn đã có kinh nghiệm với git hoặc GitHub , bạn có thể tạo các bản sao từ GibHub . Tối thiểu, hãy tải dojo . Bạn cũng sẽ cần dijit , dojox , và util
2. Xả file nén Dojo vào trong thư mục dự án của bạn, ví dụ:
hellodojo.html
demo/
myModule.js
dojo/
dijit/
dojox/
util/
3. Tải <dojo.js> cục bộ, tốt hơn là từ CDN:
<script src="dojo/dojo.js"></script>4. Cập nhật cấu hình gói của bạn
var dojoConfig = {
async : true,
baseUrl: '.',
packages: [
'dojo',
'dijit',
'dojox',
'demo'
]
}
Getting Help – Tìm kiếm giải pháp khi gặp lỗi
Mỗi khi bạn gặp nhầm lẫn hoặc khó khăn thì bạn không phải là người duy nhất đâu! Các tình nguyện viên luôn sẵn sàng hỗ trợ qua email trong dojo-interesting mailing list hay qua IRC . Nếu bạn nghĩ bạn đã tìm thấy lỗi trong tài liệu của chúng tôi hay hiểu lầm, khó hiểu, hãy phản hồi ở cuối mỗi tài liệu để cho chúng tôi biết.
Nếu bạn cần trợ giúp gấp hoặc bí mật, hoặc có một vấn đề không thể giải quyết được với các tình nguyện viên của chúng tôi, hỗ trợ thương mại commercial Dojo support và hội thảo đào tạo training workshops luôn sẵn có
Where to next ? – Tiếp theo ta sẽ học gì ?
Bắt đầu với bộ công cụ Dojo thật đơn giản để thêm một thẻ <script> và yêu cầu (<require>) vài modules, nhưng phạm vi lớn và khả năng của Dojo đồng nghĩa với việc chúng ta mới chỉ lướt sơ qua về Dojo. Tùy thuộc vào nhu cầu của bạn, có vài hướng đi để bạn chọn lựa:
*Nếu bạn đã sử dụng Dojo trước đây và muốn hiểu nhiều hơn về thế giới AMD và "baseless" Dojo, hiểu thêm về những khái niệm đã thay đổi, bạn nên xem qua bài viết Modern Dojo
*Nếu bạn thích khi thêm một vài thuộc tính và hiệu ứng cho web hiện tại hoặc máy chủ điều kiện, bạn sẽ muốn xem phần tiếp theo Using dojo/query , Event with dojo và effect hay aninmations
*Nếu bạn muốn thêm Ajax cho trang web của mình, Ajax with dojo là điều bạn đang tìm kiếm.
*Nếu bạn đang tìm cách để tích hợp thư viện widget vào website hoặc ứng của bạn, hãy xem Creating Template-based Widgets và tutorial series on Dijit widgets
*Nếu bạn đang cố gắng học nhiều hơn về kiến trúc ứng dụng web phức tạp và phát triển các khả năng hữu ích của Dojo, hãy xem qua phần Core Concept
*Nếu mục đích của bạn là ứng dụng mobile, mời bạn xem Getting Started with dojoX/mobile .
Cho dù kết quả bạn mong muốn thế nào, Dojo cung cấp bộ công cụ mã nguồn mở hàng đầu, nhờ vậy có thể giúp bạn hoàn thành dự án của mình nhanh hơn cùng những kết quả bất ngờ. Chúng tôi đang chờ đợi bạn phát triển cùng chúng tôi.
