前端路上

了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与之相对的CS架构则不存在加载压力，但CS架构的问题是更新不灵活，那么有没有一种方法能结合这两种架构的优点，在加载速度和更新灵活性之间找到一个平衡点呢？这就是本文要探讨的一种方案：前端热更新。

Vue-Access-Control是一套基于 Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。

本文是对Vue官方风格指南的注解，过滤了极少数我认为重要性很低的项目，并将其余项按照作用相关性重新归类，便于读者针对性的选择某一方面进行参考。

Vue是目前最流行的前端开发框架之一，与Vue-router和Vuex组成俗称的Vue全家桶，更是开发前端富交互应用的利器。配合webpack等构建工具，开发大型应用也可以得心应手。随着Vue的普及，可能一些老旧项目也希望能“渐进式”的使用Vue，或者有的项目想用Vue来做但不打算引进构建工具，这种情况该怎样愉快的开发Vue全家桶项目呢？本文将提供一种解决方案。

RESTful是什么

RESTful是一种API架构，符合REST设计原则的API都可以被称为RESTful，REST的全称是Representational State Transfer。

最近火爆朋友圈的军装照H5大家一定还记忆犹新，其原理是先提取出照片中的面部，然后与模板进行合成，官方的合成处理据说由天天P图提供技术支持，后端合成后返回给前端展示，形式很新颖效果也非常好，整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案，因此理论上前端也可以完成人脸识别-提取-合成整个流程，实现纯前端的军装照H5效果。

之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。

本文中的菜单权限控制方案由于没有使用router.addRoutes()实现动态路由，需要将登录页独立出来单独做，基于相同思路的动态路由方案参见]用addRoutes实现动态路由。

前段时间基于HybridStart开发了一个公司内部APP，重走了一遍混合应用从开发到发布的整个流程，唤起了很多坑的记忆，也为HybridStart修复了不少细节bug，下面简单回顾一下过程中值得一提的几个点。

我们都知道混合应用的流畅性不如原生应用，除了不能像原生一样轻松驾驭各种狂拽酷炫的效果，混合应用还有一个难以消除的弱点在于页面打开速度上，如果有机会在同一台手机上直接对比的话，这种差距是普通人都能直观感受到的，这主要是由于web页面每次打开前需要初始化，在那一瞬间需要完成DOM创建、资源下载、样式渲染、js执行，这些时间消耗造成了按键按下与页面进场之间短暂的停顿，也造成了混合应用整体“不流畅，不跟手”的印象，HybridStart 1.1.1版本针对性的优化了页面打开速度，下面就介绍一下具体是怎么做的。