我的DOJO學習之路（一）

     新進公司，因為公司項目開發的架構跟之前的不一樣，要拋棄以前的easy-ui，去學習新的DHTML語言DOJO,特此做個記錄，方便自己以及后來者的學習。

     建造JavaScript富客戶端應用時，你會遇到大量令人煩惱的事情。瀏覽器的兼容性、對於降級（degradation）的支持、混雜在一起的DOM處理、還有那些鮮血淋淋的hack技巧（例如離線存儲），所有這些事情都會冒出來。使用這些DHTML語言類似EXTJS,EASYUI,LIGERUI,DOJO就是懶得自己造輪子，OK，現在進入正題，今天計划用DOJO的API做一顆動態樹。

   既然用到了DOJO，首先是加載package包，在shared文件夾下的Layout里加載配置包（3個CSS文件和一個JS文件，配圖。）

 

   本測試項目以公司的項目為參考，Dojo的包都在MESTResource下的Dojo文件夾內

DOJO主要由三大模塊組成：Core、Dijit、DojoX。

Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相關操作API。Dijit是一個可更換皮膚，基於模板的WEB UI控件庫。DojoX包括一些創新/新穎的代碼和控件：DateGrid，charts，離線應用，跨瀏覽器矢量繪圖等。Dojox是一個擴展庫，在DOJO中找不到的功能，可能在DOJOX中找到。

在MESTOEE中，沒有Core,Core一般單獨加載，Core 包提供一些實際有用的組件，包括高級動畫拖放、I/O、數據管理、國際化（i18n）、瀏覽器歷史管理。

既然要學習每個DOJO控件的功能，打算從動態加載樹入手，重新用Entity FrameWork+MVC+三層+DOJO實現動態樹和Grid的功能。因為EF作為一個優秀的ORM框架產品，可以更加快速建立對數據庫的連接。但是之后遇到了很多問題，因為MEST項目里采用 DataTable dtUserModule = DotNetService.Instance.PermissionService.GetModuleDTByUser(userInfo, userId);類似這種的方式獲取要進行JSON方法傳遞的DataTable對象，調試時通過監視獲得DataTable內容類似(附圖)形式

前台可以獲得效果：

 當點擊模塊時觸發onSelected事件將當前單擊模塊的id和para(所需要的除ID以

外的數據的封裝)傳遞到TreeHandler一般處理程序里，返回數據格式為（附圖）

在加載子級菜單時，DOJO樹為異步分布加載，先new ItemFileWriteStore()對象來緩存獲取的Data,再new ForestStoreModel()創建一個對外數據的模型，最后通過new Tree()來加載模型實現控制子節點的單機事件和展開下一級子節點事件。

通過斷點調試可以獲取數據（附圖）

分別對應單級菜單，多級菜單，多級菜單包含子節點的實例JSON數據，模擬測試數據，可以做出效果圖

    測試數據：

附AJAX動態樹的最終效果圖

其中前台JS中的onOpen事件每次都會觸發，當（!item.root）時，則觸發不是子節點的打開事件。
總結：

DOJO動態樹優點：

1.每一級菜單都通過AJAX動態加載，效率高，用戶體驗好。

2.DOJO中動態樹默認包含緩存功能，只需調用if（item.children）return;就可以緩存data數據，避免消耗資源。

3.功能細分為①儲存樹結構數據 var treeStore = new ItemFileWriteStore②定義樹結構模型var treeModel = new ForestStoreModel③加載樹結構 var mTree = new Tree，后台獲取數據為identifier，label，Items內加載Item內容，結構簡單清晰。
缺點：需要對DOJO有一定了解，因為需要在頁面內加載data-dojo-type配合使用。至此，DOJO動態加載樹學習完畢。

 

 

 

注解：前台動態樹JS源碼太長，且包含公司項目內容，如有需要學習的，可以直接給我留言索要，只供學習之用，敬請諒解。