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

简介: 由于上一次的灵光一闪,萌生了对面向UI编程的思想实现。经过一段时间的考虑和设计,现在将思想和具体细节记录下来:具体思路描述:在UI.config文件中,配置所有参数,比如页面模板、所有组件、组件控制、接口注入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:现在只是对思路做一个详细设计,在开发中可能会遇到各种各样的问题,而且该思路是我的第一次起草,可能不是很完善,如果大家有更好的思想和灵感,希望大家不吝赐教。这段时间先把基础版本写好,然后公布成开源项目出去,以后欢迎大家一起完善。

下面是我的手稿:

 

 

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

 

目录
相关文章
|
19天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
26 3
|
2月前
|
人工智能 前端开发 搜索推荐
前端UI框架的发展:从混沌到秩序的演变
前端UI框架的发展:从混沌到秩序的演变
|
2月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
5天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
9 1
|
6天前
|
JavaScript 前端开发 测试技术
在JS编程中常见的编程“套路”或习惯汇总
在当前技术圈快速迭代发展的时代,JavaScript是一种广泛应用于Web开发和移动应用开发的脚本语言,其重要性愈发凸显,尤其是随着技术的不断发展和应用场景的不断扩展,JS编程已经成为了许多开发者必备的技能之一。但是仅仅掌握JS语法和基本知识并不足够,为了写出高质量、可靠性和可维护性的代码,开发者需要掌握一些常见的编程"套路"或习惯,这些套路和习惯能够帮助开发者更好地组织和管理代码,提高开发效率,并减少潜在的错误和问题。在JS编程开发中,有一些常见的编程“套路”或习惯,可以帮助开发者编写高效、可维护且易于理解的代码。让我们来看看其中一些常见的编程“套路”或习惯。那么本文就来分享探讨在JS编程中
25 6
在JS编程中常见的编程“套路”或习惯汇总
|
9天前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
|
11天前
|
设计模式 前端开发 JavaScript
AngularJS是一款由Google收购的JavaScript结构框架
AngularJS是Google收购的JavaScript框架,用于构建动态Web应用,基于MVC模式,强调模块化和双向数据绑定。它简化了视图与模型的同步,通过语义化标签和依赖注入提升开发效率。适用于复杂单页面应用(SPA),但不适合DOM操作密集型或性能要求极高的场景。
18 0
|
12天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
13天前
|
开发框架 JavaScript 中间件
深入探索Node.js的Express框架:使用与中间件详解
【4月更文挑战第30天】本文深入探讨了Node.js的Express框架,介绍了其作为Web开发的强大工具,主要聚焦于基本使用和中间件。Express是基于Node.js的Web应用框架,用于构建高效的应用和API。文章详细讲解了如何安装Express,创建简单应用,以及中间件的工作原理和应用,包括中间件的顺序、错误处理和挂载位置。此外,还提到了使用第三方中间件扩展功能。理解Express基础和中间件对于开发高质量Web应用至关重要。
|
13天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面