后台前端项目的开发 · 前端笔记

### 后台前端项目的开发 >[danger] 从后台前端项目的演变过程看单页的发展我们先看最基本的网页页面工作模式点击链接跳转新页面每次都会重新请求一个文档，再次渲染基本98%的网页是属于这种形式的这种现状让人有很多不满 1. 网络差的时候点击链接，加载新页面慢，甚至出现卡住，白屏的情况 2. 浪费不必要的带宽，大部分页面都有公用部分，头部，导航栏，菜单栏，尾部都是相同的，每次重新渲染一次让人感觉浪费，不值得，尤其让有偏执狂，强迫症，处女座，完美主义者的人抓狂受不了。所以我们好改变！但是改变是痛苦的会有所割舍，和负面的东西 [PJAX](https://my.oschina.net/sub/blog/123447)是我们做出改变的第一步但不可避免的会有一些问题比如对于SEO不友好，关于这点，什么网站适合使用单页类技术，什么网站还是以传统的方式比较好，已经讨论过了[前端技术选型分析](http://www.kancloud.cn/xiak/quanduan/280137)，这里就不讨论了。讨论的结果是，大部分常规网站不适合向单页靠拢，而webapp类型的适合好了，不扯远了。回到我们的后台前端项目后台页面的特点是主要是功能性操作，数据的管理的所以不太注重页面灵活，外观，并且是内部使用的，所以也不需要SEO 基于这些原因，其实很早就有人在后台项目中使用过类WEBAPP技术了，对，你没听错，在webapp概念还没诞生时，人们就在后台项目中尝试过类似的开发方式了。因为人们很早就注意到，后台结构往往都不叫简单，都差不多顶部左侧导航/菜单栏右侧内容区工作的方式：顶部和左侧的内容一般在使用过程中都不会变，操作一般都在内容区你想到了什么？没错就是框架 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>title</title> <link rel="icon" href="/v1/images/ico.ico" type="image/x-icon" /> <style></style> </head> <frameset id="bg" style="background:url(/v1/images/ad_bg.jpg)" rows="65,*" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="20px" frameborder="0"> <frame src="/v1/can/index.php?a=top" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="20px" frameborder="0" name="top" /> <frameset cols="210,*" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="0" frameborder="0"> <frame src="/v1/can/index.php?a=z" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="0" frameborder="0" name="z" /> <frame name="iframe_a" src="/v1/can/index.php?a=d" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="0" frameborder="0" /> </frameset> </frameset> <noframes></noframes> </html> ``` 这是一个基本，经典的后台页面结构无刷新，操作页面，顶部，左侧不需要每次渲染，点击不同的功能菜单，内容区加载页面，这不就是"单页"吗。这还比较简陋，没有url的状态管理，毕竟那时候还没有HTML5嘛，现在看起来，这种方法虽然比较拙劣，但也是前进路上的一次尝试，一次突破，而这种突破尝试，最早就是在后台项目中出现的，所以这篇文章开头就说到**“从后台项目看单页的演变”**。这种使用内联框架的形式后来出现很多演变，比如只使用一个框架做内容区域，甚至模拟多选项卡，比如H+等等，但技术都是相同，那就是使用框架。但这种方式毛病也多，比如使用框架不够灵活，多框架是管理复杂，容易出错，尤其是在前端发展如此之快，单页技术成熟的今天，就更久过时了，现在完全可以不使用框架了，比如 [zui](http://zui.sexy/) [vuethink](http://vuethink.com/)等新型框架，这些技术完全可以在后台项目中完全的应用，无所忌惮，无所顾虑的，大胆的应用，因为没有什么坏处了，后台项目只要灵活，不需要考虑SEO了。 **使用这些新型框架来开发后台前端项目，将大大提升开发和使用效率，不会再多获取不必要的东西了，浪费了，这也满足了有偏执狂，强迫症，处女座，完美主义者的人了。** 这种方式开发、维护的复杂度都会大大降低，单页对开发人员的要求更高，因为整个单页就是个webapp，各种组件组成的，而这种其实每个页面都是独立分离的，所以复杂度就达达降低了。虽然还有很长的路要走，但我相信，只要不断超越自己，改变自己，相信改变是件美好的事，未来就会更好。 [美团外卖前端可视化界面组装平台 —— 乐高](https://tech.meituan.com/waimai-lego.html) [Bootstrap可视化布局系统](http://www.bootcss.com/p/layoutit/#) > 可以先用布局把界面搭建起来 * * * * * update time: 2018-5-17 17:26:41