## UI2前端框架基礎02:框架結構圖和目錄 本篇文章通過框架示意圖理解UI2的框架構成和核心，并對應介紹system目錄。 ## UI2框架結構圖 ## [](https://box.kancloud.cn/2015-09-22_560158f0baa65.png) 看框架結構圖，為了說明方便，每個框的左上角都做了數字標記。我們由底層向上理解： * 最下層(框0)是模塊化框架，UI2目前遵循AMD模塊化標準，采用requirejs實現。這是UI2的基礎，UI2所有的資源(js、css、html等)都是模塊，都采用模塊化方式引入，采用模塊化方式管理依賴； * 第二層(框1)是組件化框架，組件化框架提供組件規范和組件生命周期管理能力，組件化框架的實現本身也是js模塊，并且依賴公共模塊MVVM和JQuery； * 第三層是具體的組件層，按照組件化規范實現的各種組件，每個組件有一個主js模塊代表該組件，除了這個主js模塊，每個組件還可包含多個js模塊、css模塊和圖片等其它資源。UI2已經提供了豐富的組件，UI2自身提供的這些組件基于bootstrap樣式庫。當然，如果希望采用別的樣式庫，也可引入別的樣式庫，并且基于此樣式庫來制作組件； * 第四層頁面層，首先一個頁面由.w、.js和.css模塊構成，在邏輯上頁面由多個組件組成，同時頁面也可以包含子頁面。 ## UI2框架的目錄組織 UI2框架核心在UI2/system/lib和UI2/system/components兩個目錄里。 ### UI2/system/lib目錄 [](https://box.kancloud.cn/2015-09-22_560158f72654a.png) system/lib 目錄里是UI框架的核心js源碼，這些js源碼是按模塊化的視角組織的，包含了很多js文件。 ### UI2/system/components目錄 [](https://box.kancloud.cn/2015-09-22_560158f78b747.png) system/components目錄里包含了UI2自帶的所有組件，有bootstrap組件、justep組件和標準html標簽。fragment組件稱為組合組件，就是對前面這些組件的常用組合形成再形成一個組件，方便使用。 ## 模塊合并 lib和components目錄包含了很多js模塊(文件)、css模塊（文件），這些js文件和css文件會被壓縮合并成大的文件比如 core.min.js、common.min.js、comp.min.js等，運行時只會請求這些大的壓縮合并后的js，這樣請求的數量大大減少，可以加快運行速度。當然，如 果調試需要，也可以刪除大的壓縮合并js，這樣系統會自動請求小的js源碼，以方便調試系統的js。合適的js合并策略，可以提升頁面加載性能，根據常用 需求，系統已經配置好一套合并js的策略。當然如果有個性化需要，可以自定義如何壓縮和合并js包，而不用系統已經配置好的壓縮合并策略。關于這部分，后 續文章會講到如何自定義壓縮和合并js。