文档章节

前端思想实现:面向UI编程

 半个诗人
发布于 2016/12/08 15:37
字数 1724
阅读 23
收藏 0
点赞 0
评论 0

      引子,我去小说看多了,写博客竟然写引子了!!!不过,没引子不知道怎么写了。言归正传吧,前端这个职业,也就这几年刚刚火起来的职业,以前那个混乱的年代,前端要么是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:因为流转过很多公司,代码风格千万遍,维护根本进行不下去。代码规范几乎等与虚设,一些布局思想,开发思想等几乎等与放弃。从不按套路出牌,怎样顺手就怎样。埋了多少雷,后面的估计屎都会炸出来的,哎,阿门!

 

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 2
码字总数 2909
作品 0
普陀
这绝对是有史以来最详细的web前端学习攻略

  第一阶段:   HTML+CSS:   HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、   JavaScript基础:   Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、...

学习web前端 ⋅ 2017/10/12 ⋅ 0

web人力资源信息系统开发日志④

第四阶段(2017年6月21—7月6日):进入测试冲刺阶段,bug大扫荡,总结分析并准备上线交付使用。软件的生命周期就是不断更新升级,一旦停止更新,软件生命就会衰老枯竭。接下来的工作是调试上...

人可工作室 ⋅ 2017/07/09 ⋅ 0

为什么要使用MVC+REST+CQRS架构

具体来说,前端浏览器:angular.js等MVC框架;后端: REST+ CQRS。 angular.js等MVC框架是指前端浏览器的MVC框架,而不是类似Struts 或SpringMVC之类的服务器端后端MVC框架。 关于后端MVC框架...

天衣无缝 ⋅ 2013/08/09 ⋅ 0

记一次团队前端技术更新

之前用的技术 团队之前采用的是前后端统一的开发方式。 为什么会用这种开发方式呢?前端为什么采用Extjs我曾就这个问题询问了我的主管,得到了如下回复: 当时团队都是后端技术为主 没有专门...

单调先生 ⋅ 2017/12/07 ⋅ 0

淘宝玉伯引发Web前后端研发模式讨论

淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery。不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于 Web 前后端研发模式的思考。 他首先指出了前端的产品...

bobo_lu ⋅ 2012/12/06 ⋅ 1

颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

雪舞__ ⋅ 2016/12/08 ⋅ 0

颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

SomaLihq ⋅ 2017/01/12 ⋅ 0

Java学习之面向对象与面向过程的比较

前言 Java编程语言是一门面向对象的语言,这与之前的编程语言来说,是一个重大的进步和发展,下面主要来分析一下面向对象和面向过程两者之间的关系。 编程语言的发展 如下图,编程语言的发展...

m18633778874 ⋅ 04/10 ⋅ 0

【掘金日报】第四期 使用Sublime?怎么能不知道这些 Sublime 插件合集!

掘金日报主打分享优质深度技术内容,技术内容分:前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 前端 深度剖析:如何实现一个 Virtual DOM 算法 本文会在教你怎么用 300~...

膜法小编 ⋅ 2017/04/28 ⋅ 0

PHPWeb开发入门体验学习笔记

PHPWeb开发入门体验学习笔记 4 一、PHP web应用开发须知 1.入门要点 程序员三个阶段:码农(速成技能)->工程师(长期知识)->专家(研究论文) 编程三要素:声明变量(系统、全局、字段等)...

人可工作室 ⋅ 2017/07/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iExec Blockchain Marketplace for Cloud

iExec Releases the First-Ever Blockchain Marketplace for Trading Cloud Computing Berlin, Germany, May 29, 2018. iExec has released its blockchain-based decentralized cloud marke......

openthings ⋅ 12分钟前 ⋅ 0

OSChina 周二乱弹 —— 加班的代码不要枉费了我的童子功

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《29》- 未完成乐队 《29》- 未完成乐队 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :#看球提醒# 02:00 巴西v...

小小编辑 ⋅ 32分钟前 ⋅ 11

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 今天 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部