• 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

      

  • 相关阅读:
    总结:关于作用域的经典面试题
    解决JS拖拽出现的问题
    JS正则(3)总结
    JS正则(2)对正则的理解
    JS 闭包 正则(1)
    JS Date对象
    笔记
    9.13笔记
    9.12学习笔记
    9.11学习笔记
  • 原文地址:https://www.cnblogs.com/zhh8077/p/1882184.html
Copyright © 2020-2023  润新知