SPA单页面应用

最新推荐文章于 2022-07-27 17:28:17 发布

weixin_30764137

最新推荐文章于 2022-07-27 17:28:17 发布

阅读量132

点赞数

文章标签：前端 javascript 网络 ViewUI

原文链接：http://www.cnblogs.com/fuzitu/p/8473647.html

版权

什么是单页应用

单页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>

// 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') // 现在，应用已经启动了！