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

下面是我的手稿:

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

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

  1. 面向UI编程:ui.js 1.0 粗糙版本发布,分布式开发+容器化+组件化+配置化框架,从无到有的艰难创造

    时隔第一次被UI思路激励,到现在1.0的粗糙版本发布,掐指一算整整半年了.半年之间,有些细节不断推翻重做,再推翻再重做.时隔今日,终于能先出来个东西了,这个版本很粗糙,主体功能大概能实现了,但是还是有 ...

  2. Spring 08: AOP面向切面编程 + 手写AOP框架

    核心解读 AOP:Aspect Oriented Programming,面向切面编程 核心1:将公共的,通用的,重复的代码单独开发,在需要时反织回去 核心2:面向接口编程,即设置接口类型的变量,传入 ...

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

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

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

    用c/c++编程有些年了,十个指头可以数齐,在涉入iOS objc开发后,有种无比舒服的感觉,尤其在UI开发上. 在QuartzCore.framework下动画和透明窗口等许多效果的事都变得那么方便 ...

  5. JS框架

    s框架就是将常用的方法进行封装,方便调取使用.一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方 ...

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

    因为工作需要,最近研究了下网站语言国际化的问题,根据当前项目架构,寻求一种较好的解决方案.首先总结下项目中语言切换实现方式大概有以下几种: 1,一种语言一套页面,如:index_CN.html,ind ...

  7. 前端思想实现:面向UI编程_____前端框架设计开发

    引子,我去小说看多了,写博客竟然写引子了!!!不过,没引子不知道怎么写了.言归正传吧,前端这个职业,也就这几年刚刚火起来的职业,以前那个混乱的年代,前端要么是UI设计师代劳解决问题,要么就是后端程序员 ...

  8. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  9. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

随机推荐

  1. java的IO操作

    转自http://zhangbaoming815.iteye.com/blog/1578438 将字符串写入到txt文件中import java.io.BufferedWriter; import j ...

  2. bootstrap-treeview 关于checkbox选择框不显示的问题

    bootstrap-treeview.js  1.0.2 不支持checkbox,最后使用 bootstrap-treeview.js  1.2.0 解决此问题.

  3. 拷贝构造函数——防篡改

    对于普通类型的对象来说,他们之间的复制是简单的,比如: int a = 88; int b = a; 而类和普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量. #include <io ...

  4. 动态类型和匿名类型在asp.net webapi中的应用

    1.  动态类型用于webapi调用 假设需要调用一个webapi,webapi返回了一个json字符串.字符串如下: {"ProductId":"AN002501&qu ...

  5. 通过keepalived搭建MySQL双主模式的高可用集群系统

    1. 配置MySQL双主模式 1.修改my.cnf配置文件 默认情况下,MySQL的配置文件是/etc/my.cnf,在配置文件的[mysqld]段添加如下内容: server-id=1 log-bi ...

  6. 新建linux服务器初始化操作

    1.关闭不需要的服务 首先确定服务器有没有ntsysv命令,如果没有的话,直接使用yum安装即可. 使用ntsysv关闭不需要的服务以节省服务器资源 需要打开的服务如下: crond:周期性计划任务 ...

  7. EasyUi TreeGrid/DataGrid getChecked BUG

    问题描述 步骤一,选中左边树一个节点,然后出现相应的数据,选中进行保存.如,我选中了前4个节点,上图: 步骤二,我再选tree中第二个节点,进行相应的选中和取消选中treegrid中的节点,并保存. ...

  8. vim 安装vim-javascript插件--Vundle管理

    最近看了一下node.js,但是写的时候,vim对js没有很好的提示.于是就安装插件来处理,准备安装vim-javascript.但是安装github上面的插件时,推荐用Vundle和pathogen ...

  9. nginx优化笔记(keepalive、https等)

    一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...

  10. BitAdminCore框架应用篇:(二)创建一个简单的增删改查模块

    NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...