SPA单页面应用

什么是单页应用

• 单页Web应用，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，以后全部的操做都在这张页面完成，这一切都由JavaScript来控制。所以，单页Web应用会包含大量的JS代码，模块化开发和架构设计的重要性不言而喻。

单页应用得优点

• 操做体验流畅，媲美本地应用的感受，切换过程当中不会频繁有被“打断”的感受。
  由于界面框架都在本地，与服务端的通信基本只有数据，因此便于迁移，能够用比较小的代价，迁移成桌面产品，或者各类移动端Hybrid产品。
• 彻底的前端组件化，前端开发再也不以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
• API 共享，若是你的服务是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，能够显著减小服务端的工做量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供更棒的服务；
• 组件共享，在某些对性能体验要求不高的场景，或者产品处于快速试错阶段，借助于一些技术（Hybrid、React Native），能够在多端共享组件，便于产品的快速迭代，节约资源。

单页应用得缺点

• 首次加载大量资源，要在一个页面上为用户提供产品的全部功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长；
• 对搜索引擎不友好，由于界面的绝大部分都是动态生成的，因此搜索引擎很不容易索引它。
• 开发难度相对较高，开发者的JavaScript技能必须过关，同时须要对组件化、设计模式有所认识，他所面对的再也不是一个简单的页面，而是一个运行在浏览器环境中的桌面软件。

开发框架

• 为解决大规模单页应用代码逻辑问题，出现了很多MV*（MVC、MVP、MVVM）框架，他们的基本思路都是在JS层建立模块分层和通讯机制，为单页面应用开发提供了必需的模版、路径解析和处理、后台服务api访问、DOM操做等功能。这类框架包括Vue（Vue-router），Backbone，Knockout，AngularJS，Avalon等，并且，它们几乎都在这些模式上产生了变异，以适应前端开发的特色。mvc、mvp、mvvm使用关系总结
• 框架能极大的提升咱们开发的便利，可是框架通常都限制过多，因此咱们也能够抛弃框架，直接写原生代码。

代码隔离

• 单页应用比页面型网站更加依赖于JavaScript，因为页面的单页化，各类子功能的JavaScript代码汇集到了同一个做用域，因此代码的隔离、模块化变得很重要。

代码合并与加载策略

• 把更多的公共功能放到首次加载，以减小每次加载的载入量。
• 在单页应用中，无需像网站型产品同样，为了防止文件加载阻塞渲染，把js放到html后面加载，由于它的界面基本都是动态生成的。

路由与状态的管理

• 单页应用中，由于界面上的各类功能区块是动态生成的，因此须要把产品功能划分为若干状态，每一个状态映射到相应的路由，而后经过根据不一样的url路径动态解析路由，匹配功能界面。

缓存与本地存储

• 在单页应用的运做机制中，缓存是一个很重要的环节。
• 因为这类系统的前端部分几乎全是静态文件，因此它可以有机会利用浏览器的缓存机制，而好比动态加载的界面模板，也彻底能够作一些自定义的缓存机制，在非首次的请求中直接取缓存的版本，以加快加载速度。
• 在单页产品中，业务代码也经常会须要跟本地存储打交道，存储一些临时数据，可使用localStorage或者localStorageDB来简化本身的业务代码。

服务端通讯

• 传统的Web产品一般使用JSONP或者AJAX这样的方式与服务端通讯，但在单页Web应用中，有很大一部分采用WebSocket这样的实时通信方式。

• WebSocket与传统基于HTTP的通讯机制相比，有很大的优点。它可让服务端很便利地使用反向推送，前端只响应确实产生业务数据的事件，减小一遍又一遍无心义的AJAX轮询。

• 因为WebSocket只在比较先进的浏览器上被支持，有一些库提供了在不一样浏览器中的兼容方案，好比socket.io，它在不支持WebSocket的浏览器上会降级成使用AJAX或JSONP等方式，对业务代码彻底透明、兼容。

内存管理

• 传统的Web页面通常是不须要考虑内存的管理的，由于用户的停留时间相对少，即便出现内存泄漏，可能很快就被刷新页面之类的操做冲掉了，但单页应用是不一样的，它的用户极可能会把它开一成天，所以，咱们须要对其中的DOM操做、网络链接等部分格外当心。

样式的规划

在单页应用中，由于页面的集成度高，全部页面汇集到同一做用域，样式的规划也变得重要了。
样式规划主要是几个方面：

1. 基准样式的分离

• 这里面主要包括浏览器样式的重设、全局字体的设置、布局的基本约定和响应式支持。

2. 组件样式的划分

• 这里面是两个层面的规划，首先是各类界面组件及其子元素的样式，其次是一些修饰样式。组件样式应当尽可能减小互相依赖，各组件的样式容许冗余。

3. 堆叠次序的管理

• 传统Web页面的特色是元素多，可是层次少，单页应用会有些不一样。

• 在单页应用中，须要提早为各类UI组件规划堆叠次序，也就是z-index，好比说，咱们可能会有各类弹出对话框，浮动层，它们可能组合成各类堆叠状态。新的对话框的z-index须要比旧的高，才能确保盖在它上面。

vue + vue-router单页实例

• html

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 经过传入 `to` 属性指定连接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> 

• js

// 0. 若是使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 也能够从其余文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每一个路由应该映射一个组件。 其中"component" 能够是 // 经过 Vue.extend() 建立的组件构造器， // 或者，只是一个组件配置对象。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立 router 实例，而后传 `routes` 配置 // 你还能够传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）至关于 routes: routes }) // 4. 建立和挂载根实例。 // 记得要经过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 如今，应用已经启动了！