文档章节

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

 半个诗人
发布于 2016/12/08 15:40
字数 1185
阅读 23
收藏 0

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

下面是我的手稿:

 

 

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

 

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 2
码字总数 2909
作品 0
普陀
私信 提问
面向UI编程:ui.js 1.0 粗糙版本发布,分布式开发+容器化+组件化+配置化框架,从无到有的艰难创造

有朋友提出一看来是懵逼的,根本不知道什么是面向UI编程的思想,下面是我之前写的博客,描述的这中思想,下面为地址,参考下就明了很多了。 1. 前端思想实现:面向UI编程 2. 面向UI编程框架:...

仲强
2017/02/10
0
0
jQuery UI 1.11.1 发布

jQuery UI 1.11.1 发布,此版本是个维护版本,包括了许多 Core, Widget Factory, Position, Draggable, Droppable, Resizable, Autocomplete, Datepicker, Dialog, Progressbar, Slider, Sp......

oschina
2014/08/14
6.7K
6
基于主流开源技术的Java WEB应用开发框架

项目简介 集结最新主流时尚开源技术的面向互联网Web应用的整合前端门户站点、HTMl5移动站点及后端管理系统一体的的基础开发框架,提供一个J2EE相关主流开源技术架构整合及一些企业应用基础通...

EntDIY
2016/01/26
8
0
面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚

开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累。 什么是框架?   百度的解释:框架(Framework)是整个或部分系统的可重...

仲强
2017/02/16
0
0
jQuery UI 1.11.3 发布,jQuery 的 UI 框架

jQuery UI 1.11.3 发布,这是一个维护版本,修复了 Core, Position, Resizable, Sortable, Accordion, Datepicker, Selectmenu, Slide, and Tabs 等模块的相关 bug,完整记录请看 changelog.......

oschina
2015/02/13
8.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
10
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
13
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
18
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
昨天
11
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
昨天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部