有不少朋友，在使用演示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层架构）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。