Dojo Quick Start Guide 快速入門 基本架構

來源:互聯網
上載者:User
首先,下載 Dojo 庫:http://www.dojotoolkit.org/downloads

  放了方便測試,我將檔案將解壓到 Web Server 的 "js/dojotoolkit" 檔案夾中,如果你願意,也可以綴上版本號碼。最後的目錄結構應該像這樣:

  明確 dojo.js 檔案的路徑非常重要。只要 dojo.js 能被正確裝入頁面,package system 會自動處理對相關模組的引用和依賴。

  The Dojo Book,提供了大量的指南和教程,更深入的介紹了獲得各種 dojo 不同版本的方式。

  也可以從 Google 的公用庫引入指令碼,如下:http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js

  基本架構

  下面是一個 dojo 程式的基本架構:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Dojo Toolkit Test Page</title>   
   
    <!--  裝入Dojo 基本庫 -->
    <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
        djConfig="parseOnLoad:true, isDebug:true">
       </script>
   
    <script type="text/javascript">
    /* 其他的指令碼程式 */
    </script>
   
    <style type="text/css">
    /* 樣式表在這 */   
    </style> 
 
    </head>
    <body><!-- 頁面內容 -->
        <h1 id="testHeading">Dojo 基本架構</h1>       
        <div id="contentNode">
        <p>一些內容</p>
    </div>
    </body>

</html>

  配置 Dojo 啟動參數

  dojo在裝入時應該進行參數配置,兩個最重要的參數是 parseOnLoad 和 isDebug 。第一個參數確定是否在頁面裝入時解析 dojo 組件和內建標籤;第二參數開啟或關閉調試資訊。有兩種配置方式:

  第一種方式在 <script> 標籤中配置,如下:

<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
    djConfig="parseOnLoad:true, isDebug:true">
  </script>

  第二種方式在 dojo.js 裝入之前,建立一個全域變數 djConfig,如下:

<script type="text/javascript">
    var djConfig = {
        isDebug:true,
        parseOnLoad:true
    };
</script>
<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"></script>

  兩種方式有同樣的效果。

  如何開始?

  由於各種版本的瀏覽器對頁面裝入 "ready" 狀態有不同的定義,所以 Dojo 提供了一個 dojo.addOnLoad  函數,程式從這裡面開始,如下代碼:

// 某個函數
    var init = function(){
        console.log("I run after the page is ready.");   
    };
        //ready 後運行上面的函數
    dojo.addOnLoad(init);
   
    // 這是另一種形式,用匿名函數
    dojo.addOnLoad(function(){
        console.log("I also run, but second. ");
    });

  重要提示:不要用 <body onLoad="someFunc"> 和 window.onload=someFunc 開始你的函數,而應該使用 dojo.addOnLoad(someFunc)

  更多

  通過 dojo.require() 函數,package system 會自動裝入所有你需要的代碼。下面的例子將裝入一個 Button 和一個 TitlePane,系統會自動找到他們的代碼,如下:

dojo.require("dijit.form.Button");
    dojo.require("dijit.TitlePane");
    dojo.addOnLoad(function(){
        dojo.byId("testHeading").innerHTML = "We're on our way!";
        console.log("onLoad fires after require() is done");
    }); 

  每個模組都有自己的 dojo.require() 參數,你可以從 Dijit API pages 找到他們

  繼續

  在上面的dojo.byId() 函數,通過 id 來選擇元素,並改變了元素的 innerHTML  值。後面我們將瞭解選取器。

  將上面的代碼放到架構中的“其他指令碼程式”位置處,然後運行,如果你看到了: "We're on our way",恭喜!

  如果出現了錯誤,可以從 FAQ 尋找常見的錯誤資訊。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.