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中，其他框架的朋友也可以借鉴，也希望大家能提出宝贵的建议。

　　


[b]Smart UI [/b]

　　一、从内容上来说，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，而且其中还有着详细的划分。

　　[b]CSS结构[/b]

　　


分成四块部分组成，

　　1. Global: 全局样式初始化和设置，还要页面主体布局的设置；

　　2. BaseLayout：主要是各种基础表单的布局样式控制。Smart UI为了实现大部分应用场景的动态生成，在htm结构上是有一定的规范的，但可以灵活的运用这些规范，配合设置样式达到预期的效果。【使用非动态生成的自定义开发模式时没有此问题】。

　　3.Controls：各种控件（JQ plugin）的样式预设样式，除了少数特殊的控件需要一定的结构外，大多数的控件都支持自定义模版，设置样式十分方便。但默认的Smart UI中会给出比较合理的结构以及对应的样式，会比重新设置简单方便很多。

　　4.Site：泛指Web站点的具体样式，作为上面三个文件的补充，可以根据需求自设。

　　此外，还可以使用一个Sytle.css文件统一引用上面四个文件的出口，只需要在页面上应用一个文件。【这个根据情况来，使用css文件引用其他css文件在网速慢的时候，可能会加载失败，导致样式丢失的情况。建议在开发时统一，发布时分别引用】。

　　[b]JS结构[/b]



如图，这个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