H5单页面应用(SPA)架构总结

一: 前端部分

1. 架构图

2. 开发目标

我们想做一个东西出来, 最开始肯定有自己的想法: 这些个商城项目都是啥玩意儿, 这么复杂, 调用链这么长, 让人怎么调试, 怎么二次开发......

随着深入, 你会慢慢的就总结出一些规律: 做一个xx项目, 至少应该有xxx这些特点, 才能算的上是好东西;

最后由这些应该有的特点反推出一个项目的整体设计方案

特点	说明	举例
代码量少/代码可复用	前端html尽量通过js组件自动生成,	1. 通过js插件+json数据生成完整的HTML代码, 2. 每个子页面模板中只写入占位标签, 加载后, 通过js替换占位标签 (但这样可能不利于SEO) 3. js插件尽可能自带模板和css, 并保证不重复加载css
前端请求也要有缓存	根据不同场景缓存后端返回的结果	1. 将请求参数与返回结果缓存下来 2. 可以自由指定缓存时间 (比如管理后台一些数据就不需要缓存, 需要立马看到编辑后的结果)
子页面要方便管理	每个子页面是一个单独的模板, 而不是一大堆塞到body标签中	1. 将子页面分开成一个个模板, 放在template标签中 2. 通过路由器,将模板内容加载到主显示区域