《JavaScript前端架构设计v1.6》由会员分享，可在线阅读，更多相关《JavaScript前端架构设计v1.6（70页珍藏版）》请在金锄头文库上搜索。
1、 一 、 J S 架 构 设 计 的 背 景二 、 J S 架 构 设 计三 、 总 结 反 思 及 心 得 体 会一、JS架构设计的背景淘宝前端工程师的增长前端架构的重要性成立之初，10个人团 队，1名UED工程师现在，支付宝就有100 多名前端工程师团队阿里巴巴页面性能优化前端架构的重要性页面性能优化： 20秒 12秒 8.5秒 ?脚本数量的庞大前端架构的重要性脚本homeConsole.js达到了13389行（未包含注释与空行）,压缩后达到527kb！不同浏览器支持的需要单一的 IE浏览 器多种浏 览器支 持为什么要架构设计用户观念改变的需要追求酷 炫效果注重交 互体验为什么要架构设计构
2、建庞大项目的需要单一页 面脚本大型项 目脚本为什么要架构设计项目的需要大部分时 间花在后 台代码编 写大部分时 间花在前 台代码编 写为什么要架构设计没有架构设计的弊端1、难以维护2、应用加载缓慢3、体验性差4、重复编码5、扩展困难一 、 J S 架 构 设 计 的 背 景二 、 J S 架 构 设 计三 、 总 结 反 思 及 心 得 体 会二、JS架构设计1、JavaScript架构演变历程第1时期 ，“混沌 时代”第2时期 ，框架时 代第时期 ，模块化 设计2、JS前端架构的步骤需求确认框架选型目录结构应用编码发布.1 松散型的模块化设计没有使用具体的模块化设计的框架，根据业务模块需求进
3、行脚本的设计，不同页面对自身调用的模块进行按需引用、加载。基于页面的模块代码加载方式松散型的模块化设计模块1代码页 面 1页 面 2页 面 3框架基础库模块公共代码模块2代码模块3代码2.1.1 需求确认在JavaScript前端架构之前首先要进行需求的分析、确认。需求确认的内容包括：、用户对象2、用户计算机水平3、使用的浏览器4、使用的计算机设备5、主要的操作优克普云PaaS建模平台需求确认开发人员、信息中心管理员用户对象高计算机水平能够根据要求使用特定的浏览器使用的浏览器性能较好使用的计算机设备进行组织架构管理、授权管理、数据建模、业 务建模及系统参数等的配置主要的操作通过分析PaaS建模
4、的用户群体，可以得出初步的结论：PaaS建模前端主要关注功能的实现，对浏览器并没有太多的限制要求，浏览器支持IE8以上的版本即可（浏览器支持的减少可以降低前端很多工作量）。2.2 当前流行的框架框架的选择jQueryDOJO EXTPrototypeYUIJavaScriptMVCMooToolseasyUIminiUI框架与应用的关系框架的选择框架通用lib包product基础库通用组件产品需求框架选择的考虑因素项目需要 的浏览器 支持满足需求 的丰富的 组件框架的稳 定性框架的成 熟度扩展的容 易程度学习的成 本框架的选择2.1.3 目录结构第三方框架引用的独立定义与业务无关的公共部分的独
5、立定义与模块业务相关的公共部分的独立定义模块相关的独立定义定义规则优克普云平台PaaS前端脚本目录结构项目jslwlinewell.jslinewell.utils.jsjQueryjquery.jspluginsminiuiztreemodulejscommondatalistaddDatalist.jslistDatalist.jsobjects目录结构业务无关的公共库第三方框架业务模块的脚本2.1.4 应用编码可扩 展性可维护 性灵活 性采用闭包的模块设计使用闭包来封装“隐私”、状态和结构包裹公开和私有的方法和变量，避免污染全 局作用域避免与其他开发人员的接口冲突只返回公开的API，此外
6、的一切则是封闭和 私有的。应用编码没有采用闭包的开发方法闭包设计没有采用闭包的设计，所有的属性与方法的定义全部对外开放，其他模块调用API很混乱，并容易引起全局冲突。采用闭包的模块开发方法闭包设计采用闭包后，私有的方法与公有的方法进行了区分，外部模块访问不到datalistSelector的私有对象与方法。通用控件的设计为了提高可复用性、可扩展性，在项目中经常要设计能够符合不同需求的通用控件，通用控件的设计也能够为今后发展自己的框架打下基础。通用选择框控件的需求原始 需求1、应用系统的字典需要能够通过树形、列表的方式进行选择2、应用系统使用组织架构需要能够以树形的方式进行展示、选择3、应用系统
7、使用组织架构需要提供按部门、角色、岗位等方式展示人员进行选择4、通用选择可以是弹出窗口的形式，也可以作为控件嵌入页面5、需要提供搜索的功能6、可以支持单选、多选扩展 需求1、支持不同数据来源、不同形式的可展示位列表与树形的数据2、可以定制通用选择框的模板3、能够组装选中后的数据格式嵌入页面弹出窗口通用选择框最终展示结果通用选择框的目录结构通用选择框设计展示模板的配置只要更改模板的.html，css样式通用选择框提供简单的接口通用选择框设计定义通用选择框的模块及对外开放的接口，options参数为外部扩展开发传入的参数。通用选择框options扩展开发接口通用选择框设计是否多选是否弹出窗口通用选
8、择框options参数数据源接口通用选择框设计最终的调用方式通用选择框设计定义以树形方式展示的字典选择框数据来源格式通用选择框设计返回的数 据格式JSON数组JSON单 个对象需要包含显示 值与实际值的 两个属性树形 JSON逐级加载JS前端缓存的设计空间换取时间，缓存永远计算机设计的重中之重，从cpu到io，到处都可以看到缓存的身影，JS前端架构设计重，缓存设计必不可少。JS数据及对象的缓存浏览页面的缓存模拟k/v形式的简单前端缓存设计前端缓存的设计调用形式Object缓存对象基于jQuery缓存设计前端缓存的设计2.3 基于CMD规范的模块化设计 1.灵活架构，焦点分离 2.方便模块间组合
9、、分 解 3.方便单个模块功能调 试、升级 4.多人协作互不干扰 可维护性 1.可分单元测试 可测试性遵循CMD规范的前端设计具备可维护性、可测试性。在运行启动加载时，每个模块能够按需进行加载。基于CMD规范的SeaJSCMD（Common Module Definition），是SeaJS 在推广过程中对模块定义的规范化产出，该规范明确了模块的基本书写格式和基本交互规则。在 CMD 规范中，一个模块就是一个文件。开发规范定义SeaJS框架的目录结构定义以上为基于规范设计的一个系统，在模块化设计中。采用规范可以规范模块的书写格式、能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。
10、（注：支付宝是采用基于规范的SeaJS进行前端架构的）SeaJS模块的编写SeaJS模块标识的定义与目录结构相同，其他关联模块的引入采用require。SeaJS模块的引用采用require引入关联模块，实现了其他关联模块的动态异步加载。SeaJS模块接口的导出SeaJS通过module.exports可实现模块公共接口的导出。SeaJS的程序启动入口SeaJS采用seajs.use为页面JS脚本执行的入口。编码调试“工欲善其事必先利其器”，在前端编码过程当中，编码调试的工具的选择与技巧的掌握够大幅度提高前端脚本编码的速度与质量。浏览器选择编码调试前端脚本的调试选择的浏览器可以根据项目兼容性的
11、需要进行选择，在前期开发阶段建议使用以上、Chrome、Firefox等集成调试工具比较好的浏览器（选择原生态的，不要被封装过的，如：“双核”浏览器），需要兼容性测试时再选择需要兼容的浏览器。调试输出alert最基本的输出方式console.logFiredebug的输出方式，IE从8.0开始引入，chrome默 认就有，使用与alert一样，在console窗口数据结构自定义输出在云平台的公共库中，定义了lw.utils.debug输出调试 的结果编码调试自定义调试输出lw.utils.debug调试输出自定义调试输出在执行时会把输出信息展现在页面的最顶端。断点编码调试通过F12打开调试窗口
12、，找到需要断点的代码设置断点；也可以在JavaScript代码中加入一句debugger来手工造成一个断点效果。Chrome调试时自动清除前端缓存的设置编码调试IE11调试时自动清除前端缓存的设置编码调试3发布对公共脚本进行压缩并合并对各模块脚本进行压缩发布压缩的版本，并设置调 用的版本号发布规则压缩合并工具采用雅虎的yuicompressor JavaScript脚本压缩工具结合ant脚本进行脚本的压缩与合并。云平台公共脚本库压缩合并的Ant脚本版本发布的注意事项1、在项目编码时需要把引用脚本的公共部分独立出来独立公共的引用部分，避免发布时每个文件都需要更改2、发布时需要加入版本发布时在文件
13、名后加入版本，如：lw.js?version=1，避免浏览器端缓存3、SeaJS的发布SeaJS可以通过ngnix的合并功能，在加载的时候进行动态合并 https:/ style/1.0.2/seajs-style.js,seajs/seajs-log/1.0.0/seajs-log.js,jquery/jquery/1.7.2/jquery.js一 、 J S 架 构 设 计 的 背 景二 、 J S 架 构 设 计三 、 总 结 反 思 及 心 得 体 会三、总结反思及心得体会1、总结架构要从需求的角度出发去考虑不存在放之四海皆准的前端架构只有合适的架构，没有最好的架构架构要与时俱进架构要不断积累2、反思需要对不同场景的应用架构进 行实践要能够更多学习基于互联网的 先进架构技术引入到项目中在项目中架构要有更多的积累 ，形成成熟的框架3、学习心得体会需要熟练应用HTML、DIV与CSS学习心得体会了解原生态的DOM编程、接触并了解Ajax的原理学习心得体会了解不同浏览器之间的差异学习心得体会掌握几种开发测试工具学习心得体会熟悉JavaScript每一个方法的作用学习心得体会采用闭包、面向对象的方式进行开发学习心得体会学习AMD、CMD规范，MVC、MVVC模式学习心得体会读开源的框架，了解架构。学习心得体会我远没有达到精通，还一直在路上学习心得体会
