JavaScript DOJO使用總結

來源:互聯網
上載者:User

對以前項目中用到的dojo架構進行一個架構式的總結,以備參考學習。

主要組成... 1

開發注意... 3

Dojo代碼約定... 3

Dojo形式的指令碼庫... 4

Dojo Build. 4

Dojo ToolBox. 5

推薦資料... 6

參考執行個體... 6

主要組成

包括三個部分:

Dojo: 架構核心

Dijit: 基於dojo的UI介面部分,主題使用css控制

Dojox: 其他擴充

Util:打包風格檢查等工具[在原始碼的發布包中]

頁面應用庫的步驟

Dojo初始庫

形式1

<script type="text/javascript">
djConfig = { parseOnLoad: true, isDebug: true};
</script>
<!-- now load dojo.js; note no djConfig attribute -->
<script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js">
</script>

形式2

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

注意

如果寫成

<script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"/>形式不能正常工作

引用使用的庫

Dijit和CSS

只有在使用了dijit時才用

       <% #if DEBUG %>
        <style type="text/css">
               @import "Scripts/Dojo/dijit/themes/tundra/tundra.css";
               @import "Scripts/Dojo/dojo/resources/dojo.css";
        </style>
        <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djconfig="parseOnLoad: true, isDebug:true">
        </script>
        <script type="text/javascript">
               dojo.require("dojo.parser");
               dojo.require("dijit.dijit-all"); //開發狀態下包含所有dijit             
</script>
        <% #else %>
        <%--這個是發布目錄,執行Scripts\Dojo\util\buildscripts\my.bat 即建立出來--%>
        <style type="text/css">
               @import "Scripts/Dox/dijit/themes/tundra/tundra.css";
               @import "Scripts/Dox/dojo/resources/dojo.css";
        </style>
        <script type="text/javascript" src="Scripts/Dox/dojo/dojo.js" djconfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
               dojo.require("dojo.parser");
               dojo.require("dijit.dijit");

</script>
<% #endif %>

Dijit使用

[HTML標籤擴充形式]

<div class="formContainer" dojotype="dijit.layout.TabContainer">
               <div dojotype="dijit.layout.ContentPane" title="Personal Data">
                     <label for="first_name">
                            First Name:</label>
                     <input type="text" name="first_name" id="first_name" dojotype="dijit.form.ValidationTextBox"
                            trim="true" propercase="true" required="true" size="30" invalidmessage="You must enter your first name" /><br />
        。。。

Dojo庫的組織思想是按照小的功能塊進行組織的,因此可以看到dojo dijit dojox目錄下有很多的檔案,dojo.js內含的功能包括:瀏覽器環境屬性、語言擴充、非同步編程、DOM編程、XHR編程、物件導向和Dojo載入器;其他的功能都在獨立的js檔案中,如html解析

Dojo/ parser.js 引用這個功能使用dojo.require("dojo.parser") [dojo比較推薦使用HTML標籤擴充的形式使用dijit]

開發注意

Ø 如果在本地查看demo檔案,在Firefox3中預設不能正確顯示,修改方法如下:

Firefox地址欄輸入about:config,找到security.fileuri.strict_origin_policy改為false

Ø 開發建議、跟蹤

console.dir

console.log error debug

Ø 庫

最好使用原始碼的指令碼庫,然後在項目發布時使用dojo的打包系統根據需要打包,以減少js檔案的大小

Ø 推薦工具

由於需要跟蹤用戶端的指令碼處理情況,因此瀏覽器端的工具非常重要

Firefox: FireBug

IE: Developer Toolbar, HttpWatch Professional是個更好的工具

Dojo代碼約定

Dojo中的代碼檔案命名規範

普通的模組是小寫字母

如果一個模組定義了一個建構函式,那麼它的名字將首字母大寫,表示這個模組定義了一個類

少數的指令碼和模組的名字永底線開頭,表示私人的,只在內部供其他模組使用,需要時自動載入這些指令碼,可以忽略

據此規則,可以看到指令碼庫的檔案類別

Dojo形式的指令碼庫
/// <reference path="../Intellisense/dojo.aspx"/>
dojo.provide("My.Shape");
dojo.declare(
       //the name of the constructor function (class) created...
       "My.Shape",
       //this is where the superclass (if any) goes...   
       null,
       //this object contains everything to add to the new class's prototype...
       {
       //default property values can go in prototype...
       color: 0,
       //here is the single prototype method...
       setColor: function (color) {
             this.color = color;
       }
}
  );

以上是Dojo形式的類

Dojo Build

http://www.ibm.com/developerworks/cn/web/0912_shenjc_dojobuild/ 這個是打包的說明

dependencies = {
       //Layers屬性中每一個對象都指定了如何把多個JavaScript資源合并成一個資源
       layers: [
       {
              name: "dojo.js",
              dependencies: [
                           "dojo.parser",
                           "dojo.string"
                    ]
       },
       {
              name: "../dijit/dijit.js",
              layerDependencies: ["dojo.js"],
              dependencies: [
                           "dijit.dijit",
                           "dijit.layout.ContentPane",
                           "dijit.layout.TabContainer",
                           "dijit.form.ValidationTextBox",
                           "dijit.form.DateTextBox",
                           "dijit.Dialog"
                    ]
       },
       {
              //打包的資源檔的檔案名稱,相對於dojo目錄
              name: "../My/demodojo.js",
              //本層依賴的其他資源打包
              layerDependencies: [
              ],
              //打包資源套件含的模組名
              dependencies: [
                    //指定模組名稱後,打包程式自動載入對應的檔案併合並
                       "My.demodojo"
                    ]
       }
  ],
      //prefixes一個集合,集合中的每個元素給出了從模組名到模組路徑的一個映射[路徑名是相對於dojo/的
       prefixes: [
       //Dojo路徑預設包含
       ["dijit", "../dijit"],
       //["dojox", "../dojox"],
       ["My", "../My"]
  ]
}

上例是把js檔案分別放到dojo.js dijit.js和demodojo.js 三個檔案中,這樣發布的系統就下載的檔案數量就很少了

Dojo ToolBox

官方網站可以下載這個工具,包括API協助[需要線上狀態下安裝];打包工具等

推薦資料

http://dojotoolkit.org/

http://www.dojocn.com/

mastering dojo http://www.pragprog.com 網站可以下載例子代碼,本書有中文版本“精通Dojo”

該書對Dojo的方方面面進行了介紹

電子書也可以在http://ppurl.com上下載

參考執行個體

http://jsfkit.codeplex.com

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.