基本认识
架构多种多样,但最终都是为产品服务
多页面架构: 传统的架构, 代码复用和组装化问题
SPA:组件化,性能问题(按需加载,对框架不了解容易出现性能问题),释放内存问题,如何发布与快速迭代
前端架构的基础
- 技术基础
- 语言基础:js,css,html
- 基本框架和类库:更高效的编码,模块化管理工具(requirejs, seajs), mvx框架(mvc,mvvm)
- 设计模式: 继承&重用
- 性能优化: http cache,local cache, compress(代码压缩),DOM渲染(前端性能最吃性能的地方)
- 其它: restful API , 自动化(如何提升开发效率、把代码更有效的发布、提升团队合作),跨终端适配,代码托管
- 产品设计发布和迭代基础
- 产品设计时参与其中
- 产品发布:文件类型直接放到服务器上,自动化工具自动发布
- 数据分析和优化
- 分析与统计然后发现问题,初期使用现有的数据统计工具(最终是为了改善产品,跳出技术思维)
前端架构设计
- 架构组织的维度
- 目录层面:
- 更高效的组织开发目录:视图层、数据层、控制层;模块层;基础服务型;测试用例型;最终代码层(需要发布的代码,不能手动修改,由其它代码转化而来)
- css、js、图片分开存放:往往不是出于技术角度考量,而是从团队协作和迭代和管理层面出发
- 页面层面:
- 公用部分抽出来在一个页面,其它页面引用
- 模块化划分:页面比较到达到几十上百后使用模块来组织
- 功能层面
- 组件化和设计模式层面:多指js代码
- js的继承(原型链)与扩展(浅拷贝与深拷贝)
- 命名空间:使用闭包(避免在闭包里申明过多变量和过长字符,会造成内存泄漏)
- 组件化依赖管理:cmd(按需加载)和AMD(依赖关系前置)规范
- CMD和AMD的区别
- CMD:按需加载,在需要使用某一模块时在导入
- AMD: 依赖前置,事先知道需要用用哪些模块,提前加载进来
前端架构实施
- 前端架构需要思考的问题
- 更合理的技术选型
- 需求分解,模块的边界划分
- 自动化的发布和快速迭代(特别是涉及到缓存部分)
- 如何降低维护成本:
- 前端优化思路
- 代码层面:code review (查看别人代码)和 代码规范
- 架构层面: 可扩展性是否收到制约
- 协议层面: 通过http(s)协议优化
- 综合: 通过多种技术的综合使用
- 前端自动化
- 前端自动化基础:nodejs、grunt、gulp、webpack
- 减少请求
- 合并文件
- 压缩文件
- 自动化方向
- 开发
- 发布
- 测试