面向UI编程框架:ui.js框架思路详细设计

由于上一次的灵光一闪,萌生了对面向UI编程的思想实现。经过一段时间的考虑和设计,现在将思想和具体细节记录下来:

具体思路描述:

  1. 在UI.config文件中,配置所有参数,比如页面模板、所有组件、组件控制、接口注入
  2. ui.js根据配置文件中所选择的模板,进入布局模板库中找到所加载的模板
  3. 将模板首先注入页面之中。
  4. ui.js分析页面模板布局中所需要加载的组件以及其他操作,将这些组件数据注入到数据中转池
  5. 然后数据中转池,将组件信息传递给ui.js,需要哪些组件和操作
  6. ui.js将中转池传过来的组件信息通过配置文件从组件库中去寻找
  7. 寻找到模板所需组件注入页面,数据中转池配合组件的js,对组件进行初始化。直到页面加载完成

配置文件的配置设计:

UI.config=({
    //配置路径
    baseUrl:"/",
    //注入模块
    template:{
        //布局模板名称:模板地址+是否装载
        "layout1":["layout/layout1.tpl",true],
        "layout2":["layout/layout1.tpl",false]
    },
    //注入接口
    interface:{
        "interface1":"www.123.com/interface1",
        "interface2":"www.123.com/interface2",
        "interface3":"www.123.com/interface3",
        "interface4":"www.123.com/interface4",
        "interface5":"www.123.com/interface5",
    },
    //注入组件
    module:{
        //组件名:组件地址+组件是否装载+接口注入
        "md1":["module/header.mold",true,["interface1","interface2"]],
        "md2":["module/body.mold",true,["interface1","interface2"]]
    },
    //组件逻辑js
    data:{
        //js所需接口和其他数据都需数据中转池配合
        "md1_js":"modulejs/md1.js"
    }
});

  

数据中转池设计思路:

具体思路描述:

  1. 每个组件在配置文件中生成之后,导入ui.js中处理后,会生成每个组件对应的uuid(唯一标识)
  2. 在进行数据流转和互通的时候,必须通过uuid进行存储和使用
  3. 对于只使用一次和永久存放的数据进行标记和回收
  4. 配合组件进行变更,组件加载数据加载,组件卸载数据卸载
  5. ...

面向UI思想框架优势:

  1. 高度复用html,如果一个更通用的模板,可以无限次复用(可以更换接口)
  2. 灵活变更网页布局。传统页面都是布局好了之后无法变更,UI引入布局模板,可以随意进行布局,只要最后引入组件正确即可
  3. 对所有接口进行了统一管理,每个组件进行分别注入,按需使用
  4. 可进行全球分布协作开发,每个组件配置地址可以在互联网的任何角落,我只需要按着地址可以取到我的组件和处理js即可
  5. 可一个项目,由互联网上各处的组件拼凑完成,如果后台可支持跨域,那么一个项目前后台都可是互联网上的资源,而我们部署的服务器只是提供一个展示入口
  6. 开发只需要专注每个组件开发即可,一个一个组件开发,开发完成通过配置装载上线
  7. 对于项目局部进行更新,可直接卸载一个组件,不需要关闭整个服务器。更新完成之后,更新组件,重新装载上线
  8. 每个企业可维护自己的一套组件库,高度复用。新项目如果遇到以前开发过的组件直接配置路径和参数使用。
  9. 可将配置文件参数通过后台获取,动态维护所有组件。方便运维
  10. 对于接盘侠(维护人员)来说,有更方便和快捷的方式进行处理(局部组件开发规范参考自我总结的高效开发和维护方案)
  11. 更使用于单页应用,因为只有针对于局部刷新,加载速度比一般网页速度更快
  12. ...我唯一能想到的就这么多,我会将这个项目开源,希望更多的志同道合的人,一起开发更强大的UI.js

PS:现在只是对思路做一个详细设计,在开发中可能会遇到各种各样的问题,而且该思路是我的第一次起草,可能不是很完善,如果大家有更好的思想和灵感,希望大家不吝赐教。这段时间先把基础版本写好,然后公布成开源项目出去,以后欢迎大家一起完善。

下面是我的手稿:

我是码农,我不喜欢被代码玩弄,我喜欢用代码去改变世界,希望这世界更美好!!!加油,共勉!!!!

时间: 2024-12-18 07:35:57

面向UI编程框架:ui.js框架思路详细设计的相关文章

构思一个在windows下仿objc基于动画层ui编程的ui引擎

用c/c++编程有些年了,十个指头可以数齐,在涉入iOS objc开发后,有种无比舒服的感觉,尤其在UI开发上. 在QuartzCore.framework下动画和透明窗口等许多效果的事都变得那么方便和自然.因为在windows窗口机制中没有动画和透明窗口(Aero 除外)等效果的引擎层,还有GDI中不支持ARGB,开发中都要依靠不断重复而且大量的BitBlt和Timer来完成,工作量与开发iOS不可比. 大体上就是尝试引入UIKit.framework那样的编程体验.首先要有QuartzCor

JS框架

s框架就是将常用的方法进行封装,方便调取使用.一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方法,它为构件复用提供了上下文(Context)关系.因此构件库的大规模重用也需要框架.js框架就是对js各种功能的封装和抽象,使得在使用的时候具有简便性和更好的兼容性,并且可以扩展框架中的内容.因为直接用js会有兼容性问题,js框架一般预处理了很多兼容性问题,实现了很多常用操作,减少工作量,当然使用

i18next-页面层语言国际化js框架介绍

因为工作需要,最近研究了下网站语言国际化的问题,根据当前项目架构,寻求一种较好的解决方案.首先总结下项目中语言切换实现方式大概有以下几种: 1,一种语言一套页面,如:index_CN.html,index_TN.html,index_EN.html   根据用户当前使用语言来展示对应的页面.   这种方式比较常用,也比较理想,性能不错,但是开发使用的时间就多,每个页面要多做几遍. 2,后台定义变量,根据当前语言返回对应语言信息   这种方式不好使,麻烦,页面所有静态显示文本处都需要定义变量,从后

[转] 国内外最全面和主流的JS框架与WEB UI库(强烈推荐)

国内外最全面和主流的JS框架与WEB UI库... 当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家都会使用这些框架或库. 本文整理了国内外最全面和主流的JS框架与WEB UI库,里面有许多人已经十分熟悉,比如JQUERY.当然也有很多是陌生的,可以通过本文了解他们各自的优缺点,或许你能找到更好用的也说不定! 几乎所有的富 Web 应用都基于一个

国内外最全面和主流的JS框架与WEB UI库

当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家都会使用这些框架或库. 本文整理了国内外最全面和主流的JS框架与WEB UI库,里面有许多人已经十分熟悉,比如JQUERY.当然也有很多是陌生的,可以通过本文了解他们各自的优缺点,或许你能找到更好用的也说不定! 几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架

从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端

Hybird框架UI重构之路:一、师其长技以自强

这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不断发展的,这里开始我讲述我重构Hybird框架的UI的这三个月(2014-11——2015-1),而在重构之前,预先调查了目前所了解的几个混合应用的框架,师其长技以自强. PS:Hybrid应用是web页面与原生壳(Android.IOS)的结合最后打成安装包的应用. 重构的前奏曲: ApiClou

Hybird框架UI重构之路:五、前端那点事儿(HTML、CSS)

上文回顾 :Hybird框架UI重构之路:四.分而治之 这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构 在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中显示的主体内容才是页面,一个HTML容器中可以存放1个或者多个页面,每个页面放置于section中.而一个页面(section)中必有主体内容(content),也有可能包含头部内容.底部内容,甚至一些侧滑菜单等. 所以,以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如

<kendo UI>第一篇:kendo框架的基本介绍

这是我第一次在CSND上写技术博文,这篇博文也是我从事软件开发之后的第一篇博文.以前,我基本上都是用的Easy UI,Easy UI在中国推广的非常好,有广泛的开发者用户群,也有自己的官方社区论坛,官方的中文文档也十分详细,不像Kendo UI,因为很多核心部件收费,导致在中国推广地非常缓慢,初学者自学起来会很困难,我也是刚接触这个UI框架只有几个月,但是我觉得现在的确是迫不及待了.在百度上搜索关于Kendo UI的资料也很少,所以,我想利用自己算是已经入门的初学者技术,也去引导正在使用或者想要