为何要进行先后台分离

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

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

以上是在作前端开发具体的实践中总结的一些工做心得，也是咱们这边前端会一直向前提高的道路。但愿各位前端开发可以提高本身的技能，如今本身的价值，获得更高的报酬，更多的尊重。