JavaScript前端架构设计ppt课件.pptx

《JavaScript前端架构设计ppt课件.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、一、JS架构设计的背景淘宝前端工程师的增长成立之初，10个人团队，1名UED工程师现在，支付宝就有100多名前端工程师团队前端架构的重要性阿里巴巴页面性能优化前端架构的重要性页面性能优化：20秒12秒8.5秒?脚本数量的庞大前端架构的重要性脚本homeConsole.js达到了13389行（未包含注释与空行）,压缩后达到527kb！不同浏览器支持的需要单一的IE浏览器多种浏览器支持为什么要架构设计用户观念改变的需要追求酷炫效果注重交互体验为什么要架构设计构建庞大项目的需要单一页面脚本大型项目脚本为什么要架构设计项

2、目的需要大部分时间花在后台代码编写大部分时间花在前台代码编写为什么要架构设计没有架构设计的弊端1、难以维护2、应用加载缓慢3、体验性差4、重复编码5、扩展困难二、JS架构设计1、JavaScript架构演变历程第1时期，“混沌时代”第2时期，框架时代第３时期，模块化设计2、JS前端架构的步骤需求确认框架选型目录结构应用编码发布２.1松散型的模块化设计没有使用具体的模块化设计的框架，根据业务模块需求进行脚本的设计，不同页面对自身调用的模块进行按需引用、加载。基于页面的模块代码加载方式松散型的模块化设计模块1代码页面

3、1页面2页面3框架基础库模块公共代码模块2代码模块3代码2.1.1需求确认在JavaScript前端架构之前首先要进行需求的分析、确认。需求确认的内容包括：１、用户对象2、用户计算机水平3、使用的浏览器4、使用的计算机设备5、主要的操作优克普云PaaS建模平台需求确认用户对象开发人员、信息中心管理员计算机水平高使用的浏览器能够根据要求使用特定的浏览器使用的计算机设备性能较好主要的操作进行组织架构管理、授权管理、数据建模、业务建模及系统参数等的配置通过分析PaaS建模的用户群体，可以得出初步的结论：PaaS建模前端

4、主要关注功能的实现，对浏览器并没有太多的限制要求，浏览器支持IE8以上的版本即可（浏览器支持的减少可以降低前端很多工作量）。2.１.2当前流行的框架框架的选择jQueryDOJOEXTPrototypeYUIJavaScriptMVCMooToolseasyUIminiUI框架与应用的关系框架的选择框架通用lib包product基础库通用组件产品需求框架选择的考虑因素项目需要的浏览器支持满足需求的丰富的组件框架的稳定性框架的成熟度扩展的容易程度学习的成本框架的选择2.1.3目录结构第三方框架引用的独立定义与业务无

5、关的公共部分的独立定义与模块业务相关的公共部分的独立定义模块相关的独立定义定义规则优克普云平台PaaS前端脚本目录结构项目jslwlinewell.jslinewell.utils.js……jQueryjquery.jspluginsminiuiztreemodulejscommondatalistaddDatalist.jslistDatalist.jsobjects……目录结构业务无关的公共库第三方框架业务模块的脚本2.1.4应用编码可扩展性可维护性灵活性采用闭包的模块设计使用闭包来封装“隐私”、状态和结构包

6、裹公开和私有的方法和变量，避免污染全局作用域避免与其他开发人员的接口冲突只返回公开的API，此外的一切则是封闭和私有的。应用编码没有采用闭包的开发方法闭包设计没有采用闭包的设计，所有的属性与方法的定义全部对外开放，其他模块调用API很混乱，并容易引起全局冲突。采用闭包的模块开发方法闭包设计采用闭包后，私有的方法与公有的方法进行了区分，外部模块访问不到datalistSelector的私有对象与方法。通用控件的设计为了提高可复用性、可扩展性，在项目中经常要设计能够符合不同需求的通用控件，通用控件的设计也能够为今后发

7、展自己的框架打下基础。通用选择框控件的需求原始需求1、应用系统的字典需要能够通过树形、列表的方式进行选择2、应用系统使用组织架构需要能够以树形的方式进行展示、选择3、应用系统使用组织架构需要提供按部门、角色、岗位等方式展示人员进行选择4、通用选择可以是弹出窗口的形式，也可以作为控件嵌入页面5、需要提供搜索的功能6、可以支持单选、多选……扩展需求1、支持不同数据来源、不同形式的可展示位列表与树形的数据2、可以定制通用选择框的模板3、能够组装选中后的数据格式嵌入页面弹出窗口通用选择框最终展示结果通用选择框的目录结构通

8、用选择框设计展示模板的配置只要更改模板的.html，css样式通用选择框提供简单的接口通用选择框设计定义通用选择框的模块及对外开放的接口，options参数为外部扩展开发传入的参数。通用选择框options扩展开发接口通用选择框设计是否多选是否弹出窗口通用选择框options参数数据源接口通用选择框设计最终的调用方式通用选择框设计定义以树形方式展示的字典选择框数据来源格式