Dojo Modules 模組化管理

當我們在 <head> tag 中載入 dojo.js 時，其實我們並沒載入整個 dojo toolkit，我們僅載入了基本的的功能，例如the package system, events, Ajax, DOM helpers 以及其它常用的函式。

Dojo 是一個模組化的工具組( modular toolkit)，其中的套件系統( package system )可以讓開發者只載入需要用到的程式，也讓管理程式間的相關性( dependencies )變得更加容易。

長久以來，Javascript 的開發一直有一個問題，那就是缺少載入程式(類似Java, PHP, Python等 require 或 import 模組或class)的自身的套件系統，而 Dojo 使用一個很直覺的方式來解決這個問題， dojo.require，可指定載入的模組。

dojo.require

若不了解 dojo.byId 的用法，請參考Dojo Toolkit 1.6 - Hello Dojo! Hello World

下面的程式碼中可以看到，我們使用了 dojo.require("dojo.fx")，這一行宣告了與 dojo.fx 模組的相關性(dependency)，並且要求loader載入這個模組也就是除了在 <head> 載入了 Dojo 基底(base Dojo)，我們還需要用到 dojo.fx 模組。

Dojo 基底已經有納入許多常用的動態效果，例如 dojo.fadeOut 和 dojo.fadeIn，這些動態效果不需要額外使用 dojo.require 就可以使用，然而在這個範例中，我們所使用的動態效果 dojo.fx.slideTo 包含在dojo.fx 模組中，因此需要 dojo.require("dojo.fx") 方可使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- 載入dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
    <script>
        // Require dojo.fx 模組
        dojo.require("dojo.fx");
 
        // dojo.ready會等到所有 DOM 和相關的 script 載入完成才執行 包括上一行的 dojo.require
        dojo.ready(function(){
          dojo.byId("greeting").innerHTML += ", from " + dojo.version;
 
          // 讓字體滑動
          dojo.fx.slideTo({
            top: 100,
            left: 200,
            node: dojo.byId("greeting")
          }).play();
       });
    </script>
</head>
<body>
    <h1 id="greeting">Hello</h1>
</body>
</html>

Coyan Lee | 李可暘

20110421

Dojo Modules 模組化管理

dojo.require

沒有留言:

張貼留言