JavaScript前端架构设计v1.6

JavaScript前端架构设计v1.6第一页，共70页。一、JS架构设计的背景第二页，共70页。淘宝前端工程师的增长前端架构的重要性第三页，共70页。阿里巴巴页面性能优化前端架构的重要性页面性能优化：20秒

12秒

8.5秒?第四页，共70页。脚本数量的庞大前端架构的重要性脚本homeConsole.js达到了13389行（未包含注释与空行）,压缩后达到527kb！第五页，共70页。不同浏览器支持的需要为什么要架构设计第六页，共70页。用户观念改变的需要为什么要架构设计第七页，共70页。构建庞大项目的需要为什么要架构设计第八页，共70页。项目的需要为什么要架构设计第九页，共70页。没有架构设计的弊端第十页，共70页。二、JS架构设计第十一页，共70页。1、JavaScript架构演变历程第十二页，共70页。2、JS前端架构的步骤第十三页，共70页。２.1松散型的模块化设计没有使用具体的模块化设计的框架，根据业务模块需求进行脚本的设计，不同页面对自身调用的模块进行按需引用、加载。第十四页，共70页。基于页面的模块代码加载方式松散型的模块化设计模块1代码页面1页面2页面3框架基础库模块公共代码模块2代码模块3代码第十五页，共70页。2.1.1需求确认在JavaScript前端架构之前首先要进行需求的分析、确认。需求确认的内容包括：

１、用户对象2、用户计算机水平3、使用的浏览器4、使用的计算机设备5、主要的操作第十六页，共70页。优克普云PaaS建模平台需求确认通过分析PaaS建模的用户群体，可以得出初步的结论：PaaS建模前端主要关注功能的实现，对浏览器并没有太多的限制要求，浏览器支持IE8以上的版本即可（浏览器支持的减少可以降低前端很多工作量）。第十七页，共70页。2.１.2当前流行的框架框架的选择jQueryDOJOEXTPrototypeYUIJavaScriptMVCMooToolseasyUIminiUI第十八页，共70页。框架与应用的关系框架的选择框架通用lib包product基础库通用组件产品需求第十九页，共70页。框架选择的考虑因素框架的选择第二十页，共70页。2.1.3目录结构定义规则第二十一页，共70页。优克普云平台PaaS前端脚本目录结构目录结构业务无关的公共库第三方框架业务模块的脚本第二十二页，共70页。2.1.4应用编码

第二十三页，共70页。采用闭包的模块设计应用编码第二十四页，共70页。没有采用闭包的开发方法闭包设计

没有采用闭包的设计，所有的属性与方法的定义全部对外开放，其他模块调用API很混乱，并容易引起全局冲突。第二十五页，共70页。采用闭包的模块开发方法闭包设计

采用闭包后，私有的方法与公有的方法进行了区分，外部模块访问不到datalistSelector的私有对象与方法。第二十六页，共70页。通用控件的设计为了提高可复用性、可扩展性，在项目中经常要设计能够符合不同需求的通用控件，通用控件的设计也能够为今后发展自己的框架打下基础。第二十七页，共70页。通用选择框控件的需求第二十八页，共70页。嵌入页面弹出窗口通用选择框最终展示结果第二十九页，共70页。通用选择框的目录结构通用选择框设计展示模板的配置只要更改模板的.html，css样式第三十页，共70页。通用选择框提供简单的接口通用选择框设计

定义通用选择框的模块及对外开放的接口，options参数为外部扩展开发传入的参数。第三十一页，共70页。通用选择框options扩展开发接口通用选择框设计是否多选是否弹出窗口第三十二页，共70页。通用选择框options参数数据源接口通用选择框设计第三十三页，共70页。最终的调用方式通用选择框设计定义以树形方式展示的字典选择框第三十四页，共70页。数据来源格式通用选择框设计第三十五页，共70页。JS前端缓存的设计空间换取时间，缓存永远计算机设计的重中之重，从cpu到io，到处都可以看到缓存的身影，JS前端架构设计重，缓存设计必不可少。JS数据及对象的缓存浏览页面的缓存第三十六页，共70页。模拟k/v形式的简单前端缓存设计前端缓存的设计调用形式Object缓存对象第三十七页，共70页。基于jQuery缓存设计前端缓存的设计第三十八页，共70页。2.3基于CMD规范的模块化设计遵循CMD规范的前端设计具备可维护性、可测试性。在运行启动加载时，每个模块能够按需进行加载。第三十九页，共70页。基于CMD规范的SeaJS

CMD（CommonModuleDefinition），是SeaJS在推广过程中对模块定义的规范化产出，该规范明确了模块的基本书写格式和基本交互规则。在CMD规范中，一个模块就是一个文件。第四十页，共70页。开发规范定义第四十一页，共70页。SeaJS框架的目录结构定义以上为基于ＣＭＤ规范设计的一个系统，在模块化设计中。采用ＣＭＤ规范可以规范模块的书写格式、能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。（注：支付宝是采用基于ＣＭＤ规范的SeaJS进行前端架构的）第四十二页，共70页。SeaJS模块的编写SeaJS模块标识的定义与目录结构相同，其他关联模块的引入采用require。第四十三页，共70页。SeaJS模块的引用采用require引入关联模块，实现了其他关联模块的动态异步加载。第四十四页，共70页。SeaJS模块接口的导出SeaJS通过module.exports可实现模块公共接口的导出。第四十五页，共70页。SeaJS的程序启动入口SeaJS采用seajs.use为页面JS脚本执行的入口。第四十六页，共70页。编码调试“工欲善其事必先利其器”，在前端编码过程当中，编码调试的工具的选择与技巧的掌握够大幅度提高前端脚本编码的速度与质量。第四十七页，共70页。浏览器选择编码调试前端ＪＳ脚本的调试选择的浏览器可以根据项目兼容性的需要进行选择，在前期开发阶段建议使用ＩＥ８以上、Chrome、Firefox等集成调试工具比较好的浏览器（选择原生态的，不要被封装过的，如：“双核”浏览器），需要兼容性测试时再选择需要兼容的浏览器。第四十八页，共70页。调试输出编码调试第四十九页，共70页。自定义调试输出lw.utils.debug调试输出

自定义调试输出在执行时会把输出信息展现在页面的最顶端。第五十页，共70页。断点编码调试通过F12打开调试窗口，找到需要断点的代码设置断点；也可以在JavaScript代码中加入一句debugger来手工造成一个断点效果。第五十一页，共70页。Chrome调试时自动清除前端缓存的设置编码调试第五十二页，共70页。IE11调试时自动清除前端缓存的设置编码调试第五十三页，共70页。3发布发布规则第五十四页，共70页。压缩合并工具采用雅虎的yuicompressorJavaScript脚本压缩工具结合ant脚本进行脚本的压缩与合并。第五十五页，共70页。云平台公共脚本库压缩合并的Ant脚本第五十六页，共70页。版本发布的注意事项第五十七页，共70页。三、总结反思及心得体会第五十八页，共70页。1、总结第五十九页，共70页。2、反思第六十页，共70页。3、学习心得体会需要熟练应用HTML、DIV与CSS学习心得体会第六十一页，共70页。了解原生态的DOM编程、接触并了解Ajax的原理学习心得体会第六十二页，共70页。了解不同浏览器之间的差异学习心得体会第六十三页，共70页。掌握几种开发测试工具学习心得体会第六十四页，共70页。熟悉JavaScript每一个方法