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