骑马逛前端

摘要：关于web前端所必备的知识、晋升等级、就业趋势、薪资等在网上可是众说纷纭，聊得火热。很多刚毕业的大学生跨专业转前端、在其他行业从事者在跨行业转前端、后台开发转前端等等。确实，前端开发是一份可持续发展的工作。但对于前端开发真实的工作流和方式，很多人都是一知半解。本文结合HIS5项目开发过程，重点阐述前端的真实工作流程，以及在开发过程中的一些思考与分析，以便其他开发人员借鉴。

关键词：前端开发 分析 优化

个人从2017年3月开始参与HIS5项目，至今七月有余，从起初对前端开发流程的一知半解，到目前的熟悉，对前端的真实工作流程和方式也有一些自己的理解。以下结合HIS5详细阐述前端真实开发过程，希望可以给大家提供一些可借鉴的思路与方法。

1. UI、前端、后端分别是做什么

关于UI、前端、后端的工作内容（外界很多人都是模棱两可，主要的原因是考虑的角度不一样，这里也仅代表个人想法，并不是绝对的）从开发技术的角度上来讲：

UI：UI设计人员根据项目的需求设计原型图，即前端开发时参照图。包括自己创作（在素材基础上修改图片），布局（不需要HTML/CSS），切图。主要是用Photoshop来制作。

前端：前端从应用的角度大致分为两种，一种是针对业务型的，针对专门的业务，一种是多极化发展的，如针对不同业务需求封装好的可以共用的框架，或者设计模式（MVC）、工程化/TDD Node/MongDB。HIS是针对医疗管理和医疗活动中心的，属于前者。前端开发主要是对视图层进行操作，即用户所能看到的画面。HIS5的前端开发也毫不例外，开发流程大致分为三部分：

对UI人员设计的原型图进行重构，首先是布局(主要用HTML+CSS来实现，其中HTML是超文本标记语言，用来创建页面，CSS是修饰页面的作用，用来写页面的样式)，其次，根据需求可以把页面做成具有响应式（根据页面的大小自动变换适应整个屏幕，主要应用CSS、封装好的插件或者框架来实现）的PC端。最后，通过js实现页面一些动画效果。如在HIS5中将常遇到的鼠标点击表格的某一行，该行的背景颜色显示为蓝色。或者其他业务上的闪光效果等。

进行数据交互，通过ajax来请求后端编写好的接口，使得页面上的数据具有真实性，用户通过对页面上一些按钮点击的操作，实时显示有效的数据。这过程主要是根据业务的需求用js编写简单的逻辑来实现，如循环、分支等，以及更深入的利于逻辑，如闭包、作用域链，代码重构、封装、复用等。

后端：如果说前端开发就是人的躯体，UI设计是穿在身上的衣裳和所化的妆容，那后端开发就是人的灵魂。从跟前端交接来说，后端主要是为前端提供接口。从工作内容来说，后端主要是对数据逻辑的处理和整个流程框架的构建。是对控制层、服务层、数据层进行操作。HIS5项目是运用三层架构模式（SSM框架，String + StringMvc + MyBaties）、Java 、Oracle（数据库）、Tomcat、gitHub（版本库管理）等相关知识，来控制着整个系统的运作。

2. 怎样分析项目需求和UI设计图

了解业务需求是必要的。在开发之前，应该大致浏览一下详细设计文档，知道整个开发流程的走向，结合实际应用，提出合理性要求，尽可能避免不合理需求，即时补缺补漏，减少开发过程中的变更几率对于整个业务的开发非常重要，对于业务需求不了解的人员，要及时跟设计等相关人员沟通、咨询。

盲目切图是大忌。首先，应该先分析一个模块、一个页面，甚至某个功能，哪些地方相似度高，可以抽离出来，根据不同的变量标识，封装成一个方法，然后在需要时进行调用，这样不仅提高代码的利用率，而且减少代码的冗余度。

对于前端页面的布局，其布局方式因人而异，每个前端开发人员各有不同，在切图之前应该根据详细设计文档，思考页面布局方式，如图，HIS5项目的排班管理的界面：

排班管理页面图

该界面可以table表格标签来布局，也可以用ul跟li标签布局，或者用div标签及其属性display来布局，设置其属性display:table，该界面的医生排班根据业务需求以及用户习惯按日期、科室来切换分类，虽然是一个很普通的页面，但该页面在布局之前需要慎重考虑。

与后端结合，一些层次较多，可根据后端返回的数据格式布局。如HIS5项目的排版模板维护页面，如下图：

排班模板维护页面图

该界面返回的数据格式，不同后端开发人员各有不同。有可能是根据星期、班次，医生、科室这样一层一层的数据包裹返回给前端，也有可能是通过如星期、班次、医生、科室这样同级形式的数据返回等，后端返回的数据格式，有可能不适合我们已经切好的图，所以在切图前跟后端的沟通也是有必要的。

3. 组织项目的目录结构

项目的创建是正在开发过程中的第一步，目录的搭建在团队开发中至关重要。如果只是平常自己学习中写的一些测试，直接搭建一个.html，.css，.js文件就可以了编写你的代码。但是平常项目的目录搭建一般是通过模块化的，通过比如用脚手架搭建快速搭建一个vue目录，如图：

脚手架搭建的目录图

脚手架搭建快速搭建的目录，相对于HIS5项目来说还是有所欠缺，但是其中心思想差异不大，HIS5搭建的目录如图：

HIS5目录图

HIS5搭建的目录层级分化更加明显，对于项目中的每个模块都会独立分开，这样不仅便于团队间的开发协作，同时也能减少各个模块在开发过程中的耦合度，避免一处错，处处错的。

4. 优化及调试

关于前端开发过程中的优化准则，百度上比比皆是，这里主要结合his5开发做一些相对的整理。开发过程中，应尽量避免代码冗余，通过变量标识，抽离相似的的代码，封装耦合度高模块。能用CSS解决的不要用JS，比如响应式设计，通常用CSS的盒子属性box-sizing:border-box以及calc()计算,就可以解决，像鼠标经过时的样式之类的，没必要JS来实现，当然具体问题具体分析。编码的一些优化细节也要注意，因为性能的提升就是靠这些点点滴滴积累而成。如：

1) 用简单的判断三元代替if，ex:let a = flag==1?”a”:”b；

2) 多个判断时if，else配合使用，减少不必要的判断；

3) for循环，是否找到想要的后，有没break 阻止继续遍历；

4) 变量替代，对于多次使用到的地方，可以通过变量复制，来减少性能消耗，比如在开发过程中经常用到的for循环，for(let I =0 ;l

开发过程中，难免会遇到各种bug，此时调试则显得尤为重要。曾经的前端没有调试工具，只能通过alert来检测，很多开发人员因此而放弃了前端。现如今，所有的浏览器都有F12（调试工具）。通过它，我们可以快速定位页面布局样式的问题所在，可以设置断点查看当前的数据情况，从而检测前端数据交互哪个环节出错，还可以通过在控制台打印数据来确定问题所在点。如果连调试都不会，请不要告诉别人自己是程序员。它是我们必备技能。

5. 总结

通过参与HIS5项目的开发过程中，让我明白并学会了以下几个道理。

工欲善其事必先利其器。业务知识对于业务开发人员来说至关重要，有了一定的业务知识才能少走弯路，在开发之前应该要先去了解相关的业务。没有人天生就懂业务，靠的是平时的学习和积累。

沟通是关键。在开发过程中，难免会遇到各种问题，都要及时提出并进行沟通。沟通不仅能有效的帮助处理问题，少走弯路。还能提高开发效率促进团队间的协作，团队协作的重要性相信参与HIS5项目的每个人都知道，这里不再重复。

不积跬步无以至千里，前端是一份可持续发展的工作，也是一个不断学习的过程，其实不管在哪个行业都是一样的，唯有不断学习，才能不落后。