JavaScript前端架构设计.ppt

优克普云平台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（Common Module Definition），是SeaJS 在推广过程中对模块定义的规范化产出，该规范明确了模块的基本书写格式和基本交互规则。在 CMD 规范中，一个模块就是一个文件。 开发规范定义 SeaJS框架的目录结构定义 　　以上为基于ＣＭＤ规范设计的一个系统，在模块化设计中。采用ＣＭＤ规范可以规范模块的书写格式、能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。（注：支付宝是采用基于ＣＭＤ规范的SeaJS进行前端架构的） SeaJS模块的编写 　　SeaJS模块标识的定义与目录结构相同，其他关联模块的引入采用require。 SeaJS模块的引用 　　采用require引入关联模块，实现了其他关联模块的动态异步加载。 SeaJS模块接口的导出 　　SeaJS通过module.exports可实现模块公共接口的导出。 SeaJS的程序启动入口 　　SeaJS采用seajs.use为页面JS脚本执行的入口。 编码调试 　　“工欲善其事必先利其器”，在前端编码过程当中，编码调试的工具的选择与技巧的掌握够大幅度提高前端脚本编码的速度与质量。 浏览器选择 编码调试 　　前端ＪＳ脚本的调试选择的浏览器可以根据项目兼容性的需要进行选择，在前期开发阶段建议使用ＩＥ８以上、Chrome、Firefox等集成调试工具比较好的浏览器（选择原生态的，不要被封装过的，如：“双核”浏览器），需要兼容性测试时再选择需要兼容的浏览器。 调试输出 编码调试 自定义调试输出lw.utils.debug 调试输出 　　自定义调试输出在执行时会把输出信息展现在页面的最顶端。 一、JS架构设计的背景 二、JS架构设计 三、总结反思及心得体会 优克普云平台建模的脚本就超过了35000多行 * * 优克普云平台建模的脚本就超过了35000多行 * * * * * * JavaScript架构并不是一成不变的，需要根据不同的场景选用不同的架构。一个小型的应用（如：简单的宣传网站）并不需要引入模块化编程的大框架:RequireJS、SeaJS，因为随着框架灵活性的提升，也相应了增加了前端脚本的数量、牺牲了性能，从而加大了浏览器处理的负担。 * * 一、JS架构设计的背景 淘宝前端工程师的增长 前端架构的重要性 阿里巴巴页面性能优化 前端架构的重要性 页面性能优化： 20秒 12秒 8.5秒 ? 脚本数量的庞大 前端架构的重要性 　　脚本homeConsole.js达到了13389行（未包含注释与空行）,压缩后达到527kb！ 不同浏览器支持的需要 为什么要架构设计 用户观念改变的需要 为什么要架构设计 构建庞大项目的需要 为什么要架构设计 项目的需要 为什么要架构设计 没有架构设计的弊端 二、JS架构设计 1、JavaSc