dojo Tamplate
環境
- CSS3
- HTML5
- ECMA5 Javascript
- dojo Toolkit 1.10
- Chrome 43.0
基本模版
1 <!DOCTYPE html>
2 <html lang="zh-Hant-TW">
3 <head>
4 <title>dojo Configuration</title>
5 <meta charset="utf-8" />
6 <link rel="stylesheet" href="js/libs/dijit/themes/claro/claro.css">
7 <script>
8 dojoConfig={
9 async:true,
10 parseOnLoad:false,
11 baseUrl:"js/",
12 packages:[
13 {name:"dojo", location:"libs/dojo"},
14 {name:"dijit", location:"libs/dijit"},
15 {name:"dojox", location:"libs/dojox"},
16 {name:"utils", location:"app/utils"}
17 ]
18 }
19 </script>
20 <script src="https:js/libs/dojo/dojo.js"></script>
21 <head>
22 <body class="claro">
23 // Put HTML and dojo declarative code here
24 </body>
25 <script>
26 var app={};
27 require([
28 "dojo/parser",
29 "dojo/ready"
30 ],
31 function(
32 parser,
33 ready
34 ){
35 parser.parse();
36 ready(1, function(){
37 // 所有用到任何 dijit 的程式碼，都要放在這個函式裡面
38 // 否則在調用 dijit 時，很可能 dijit 當時尚未建立，因而得到 null 值
39 });
40 });
41 </script>
42 <html>
第 6 行載入所要使用的主題樣式，範例裡用的是 claro 主題樣式。 第 9 行的 async:true 設定使用 AMD (Asynchronous Module Definition) 模式。 第 11 行 baseUrl 的值是包含此段程式碼的 HTML 頁面到存放 dojo 套件的基本相對路。換句話說，baseUrl + location 即是 name 套件對 HTML 的完整相對路徑 。例如： dojo 這個套件的相對位置即為 js/libs/dojo ；而 utils 套件的相對路徑即是 js/app/utils。其餘套件的相對路徑，以此類推。 第 20 行的作用在載入最基本的 dojo 模組。 第 22 行指定 body 的 class 為 claro，用以套用主題樣式。這裡 class 的值一定要給，同時要和第 6 行中載入的主題樣式名稱一致。 第 26 行定義一個名為 app 的全域變數 (global variable)，用來掛載未來程式中的變數及函式，在流覽器的主控台 (console) 中，可以用 window.app 這個變數名找到它。 第 27 到 30 行，使用 require() 函式，指定程式中所要使用到的 AMD 模組。parser 會在剖析 HTML 碼時，自行下載在 HTML 碼中宣告的 dijit AMD 模組； 因此，在 require() 函式中，就無須特別指定己宣告的 dijit 模組。 第 30 到 32 行，將至載的 AMD 模組以參數的方式，傳入回呼 (callback) 函式中。要注意的是參數的先後次序和 require() 下載 AMD 模組時所列示的先後次序，兩者必須一致。 第 34 行呼叫剖析器 (parser) 對 HTML 碼進行剖析 (parse)，同時根據宣告進行 dijit 的建立。在 dojo 1.8 版後，剖析以非同步進行。因此，有用到在 HTML 碼中宣告建立之 dijit 的程式碼，都要放在 ready() 回呼函式中執行；否則，程式碼在執行時，用到的 dijit 可能還沒有建立完畢，因而造成錯誤。 第 35 行的 ready() 內回呼函式中所包含的程式碼，只會在 HTML 碼剖析完畢，而且所有的 djijt 都建立之後，才會執行。ready() 函式可以多次呼叫，第一個參數的數值決定呼叫的先後次序，數值愈小的愈早執行。
沒有留言:
張貼留言