JavaScript前端架构设计v.ppt

一 JS架构设计的背景 淘宝前端工程师的增长 前端架构的重要性 阿里巴巴页面性能优化 前端架构的重要性 页面性能优化 20秒12秒8 5秒 脚本数量的庞大 前端架构的重要性 脚本homeConsole js达到了13389行 未包含注释与空行 压缩后达到527kb 不同浏览器支持的需要 为什么要架构设计 用户观念改变的需要 为什么要架构设计 构建庞大项目的需要 为什么要架构设计 项目的需要 为什么要架构设计 没有架构设计的弊端 二 JS架构设计 1 JavaScript架构演变历程 2 JS前端架构的步骤 1松散型的模块化设计 没有使用具体的模块化设计的框架 根据业务模块需求进行脚本的设计 不同页面对自身调用的模块进行按需引用 加载 基于页面的模块代码加载方式 松散型的模块化设计 模块1代码 页面1 页面2 页面3 框架 基础库 模块公共代码 模块2代码 模块3代码 2 1 1需求确认 在JavaScript前端架构之前首先要进行需求的分析 确认 需求确认的内容包括 用户对象2 用户计算机水平3 使用的浏览器4 使用的计算机设备5 主要的操作 优克普云PaaS建模平台需求确认 通过分析PaaS建模的用户群体 可以得出初步的结论 PaaS建模前端主要关注功能的实现 对浏览器并没有太多的限制要求 浏览器支持IE8以上的版本即可 浏览器支持的减少可以降低前端很多工作量 2 2当前流行的框架 框架的选择 jQuery DOJO EXT Prototype YUI JavaScriptMVC MooTools easyUI miniUI 框架与应用的关系 框架的选择 框架 通用lib包 product 基础库 通用组件 产品需求 框架选择的考虑因素 框架的选择 2 1 3目录结构 定义规则 优克普云平台PaaS前端脚本目录结构 目录结构 业务无关的公共库 第三方框架 业务模块的脚本 2 1 4应用编码 采用闭包的模块设计 应用编码 没有采用闭包的开发方法 闭包设计 没有采用闭包的设计 所有的属性与方法的定义全部对外开放 其他模块调用API很混乱 并容易引起全局冲突 采用闭包的模块开发方法 闭包设计 采用闭包后 私有的方法与公有的方法进行了区分 外部模块访问不到datalistSelector的私有对象与方法 通用控件的设计 为了提高可复用性 可扩展性 在项目中经常要设计能够符合不同需求的通用控件 通用控件的设计也能够为今后发展自己的框架打下基础 通用选择框控件的需求 嵌入页面 弹出窗口 通用选择框最终展示结果 通用选择框的目录结构 通用选择框设计 展示模板的配置只要更改模板的 html css样式 通用选择框提供简单的接口 通用选择框设计 定义通用选择框的模块及对外开放的接口 options参数为外部扩展开发传入的参数 通用选择框options扩展开发接口 通用选择框设计 是否多选 是否弹出窗口 通用选择框options参数数据源接口 通用选择框设计 最终的调用方式 通用选择框设计 定义以树形方式展示的字典选择框 数据来源格式 通用选择框设计 JS前端缓存的设计 空间换取时间 缓存永远计算机设计的重中之重 从cpu到io 到处都可以看到缓存的身影 JS前端架构设计重 缓存设计必不可少 JS数据及对象的缓存 浏览页面的缓存 模拟k v形式的简单前端缓存设计 前端缓存的设计 调用形式 Object缓存对象 基于jQuery缓存设计 前端缓存的设计 2 3基于CMD规范的模块化设计 遵循CMD规范的前端设计具备可维护性 可测试性 在运行启动加载时 每个模块能够按需进行加载 基于CMD规范的SeaJS CMD CommonModuleDefinition 是SeaJS在推广过程中对模块定义的规范化产出 该规范明确了模块的基本书写格式和基本交互规则 在CMD规范中 一个模块就是一个文件 开发规范定义 SeaJS框架的目录结构定义 以上为基于 规范设计的一个系统 在模块化设计中 采用 规范可以规范模块的书写格式 能自动处理模块的依赖 还非常有助于代码组织 开发调试和性能优化 注 支付宝是采用基于 规范的SeaJS进行前端架构的 SeaJS模块的编写 SeaJS模块标识的定义与目录结构相同 其他关联模块的引入采用require SeaJS模块的引用 采用require引入关联模块 实现了其他关联模块的动态异步加载 SeaJS模块接口的导出 SeaJS通过module exports可实现模块公共接口的导出 SeaJS的程序启动入口 SeaJS采用seajs use为页面JS脚本执行的入口 编码调试 工欲善其事必先利其器 在前端编码过程当中 编码调试的工具的选择与技巧的掌握够大幅度提高前端脚本编码的速度与质量 浏览器选择 编码调试 前端 脚本的调试选择的浏览器可以根据项目兼容性的需要进行选择 在前期开发阶段建议使用 以上 Chrome Firefox等集成调试工具比较好的浏览器 选择原生态的 不要被封装过的 如 双核 浏览器 需要兼容性测试时再选择需要兼容的浏览器 调试输出 编码调试 自定义调试输出lw utils debug 调试输出 自定义调试输出在执行时会把输出信息展现在页面的最顶端 断点 编码调试 通过F12打开调试窗口 找到需要断点的代码设置断点 也可以在JavaScript代码中加入一句debugger来手工造成一个断点效果 Chrome调试时自动清除前端缓存的设置 编码调试 IE11调试时自动清除前端缓存的设置 编码调试 3发布 发布规则 压缩合并工具 采用雅虎的yuicompressorJavaScript脚本压缩工具结合ant脚本进行脚本的压缩与合并 云平台公共脚本库压缩合并的Ant脚本 版本发布的注意事项 三 总结反思及心得体会 1 总结 2 反思 3 学习心得体会 需要熟练应用HTML DIV与CSS 学习心得体会 了解原生态的DOM编程 接触并了解Ajax的原理 学习心得体会 了解不同浏览器之间的差异 学习心得体会 掌握几种开发测试工具 学习心得体会 熟悉JavaScript每一个方法的作用 学习心得体会 采用闭包 面向对象的方式进行开发 学习心得体会 学习AMD CMD规范 MVC MVVC模式 学习心得体会 读开源的框架 了解架构 学习心得体会 我远没有达到精通 还一直在路上 学习心得体会