前端思想实现:面向UI编程_____前端框架设计开发
引子,我去小说看多了,写博客竟然写引子了!!!不过,没引子不知道怎么写了。言归正传吧,前端这个职业,也就这几年刚刚火起来的职业,以前那个混乱的年代,前端要么是UI设计师代劳解决问题,要么就是后端程序员小帅哥稍微代劳一下,百度一下,google一下,ctrl+c,ctrl+v,然后搞定了,没啥事了,反正能用。反正前端html+css+js 就是一种小语种,没人当个宝。
但是随着技术的发展,人们对于任何事物在看重实用性能的同时,也越来越重视自我的体验,比如当前流行的互联网企业,除了要有出色的性能和实用性,还要有良好的界面、客户体验,这样才能吸引人。所以对于初创的互联网公司来说,最烧钱的时候就是刚刚获得风投或融资的时候,因为那时候还没有客户访问,所以他们不得不把钱砸向前端,只有做好前端技术、客户体验,一切才有可能。当有了来访者,访问的人多了,才会优化后端,做客户分析等等。所以互联网公司获得融资后的第一件事往往就是招聘Web前端开发人员,先把前端和用户体验做好,打好发展第一炮,这也是为什么Web前端开发这么火、工程师薪资高的重要原因。
但是,这时还不能算最火,真正引爆前端的是,移动端的兴起和爆发,这样才真正促成前端开始火热。而且随着H5、C3的推出、各种框架的热潮、模块化啥啥啥的、外加薪资的涨幅等等,真正带动了我们现在做的这是职业-----前端开发工程师
有点跑偏了,现在回归正轨。我们现在开发的前端,尽管现在推陈出新了很多技术,但是很多公司,说白了,还是搞着最原始的开发,即这边搞一段HTML,那边加个CSS,最后搞点js来,凑合凑合搞成一个页面,没有什么所谓的正规。导致前端开发真正的难维护。这只是其中一点。也是导致很多程序员最不愿意的就是维护别人代码,想死的心都有。下面列举一些我遇到的情况
- 2W多行的js代码混杂html,从上翻到下也的好几分钟
- 全局变量局部变量混杂不清
- 代码重复率很高
- 每个function中串了很多很多业务代码
- ......
我想,不仅是我,谁看了都头疼,反正我直接拒绝维护。哈哈
这时候会有很多人跳出来,不是有了模块化呀啥啥啥的,这个还有必要吗?我想了想,确实没必要,但是别急,这也是一种高效开发风格和高效可维护风格,毕竟作为一种可选方案还是很好的。
面向UI编程,以UI为基础,以数据为核心。
解释一下,这里的UI不是UI给出的UI图,而是我们写出来的html;数据不是静态写死的,而是我们通过各种方式获得的数据,然后塞给html。再加上div布局方案,一个网页很容易进行布局开发和高效维护。下面直接上图解释:

上面只是结合div布局,将页面分模块进行分别开发。但是,
- 根据原子编程思想,即每个开发子单元应该只应该完成一件事,就和一个原子一样,作为一个最小单位;
- 以及简洁设计思想,应该将每个设计划分到最小模块和细节进行设计,然后兼顾和拼凑整体设计;
根据这2个思想,面向UI编程的第一步当然是不可取。每个UI模块的代码量和数据量十分大,根本不是高效开发和高效维护的榜样。其实可能有些人也想到了一些,将这4个大模块,再进行UI划分。
对的,将一个大的UI模块,再进行细小UI模块划分,见下图:

正如页面上所写的,我将每个UI细分到原子层面,对于整个页面生态来说,缺少一个原子,不会让整个页面坍塌。就算我下线维护,我只要卸载一个我要维护的模块,然后我进行线下开发,然后开发完毕,再进行装载。这样就达到了一种电脑上usb的效果,热插拔的效果,这样对整体是没有影响的,你有没有我都不会崩溃,只是多了你,我多了一个功能,少了你,我只是没有这个功能而已。
正如面向对象思想那样(相信大部分程序员都知道面向对象思想把,虽然我也没对象,嘻嘻),以对象为基础,将最小原子分为对象,然后进行对象组合,原子对象组合成小对象,小对象组成大对象,大对象组成史前对象等,然后将功能根据业务和技术进行组建,达到我们所要的效果。
当然啦,这个思想还不是很成熟,有很多欠缺的,比如模块之间的关联关系,数据的流转以及变化等等,不过还在摸索,有什么好的建议,希望大家一起提出来,我们一起商量,毕竟集思广益嘛。
我相信面向UI编程很多人都这样想过,也这样做过,只是没达到一种共识和快速开发的方案。我这里提出来,其实我也是思考了很久,做了很多技术积累和思想积累。想将这个思想搞成一个前端的js框架的。
该框架的一些基础功能:
- UI模块的识别和装载
- UI模块的控制(包括装载和卸载)
- UI模块的data配置
- UI模块的数据流转
- ....
还有很多功能,不过就先实现这些功能。也为前端快速开发和高效维护贡献自己的一份力量。
大概的布局和设计如下:


PS:因为流转过很多公司,代码风格千万遍,维护根本进行不下去。代码规范几乎等与虚设,一些布局思想,开发思想等几乎等与放弃。从不按套路出牌,怎样顺手就怎样。埋了多少雷,后面的估计屎都会炸出来的,哎,阿门!
前端思想实现:面向UI编程_____前端框架设计开发的更多相关文章
- 面向UI编程:ui.js 1.0 粗糙版本发布,分布式开发+容器化+组件化+配置化框架,从无到有的艰难创造
时隔第一次被UI思路激励,到现在1.0的粗糙版本发布,掐指一算整整半年了.半年之间,有些细节不断推翻重做,再推翻再重做.时隔今日,终于能先出来个东西了,这个版本很粗糙,主体功能大概能实现了,但是还是有 ...
- 程序员过关斩将-- 喷一喷坑爹的面向UI编程
摒弃面向UI编程 为何喷起此次话题,因为前不久和我们首席架构师沟通,谈起程序设计问题,一不小心把UI扯进来,更把那些按照UI来编程的后台工程师也扯了进来.今天特意百度了一下(其实程序员应该去googl ...
- 面向UI编程框架:ui.js框架思路详细设计
由于上一次的灵光一闪,萌生了对面向UI编程的思想实现.经过一段时间的考虑和设计,现在将思想和具体细节记录下来: 具体思路描述: 在UI.config文件中,配置所有参数,比如页面模板.所有组件.组件控 ...
- 面向UI编程思想
UI编程思想: 模块化+组合 模块化是分解: 组合是合成: https://www.cnblogs.com/feng9exe/p/11044134.html
- 理解AOP思想(面向切面编程)
AOP:面向切面编程,相信很多刚接触这个词的同行都不是很明白什么,百度一下看到下面这几句话: 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预 ...
- 面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚
开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累. 什么是框架? 百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一 ...
- 前端微服务-面向web平台级应用的设计
从去年开始,前端领域就出现了一个‘微应用’的名词,说的是前端架构的一种设计思路,业内都把它和后端的微服务进行类比,当时忙于公司的项目.没有静下心来好好了解,现在项目结束,再加上最近看的几篇关于前端微服 ...
- Spring理论基础-面向切面编程
AOP是Aspect-Oriented Programming的缩写,中文翻译是面向切面编程.作为Spring的特征之一,是要好好学习的. 首先面向切面编程这个名称很容易让人想起面向对象编程(OOP) ...
- 面向切面编程 (AOP )
什么是面向切面编程? 面向切面编程就是(AOP --- aspect-oriented programming), 在百科上说: 面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一 ...
随机推荐
- MSF漏洞攻击练习系统 – Metasploitable2
Metasploitable2 是Metasploit团队维护的一个集成了各种漏洞弱点的Linux主机(ubuntu)镜像,方便广大黑扩跟安全人员进行MSF漏洞测试跟学习,免去搭建各种测试环境.VMw ...
- [label][Node.js] Three content management systems base on Node.js
1. Keystonejs http://keystonejs.com/ 2. Apostrophe http://apostrophenow.org/
- Oracle EBS R12多组织访问架构
关于R12的新特性Multi-Org Access Control(MOAC).Oracle宣传的好处主要有:1.enable users to access to secured data in o ...
- Android-有序广播是可以中断的
在之前的博客,Android-广播概念,中介绍了(广播和广播接收者)可以组件与组件之间进行通讯,有两种类型的广播(无序广播 和 有序广播),这篇博客就来讲解有序广播的代码实现: 有序广播:接收者 可以 ...
- merge sort 的javascript实现
递归 上一篇blog里,用js实现了quicksort算法,quicksort算法是一个递归调用过程. 递归是一种非常强大的编程思想,它广泛的的存在于各种语言当中,尤其lisp的各种方言中,大量的使用 ...
- VUE 学习笔记 一 指令
1.声明式渲染 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性 <div id='app'> <span v-bind:title=" ...
- HBase – 探索HFile索引机制
本文由 网易云发布. 作者: 范欣欣 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 01 HFile索引结构解析 HFile中索引结构根据索引层级的不同分为两种:single-level和m ...
- django系列5.1--ORM对数据库的操作
Django---ORM数据库操作(图书管理系统基本实例) 一.基本知识 MVC模式(Model–view–controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Mo ...
- “全栈2019”Java多线程第十二章:后台线程setDaemon()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- Vue 框架 笔记
1.兼容 2.性能优化 vuejs ******作者:尤雨溪 *** *******MVVM框架: M:model层 数据层 数据的增删改查 V:view视图层 类似于html的模板 vm:vie ...