基本认识
架构多种多样，但最终都是为产品服务
多页面架构： 传统的架构， 代码复用和组装化问题
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
- 减少请求
- 合并文件
- 压缩文件
- 自动化方向
- 开发
- 发布
- 测试