关于javascript:H5单页面应用SPA架构总结

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

架构图

经验总结

原由

去年疫情期间在家没事, 想着写一个商城我的项目积淀一下本人这些年所学的常识. 通过了一年多的重复改版, 优化, 最终做成了当初这样一个有衡量标准的货色.

这期间走过很多弯路, 做了很多无用功. 想着做一个总结, 加深一下记忆. 也心愿能帮忙到大家.

开发指标

咱们想做一个货色进去, 最开始必定有本人的想法: 这些个商城我的项目都是啥玩意儿, 这么简单, 调用链这么长, 让人怎么调试, 怎么二次开发 …… 随着深刻, 你会缓缓的就总结出一些法则: 做一个 xx 我的项目, 至多应该有 xxx 这些特点, 能力算的上是好货色.

1. 代码能够复用, 或以很小的代价复用: 每个子页面中只写入占位标签, 用已写好的 dom 间接替换
2. 前端申请也要有缓存
3. 反对随时刷新: 不论在哪个子页面刷新, 刷新后还是以后页面
4. 可配置 / 方便管理页面: 所有子页面, 对立治理, 有章可循, 不便调试
5. 按需加载: 一个 js 插件干一种事件, 并且自带模板, css; 而且能够无改变的利用到其余我的项目中去
6. 反对钩子: 比方治理后盾, 每次申请接口前都可能主动调用判断是否登录的办法
7. 非侵入式, 代码可读性高: 只有一个残缺的, 简洁的页面 HTML 构造; 不是前期通过 js 拼凑进去的, 而且里边的标签没有多余的属性;
8. 挪动端自适应
9. 未完待续 ……