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

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

架构图

经验总结

起因

去年疫情期间在家没事, 想着写一个商城项目沉淀一下本身这些年所学的知识. 通过了一年多的反复改版, 优化, 最终作成了如今这样一个有衡量标准的东西.

这期间走过不少弯路, 作了不少无用功. 想着作一个总结, 加深一下记忆. 也但愿能帮助到你们.

开发目标

咱们想作一个东西出来, 最开始确定有本身的想法: 这些个商城项目都是啥玩意儿, 这么复杂, 调用链这么长, 让人怎么调试, 怎么二次开发...... 随着深刻, 你会慢慢的就总结出一些规律: 作一个xx项目, 至少应该有xxx这些特色, 才能算的上是好东西.

1. 代码能够复用, 或以很小的代价复用: 每一个子页面中只写入占位标签, 用已写好的dom直接替换
2. 前端请求也要有缓存
3. 支持随时刷新: 无论在哪一个子页面刷新, 刷新后仍是当前页面
4. 可配置/方便管理页面: 全部子页面, 统一管理, 有章可循, 方便调试
5. 按需加载: 一个js插件干一种事情, 而且自带模板, css; 并且能够无改动的应用到其余项目中去
6. 支持钩子: 好比管理后台, 每次请求接口前都可以自动调用判断是否登陆的方法
7. 非侵入式, 代码可读性高: 只有一个完整的, 简洁的页面HTML结构; 不是后期经过js拼凑出来的, 并且里边的标签没有多余的属性;
8. 移动端自适应
9. 未完待续......