从零开始为Web项目定制构建系统（四）——Hello XXXX的SPA版（上）

截至上一版本的项目实验，我们实例项目（a-wgp）的项目功能、构建系统和版本跟踪系统 都有了基本的构造，包括：

• 第一，项目功能 是 一个简单的动态交互页；
• 第二，构建系统丰富了build和start 构建任务的功能；
• 第三，理顺了版本跟踪流程，包括本地私有分支、公共分支和远程库分支的管理；

这些基础功能构造，足以满足一个 由多人协作的中小型动态网站项目 的开发。接着这一版本我们将它转换SPA，一种最基础的SPA程序构造。

Table of Contents

多页网站与单页应用

上一版本可称为「简单交互页」，功能虽然简单，但在技术上反映了 「前单页应用（ pre SPA）」的一些基本的重要特征：

• 第一，无明显的JS程序结构；
• 第二，以网页为单元的多页结构；网站的形式明显；
• 第三，JS原初“胶水”用途，JS函数在全局，且分散；
• 第四，操作DOM很繁琐；

若动态网站功能少，代码规模不大，手动维护如此项目尚可，当程序的「智能」和「功能」不断增加，「程序的结构形态组织技术 」必须改变，这就是SPA时代。

单页应用是Web应用程序的一种

「多页动态网站」的工作模式是比较直观的：以请求网页文件的方式实现；而与多页网站不同，「单页应用」程序在形式（虽然对用户来还是通过浏览器）和结构有了质的不同。

最主要的不同在两点：

第一，SPA要在前端实现 会话路由；Web应用程序 [注] 一般都有一层会话（Session）结构，提供较复杂且有用的事务处理功能，会话之下才是“一张张”的交互页面，在要会话中游走，必要有一个会话的路由的功能；多页网站的 会话路由 主要在服务端实现 ，单页应用必在前端实现；

第二，SPA在前端实现动态渲染View [注] ；交互页面的界面都需要 渲染，实现交互功能，多页网站的界面渲染主要在服务端；单页应用的交互界面必在前端渲染；

注： SPA是一种Web Program，再是一种GP，再是一种交互应用，是一种人事务集中的应用程序。

注：渲染可看成一种高级的计算输出。

更多单页应用程序理论看这里。

工作环境

在开始分析和实作改造之前，我们先回顾一下目前的工作环境（接前一版本）。

./a-wgp 集成多个系统

首先，我们是通过一个实例项目（a-wgp）来试验构建系统的定制，./a-wgp 是我们的实验的数据目录；

其次，./a-wgp 是集成多个「开发系统」的数据宿主，包括a-wgp程序源码，其配套定制的构建系统（wgp-build)，和git系统；

第三，我们有多重的身份或角色来使用这些系统，包括：

• 开发者编程（开发a-wgp的新功能），使用wgp-build构建a-wgp ,包括 编译，调试，部署等；
• 构建系统设计者，使用node技术（npm script），调整wgp-build的构建功能；
• 项目管理者，使用git系统，跟踪版本历史，辅助项目进度与规划（git版本任务有计划的意义）；
• 还有一些一次性的基础工作可以需要维护，例如node环境维护，git分布式系统维护，前文已经完成

工作文档

第四，任何角色的工作都要了解自己的工作环境，包括进度在哪，向哪个方向发展，和可使用什么工具或操作，这些环境（尤其是脑力工作者）严重依赖文档，有了文档你转手项目，从别人处转入，或历时维护项目才会比较容易；

第五，开发者编程(编程和构建）的文档，「项目功能」是看设计案，「构建」看手册（a-wgp buildtool 还没有此文档，只能看技术源码 package.json）；

第六，构建系统设计者「调整构建功能」前的文档，也不存在，只能看技术源码 package.json；

第七，项目管理者「版本跟踪」操作前，需要了解版本状态，文档也不存，只能看技术源码 package.json；

开发者文档

「 编程文档 」 是项目程序的构造设计案，此项目目前没有此文档；「 构建文档 」 可看package.json，或运行$ npm run

[keminlau@localhost a-wgp]$ npm run
Lifecycle scripts included in a-wgp:
  test
    echo "Error: no test specified" && exit 1
  start
    run-p httpserver livereload

available via `npm run-script`:
  livereload
    livereload src -w 1000 -d
  httpserver
    http-server src -c-1 -o
  build
    mkdir build && cp src/* build
  prebuild
    rmdir build

构建系统设计者文档

未知

项目管理者文档

「git分支编制文档」是项目程序的构造设计案；git 分支设计案，此项目目前没有这些文档；跟踪文档 可相看分支状况：

[keminlau@localhost a-wgp]$ git branch 
  dev
* fea-basic-SPA
  fea-simple-UI-page
  master

MPA的SPA改造

理论和工作前提就说这么多，下一节开始本课正题——多页网站改造为单页应用。