引子,我去小说看多了,写博客竟然写引子了!!!不过,没引子不知道怎么写了。言归正传吧,前端这个职业,也就这几年刚刚火起来的职业,以前那个混乱的年代,前端要么是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框架的。

该框架的一些基础功能:

  1. UI模块的识别和装载
  2. UI模块的控制(包括装载和卸载)
  3. UI模块的data配置
  4. UI模块的数据流转
  5. ....

  还有很多功能,不过就先实现这些功能。也为前端快速开发和高效维护贡献自己的一份力量。

  大概的布局和设计如下:

PS:因为流转过很多公司,代码风格千万遍,维护根本进行不下去。代码规范几乎等与虚设,一些布局思想,开发思想等几乎等与放弃。从不按套路出牌,怎样顺手就怎样。埋了多少雷,后面的估计屎都会炸出来的,哎,阿门!

前端思想实现:面向UI编程_____前端框架设计开发相关推荐

  1. 程序员过关斩将-- 喷一喷坑爹的面向UI编程

    点击上方"蓝字"关注我们 菜菜哥,求你个事呗? 说来听听,假装你男朋友可不干 不是哦,是正经事.前几天一个项目UI改了,好多人跟着加班修改,怎么样尽量避免这种情况呢? UI修改顶多 ...

  2. 理解AOP思想(面向切面编程)

    本文旨在帮助还没有理解AOP的童鞋看透弄懂AOP,也欢迎高手批评指正. 先说一个Spring是什么吧,大家都是它是一个框架,但框架这个词对新手有点抽象,以致于越解释越模糊,不过它确实是个框架的,但那是 ...

  3. (转载)UI接口分层自动化测试框架设计思想

    阅读本小节,需要读者具备如下前提条件: 1.  掌握一种编程语言基础,如java.python等. 2.  掌握一种单元测试框架,如java语言的testng框架.python的unittest框架. ...

  4. Spring 面向切面编程

    AOP,也就是面向方面编程或者说面向面编程,是一种很重要的思想.在企业级系统中经常需要打印日志.事务管理这样针对某一方面的需求,但是传统的面向对象编程无法很好的满足这些需求.因此催生了面向切面编程这样 ...

  5. 【SSM框架系列】Spring 的 AOP(面向切面编程)

    什么是 AOP AOP 为 Aspect Oriented Programming 的缩写,意思为面向切面编程,是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. AOP 是 OOP ...

  6. Spring 面向切面编程(AOP) D5

    Spring AOP简介 问题提出 首先我们回顾一下OOP(Object Oriented Programming-面向对象编程),OOP引入了封装.继承.多态等概念建立了一种对象层次结构,用于模拟公 ...

  7. 动态代理——拦截器——责任链——AOP面向切面编程底层原理详解(迪丽热巴版)

    目录 动态代理模式详解 前言 什么是代理模式 如何进行代理 静态代理 动态代理 JDK动态代理 CGLIB动态代理 拦截器 责任链模式 博客文章版权申明 动态代理模式详解 前言 代理模式是设计模式中非 ...

  8. Java 设计模式 Day3 之面向抽象原则:什么是面向抽象编程?面向抽象编程如何应用?

    文章目录 前言 一.什么是面向抽象编程? 二.传统场景的类设计 2.1.项目场景设计 2.2.传统类设计存在的问题 三.采用面向抽象编程的类设计 3.1.设计一个抽象类/接口 3.2.采用上转型对象/ ...

  9. 面向sql编程的探索之路

    点击上方"后端技术精选",选择"置顶公众号" 技术文章第一时间送达! 作者:邵磊 juejin.im/post/5b31b12ae51d4558957ddb7f ...

最新文章

  1. 64位程序怎么判断指针是否有效_C 语言指针怎么理解?
  2. 移动硬盘为什么不能安全弹出
  3. 2019中山大学程序设计竞赛
  4. 浅谈ASP.NET Forms验证
  5. [导入] 堆和栈的区别
  6. 【Alljoyn】 Alljoyn学习笔记七 Alljoyn瘦客户端库介绍
  7. some screenshot for SAP Fiori smart template resource load
  8. 服务器后还有一系列留后门,服务器留隐蔽后门
  9. CSS : Cascading Style Sheets
  10. linux 有线程本地存储 (tls)?,有没有办法确定Linux上的库使用的线程本地存储模型...
  11. C#判断一个string是否为数字 --zt
  12. iOS 14.7 中的所有新功能
  13. ES6的类Class基础知识点
  14. 网络系统设计综合布线方案
  15. 推荐好用的输入法 QQ输入法 及设置特定词组的输入方式
  16. Java实现二手交易系统
  17. Gradient Boosting算法简介(有python列子)
  18. 2017.06.27—今日总结,指纹识别图像增强提取频率、mask、gabor滤波器
  19. java 笔触类_下列属于笔触类型的绘图工具有那些?
  20. Android 8.0学习(32)---Android 8.0源码目录结构详解

热门文章

  1. linux_shell 第一章 变量
  2. [转载] 信息系统项目管理师考试论文写作要点
  3. tomcat报 Context [] startup failed due toprevious errors
  4. Overview of ISA and TMG Networking and ISA Networking Case Study (Part 1)
  5. iOS webview 点击按钮返回上一页面或者返回首页
  6. 连表/子查询/计算的sql
  7. 01 使用AFN3 0上传图片时间慢的问题
  8. 简单的TableViewCell高度自适应(只有Label,仅当参考思路)
  9. JAVASCRIPT函数式编程
  10. VMware扩大硬盘后修改Linux逻辑卷大小