四个维度

  • 系统级(尽可能提高网站的可访问性以及可用性)
    • 服务器
    • 域名申请、备案以及解析
    • 全站HTTPS支持
    • 流量预估
    • 静态资源CDN加速
    • web server选型(nginx,apache,node)
    • BFF Or GraphQL
  • 工程级(尽可能提高工程框架易用性以及可伸缩性)
    • 前端框架选型(vue,react)
    • 工程中三方依赖库分析(包含UI库)
    • 工程化构建工具选型(webpack,parcel,rollup)
    • 工程复杂度分析,一般以页面数量来定义。如果足够复杂建议使用ts增强系统稳定性
    • 国际化支持
    • 图标库引入
  • 业务级(通过业务梳理、系统划分、共性抽象,提高系统完整性以及可拆分性)
    • 系统分析。根据业务拆分系统对应不同endpoint。
    • 页面分析。根据业务需求划分页面。
    • 前端路由管理,根级路由做redirect,一级路由做UI壳,二级路由做具体业务,三级路由做子业务。不超过三级。
    • 数据源管理。分析工程中依赖数据及操作,xhr工具类定义,以及数据获取方法定义。
    • 全局状态管理。先梳理业务逻辑所需数据结构,而后分析可能触发状态更改的action,然后分析可能同步到页面的getter。
    • 公共组件封装。分析工程中可重用结构,抽象后定义组件。
    • 公共样式提取。分析工程中可重用样式,抽象后定义公共样式(如mixin、原子类、基本变量)。
    • 公共行为混入。分析工程中可重用行为,抽象后定义行为。
    • 帮助类定义。分析工程中工具方法的使用场景,比如merge等等。
    • 过滤器定义。分析工程中过滤器的使用场景,比如状态、类型、时间戳等等的格式化。
  • 代码级
    • 代码规范工具选择(prettier,eslint)
    • 实现数据源
    • 实现全局状态管理
    • 实现公共组件,公共样式,公共混入,帮助类,过滤器
    • 实现页面
分类: technology

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据