FE - 走向Node与Webpack 之路 - 对 单页面应用（SPA）的认识

啰嗦

最近学习

Vue

，实现了一个简单的应用，也对前后端分离有了不同的认识，但在这之前，还是对使用

Vue

做开发认识局限于传统

Web

开发。如果也有这种感觉的话，这篇文章十分适合你。

这里我将说下单页面应用于传统

web

应用，先来看张图：

（画图工具画的，有推荐的，可以写在评论区，O(∩_∩)O谢谢）



传统

web

应用，通过浏览器

URL

的不同，渲染不同的

html

；单页面应用，通过通过

AJAX

访问数据

API

，后通过不同的实现方式，渲染界面，常见的

component

方式。

单页面应用，类似于移动客户端开发，通过调用数据API实现

单页面应用

单页面应用（SPA）是旨在对Web应用发动革命的软件运动中可信度很高的一种。此类应用有望进行更加模块化的开发，令应用更加容易地适配与多个设备，并拥有更好的应用生命周期管理—这些几乎是软件架构师希望的全部。（百度百科）

什么鬼？！不过写的不错，比如：

模块化

适配

生命周期管理

我自己的理解 , 单页面应用（

Single Page Application

-

SPA

） ，通过一个入口（

index.html

），一次性加载（懒加载）所需的资源（

js

,

css

,

img

,

font

），所有操作通过

js

实现，包括 路由机制、网络请求和界面渲染 ，使用期间无需重新加载其他页面。

懒加载 ： 用的时候，再去加载

如下图所示：



问题 ：怎么实现 如图最底层的模块？

目前常见的如

Angular

,

React

,

Vue

, 不常见的

Ember

,

Knockout

,

Polymer

,

Riot

均可以实现，

Angular

与

React

学习难度大，内容多，推荐

Vue

了，直接上手。

优势：

前后端分离，架构清晰

前端单独开发，单独测试

良好的交互体验，局部渲染，避免不必要的跳转和渲染

通过API方式获取数据，减少服务器压力

架构

一个好的开发架构，不管是在维护还是开发都会是事半功倍，如果在需求不明确的情况下，也是推荐使用SPA开发，因为不管是添加还是删减功能，都会是十分容易，说不定项目会越做越大。

一个基于SPA的架构

这篇文章中的，也是最常见的一种架构，文章写得不错，推荐下。

简单工作流

一个好的工作流可以让开发事半功倍。

进行产品功能、原型设计

后端数据库设计

根据产品确定前后端的API（or RESTful API），以文档方式纪录

前后端就可以针对API文档同时进行开发

前后端最后进行连接测试

完