JavaScript前端架构设计v1.6

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