你的位置:首页 > Java教程

[Java教程]为什么要进行前后台分离


从事前端开发工作也有一定的时间了,在这段时间里,由一个基本的前端开发开始,做到前端经理;基本上算是走过了所有前端开发都走过的路,今天主要分享下我这一路走来,对前端的理解。

我开始接触前端的时候,其实称不上是所谓的开发,更多的是现在多数人对前端的理解-美工,当时负责的工作就是将PSD转化为HTML页面,并做些基本的交互。所以,我们组一致都挂在设计组下面,因为大家对其理解,其实是偏设计的东西,和所谓的开发根本挂不上钩。结果导致的就是一系列的连锁问题--前端不被看重,前端的工资水平就很难提升,前端转岗;我身边就有好几个前端因此而转岗。

其实所谓的前端开发工程师,并不仅仅是将PSD转化为HTML页面并做些交互这么简单,理论上,应该还有很多的js要开发,那这部分js都转移到哪里了呢?答案就是所谓的研发人员身上,他们可能是PHP开发工程师,或者是java开发工程师,这些人同时担着PHP/java开发和js开发2项工作。那这样会带来一个什么样的问题呢?一来网站性能很差,二来页面交互效果很烂,三是前端代码没有什么组织性。为什么会出现这些问题呢,主要是因为他们的工作重点还是在PHP或是JAVA上,一来本身很难去深究js,二是对页面的交互缺乏CSS的基础,三是不会去过多的研究js的优秀框架。我自己做过网站的性能优化,重构过他们的代码,对这点的理会很深。久而久之,就出现一个很尴尬的情况,国外/国内大牛推出了很多优秀的框架,却很少能在公司中有应用。网站呈现依旧 ”一副任你外面如何分外妖娆,我自清贫的傲娇态度“。

那可能有人要问,js到底可以实现哪些东西。我就结合下我自己的工作说下吧。

1. CSS+JS,可以实现很多很炫的效果,例如旋转,放大,变形等;这些的话,其实一般的前端开发在接触到 CSS3很nb的属性后,都能够游刃有余的实现

2. 前端的性能优化,这块其实涉及的东西很多,对于非js之内,就不过多的说了,主要说下与js方面有关的。我们知道js加载到页面中主要分为2步,一是下载,二是解析;如果js同步下载的话,其实会block住其他资源的下载,这个就是为什么把js异步掉的原因,那这又有一个问题,那我把js异步处理后,为什么不能把它放在头部呢?异步的资源不是不阻碍其他资源的下载了吗?这里又涉及到一个问题,那就是js的解析问题,js下载完成之后就会进行解析,解析会block住其他资源的下载,更重要的一个问题是解析js过程中如果有操作DOM,那页面没有下载完,就会报错。所以现在网站一般都是将js放在页面的最底部。那放在底部就是最优的解决方法吗?不是,js没有实现按需加载。怎么理解按需加载,就是按照页面需要展示的内容加载对应处需要使用到的js。简单的说,就是在页面初始化的时候,我只加载和首屏相关的js,其他的js一概不加载。这样页面在打开的时候,只会加载很少的js文件,网站速度就能有很大的提升。那又怎样能实现js的按需加载呢,那就是:一将js模块化/低耦合的组织,二是通过工具实现按需加载,我们这边使用的是requirejs进行的模块化加载。除了js按需加载以外,其实还有个影响性能很大的问题,就是js本身的逻辑问题,这块对性能影响也很大,特别是对一些js引擎较弱的浏览器,影响更大。这块涉及到的东西也很多,简单的举个例子,页面中有300个li,通过jquery 的 $("li")方式去查找,你可以算了需要查找的时间,如果你的查到的结果不保存,每次都是使用$('li')查找,和我存储了一次,以后直接使用保存的,对比下运行时间。你就会发现运行时间差距很大。

3. 前端的模版引擎,包括underscorejs或者是artTemplatejs,这些虽然只是些工具,但是合理使用,对工作效率提升还是非常明显;接下来会进一步分开讲解这个部分

4. backbonejs,结合我们现在开发的项目,backbone还是非常实用的,主要表现在前后台分离上,并且对于前端架构的搭建和效率的提升,有很大的飞跃。接下来会详细讲解backbone在前端开发中的具体应用

5. requirejs,这个算是一个前端开发的工具吧,它的主要作用在于管理js,并且模块化和异步化js;对于管理文件的加载,有极大的帮助作用。这块接下来也会分章节讲解。

6. 还有一个是目前作为前端开发,基本上都要了解的,就是nodejs;这个东西有很多作用,就不去细说。今天主要讲解下使用nodejs开发的一个半自动化的测试作用-phantomjs,目前我们这边专题的测试走的基本上都是这个测试工具,但是是要基于phantomjs进行二次开发的。接下来也会分章节讲解这个部分

7. Grunt,这个目前在我们具体的项目中还没有完全使用,但是其很多功能还是值得研究和推广的。

当然,以上只是前端开发一些基础,不过结合我们自己的实践,以上的东西的引入,给我们开发带来了极大的便利,并且较低的学习成本,在具体应用中,也极易推广使用。

目前我们使用以上的框架,推行的前后台分离方式,基本上已经确定下来;并且在几个重大的项目有具体的应用,也带来的很大的优势。主要表现在以下几点

1. 前后台并行开发,目前UI设计完之后,我们就可以和研发确定接口,接口确定完成之后,就可以完全分离式开发,在前后台都开发完成之后直接连调就可以

2. 后台可以更专注后台开发和接口性能,不必要关注前端的问题。

3. 前端这边也可以完全发挥自己的优势,在页面性能/js加载/异步化/页面DOM数优化等方面都会有很大的提高

4. 也做到了专业的人做专业的事情,做到专业化分工

以上是在做前端开发具体的实践中总结的一些工作心得,也是我们这边前端会一直向前提升的道路。希望各位前端开发能够提升自己的技能,现在自己的价值,得到更高的报酬,更多的尊重。