JQuery Smart UI 简介（五） — 框架设计【前篇】（前台UI层架构）
有不少朋友，在使用演示demo時，出現了打不開access數據庫的情況，經園友@smalltide的幫助下，找到了問題，數據層讀取默認連接信息時有誤（該問題也可能存在其他多數據并存的系統），暫時不更新源代碼了，等后面一起更新，遇到的朋友請指定一下數據庫，在DataAccess項目下將DBHelper類中，將 EDatabase DB = new EDatabase()，改成web.config中的連接名稱 ,EDatabase DB = new EDatabase("farm").
Smart UI的框架，主要包括UI層（Smart UI）、數據接口、業務層、數據層四個部分。今天主要講解UI層，這部分與以往通常框架的架構不同的是，為純前臺的開發架構，css+html】，css和js都有著詳細的分層，不僅在Smart UI中，其他框架的朋友也可以借鑒，也希望大家能提出寶貴的建議。
- Smart UI
一、從內容上來說，Smart UI要有五大部分組成：
1. Basic Layout :
基本布局，包括頁面的Head、Body、Foot、Search、Edit、View等公共的htm布局基礎結構的預設。
2. Basic CSS :
基礎樣式，包括全局樣式初始化，基本布局樣式、各種基本表單，控件樣式。
3. Core（js）：
核心JS庫，完成Smart UI的核心操作
4. JQ Plugins ：
各種JQ的插件庫，包括Smart UI自帶的，和其他外部引入的插件。
5. Components ：
組件庫，封裝的各種通用的業務組件，例如：數據字典、信息發布、圖片展示等等。【這個內容主要就靠日常的積累以及以后使用Smar UI朋友的分享】
二、從結構上來說，主要是CSS和Javascript，而且其中還有著詳細的劃分。
- CSS結構
分成四塊部分組成，
1. Global: 全局樣式初始化和設置，還要頁面主體布局的設置；
2. BaseLayout：主要是各種基礎表單的布局樣式控制。Smart UI為了實現大部分應用場景的動態生成，在htm結構上是有一定的規范的，但可以靈活的運用這些規范，配合設置樣式達到預期的效果。【使用非動態生成的自定義開發模式時沒有此問題】。
3.Controls：各種控件（JQ plugin）的樣式預設樣式，除了少數特殊的控件需要一定的結構外，大多數的控件都支持自定義模版，設置樣式十分方便。但默認的Smart UI中會給出比較合理的結構以及對應的樣式，會比重新設置簡單方便很多。
4.Site：泛指Web站點的具體樣式，作為上面三個文件的補充，可以根據需求自設。
此外，還可以使用一個Sytle.css文件統一引用上面四個文件的出口，只需要在頁面上應用一個文件。【這個根據情況來，使用css文件引用其他css文件在網速慢的時候，可能會加載失敗，導致樣式丟失的情況。建議在開發時統一，發布時分別引用】。
- JS結構
如圖，這個Smart UI抽象出來的JS結構和層次關系，這里我簡單說明一下各自的用途：
JSConst：
全局常量庫，記錄各種常量信息，多語言內容，枚舉等等內容。
jsconfig：
公共配置庫，全局性配置，控件公共屬性配置。
sw-prototype：
主要是js原生對象的擴展和一些常用的方法，如：數據處理、加密、驗證等等。除了JSConfig【設置庫】和jsConst【常量庫】外不依賴于其他庫。
SW：
核心庫，封裝了核心的操作，頁面加載，全局內容等。
controls：
控件庫的組成就復雜一些，有三塊內容：
1.sw-controls-core ：控件核心庫支持庫，所有plugin的公共方法，統一的設置（如：ajax）。
2.plugin：各種Smart UI?插件和其他引入的JQ插件。
3.sw-controls：控件的統一出口，無論是Smart UI?插件還是其他引入的JQ插件的公共出口，根據具體情況，對控件初始化設置。這種方式，統一插件庫出入接口，使得管理和設置、版本更新、或者是控件更換都十分便利和安全。
?
sw-helper:
頁面幫助庫，頁面初始化，常用場景的支持，取值、賦值等。
Modals：
設置實體庫，整個前臺業務的設置核心內容，類似于數據中的表-字段的結構，設置各種屬性已達到對各種場景的支持，如：控件、列表、數據類型、格式、驗證等等。
Page：
頁面設置庫，master頁面、內容頁面路徑、uicode的設置。
site：
泛指網站的公告腳本庫，主要為業務處理。
pagecode ：
各頁面對應的代碼庫，htm + js，類似于aspx + cs，不過不是對應一個頁面而是一組功能。雖然js代碼可以直接放在內容頁面上，以這種page-code的方式有利于編碼的開發【智能感知、調試】。
前臺的結構已基本介紹完成，下篇介紹后臺方面的內容“統一數據接口”以及“業務層”，“數據層”怎么與數據接口結合。
?
注：所有內容皆為原創，轉載請注明出處 By JQuery Smart UI - Roy Zhang
轉載于:https://www.cnblogs.com/zhh8077/archive/2010/11/20/1882184.html
總結
以上是生活随笔為你收集整理的JQuery Smart UI 简介（五） — 框架设计【前篇】（前台UI层架构）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Psscor2 - 微软内部的SOS升级
- 下一篇： hadoop知识整理（4）之zookee