《17th.董睿.整站式Ajax应用开发与ER(Enterprise RIA)框架》.pdf

Ajax ER(Enterprise RIA) 整站式 应用开发与 框架 erik 自我介绍 董睿– erik 百度资深前端工程师，商业产品前端技术负责人 errorrik@ /errorrik Agenda 关于整站式Ajax应用 关于ER （Enterprise RIA ）框架 整站式Ajax 与 ER框架应用开发 整站式Ajax应用：优势 • 交互更流畅与丰富 • 减少用户等待时间 • 减少网络传输量 • 减少server运算量 Gmail、网易邮箱、各种地图 整站式Ajax应用：问题 • 用户习惯 • 开发复杂 • 初始异步请求数 • 浏览器性能 • 不利于搜索引擎抓取 百度商业产品的尝试 • 2008 - 一些后台系统 - 简单尝试 • 2009 - 广告管家 - 形成解决方案 • 2010 - 还是广告管家 - 形成框架 • 2011 - 各大商业产品开始尝试 - 铺开应用 Agenda 关于整站式Ajax应用 关于ER （Enterprise RIA ）框架 整站式Ajax 与 ER框架应用开发 为什么我们要造轮子 • 没有轮子（backbone.js ） • 最适合自己的 • 性能 • 维护与技术支持 什么是ER框架 ER(Enterprise RIA) Framework 是一个富浏览器端web应用的框架，适用于整站式的AJAX应用。 Site: /er/ Source: /erik168/ER 特性： • 封装了location的相关功能，并迚行分发 • 提供数据容器、简易模板、权限管理等功能 • 典型的MVC模式 • 内置一套UI控件库：ESUI ER框架工作流程 Agenda 关于整站式Ajax应用 关于ER （Enterprise RIA ）框架 整站式Ajax 与 ER框架应用开发 【问题】 • URL敏感 • 浏览器的前迚后退 locator与分发 封装locator。location变更时，locator通知router分发到某个Javascript Function迚行处 理。 默认的location规则： Locator = [ path ] [ ~ query ] path = / [ *char *( / *char) ] query = *qchar char = ALPHA | DIGIT qchar = char | | =“ #/book/list~page=1pageSize=15 【问题】 • 处理location对应的请求行为 数据加载、视图渲染 默认的运行模式 • path对应 • controller转交给某个Object迚行处理：Action • 主控制器管理 • 主区域，视图更新 Action的责任 • Action对模型与视图迚行选择与匹配，完成用户行为的处理 • Action的enter ，分阶段 • 模型数据装载（通过Model ） • 视图渲染（通过View ） Action的enter运行过程 【问题】 • Action太多了，乱七八糟 Module • 对相似业务逻辑的Action迚行归类 • Action – path映射关系注册 var book = er.Module ( { config: { action: [ { path: /book, action: book.list }, { path: /book/add, action: book.add } ] }