为什么要进行前后台分离

Posted 2020-07-04

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

我开始接触前端的时候，其实称不上是所谓的开发，更多的是现在多数人对前端的理解－美工，当时负责的工作就是将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. 也做到了专业的人做专业的事情，做到专业化分工

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