前端MVVM的应用.ppt

前端MVVM的应用 By 司徒正美 国外比较流行的MVVM knockout ember WinJS kendoui angular montagejs / / / / / / 官网链接 目前好像就我一个人在搞？ 国内的MVVM avalon WHY? 世界总是在进化 Prototype.js 对语言本身进行修复 jQuery 对DOM进行跨浏览器兼容性处理 Backbone 为前端引入“架构”的概念，对絮乱的JS代码进行组织 MVVM —— 。。。。。 立足的时代不同 面临的问题不同 Prototype JS性能奇差，原生函数数量缺乏，　语言的特征尚待发掘 Ftotype.bind的发明， 类的模拟， AJAX应用 jQuery Firefox借尸还运魂，致力于为JS添加更多新方法，新特征。 浏览器商划分为IE与W3C两大阵营，DOM兼容变得可行而迫切。 brower sniff 淡出 feture detect流行，人们开始发掘DOM的宝藏。 jQuery时代的问题 过度于依赖选择器频繁遍历DOM树； 然后利用DSL式智能API频繁操作元素； DOM树就像一片变得越来越肥沃的土地； jQuery插件就像一辆辆耕作的拖拉机； 于是出现撞车问题； 后jQuery时代的问题 移动端的崛起 手机浏览器的性能与IE6持平，各种奇异的BUG， jQuery对插件管理的失控——$.sub的出现与移除 Backbone ——后端MVC的简单移植 引入类管理 引入路由系统 引入历史管理 依重事件代理弥消前端模板对DOM树结构的破坏 既要处理业务逻辑 又要随时同步视图 还要处理AJAX带来的历史管理问题 看似什么都做，但什么也没做 代码越写越多 三个小和尚被一大堆SB整死的故事重演 大失败！ 此时期的其他实践 前端模板的流行 加载器 由于Deferred发展出来的Promise规范 字符串拼接 requireJS 与 seajs 依赖管理， 并行加载， 别名机制，shim机制，包机制。。。 数以百计的前端模板 不使用with: mmTemplate, artTemplate, handlebars, mustache, juicer, doT 低逻辑： mustache 使用with: tmpl, yayaTemplate, aceTemplate, underscoreTemplate ,kissyTemplate 不使用定界符：aceTemplate 异步管理 回调地狱 异步中的出错捕获 Mochikit Deferred Dojo Deferred JSDeferred (巅峰之作， 包含未来Promise的所有隐藏元素) jQuery Deferred(不完全的Promise) When.js Q.js RSVP mmDeferred Deferred的要求，异常总是被捕获，失败了转入出错列队，处理后继续转回正常列队第一次触发总是异步的 /defer/defer.html Promise/A的要求：触发回调的对象Deferred 与接受回调的对象Promise要分离，存在then方法来接受正常回调，出错回调与通知回调，then位于Promise上，并总返回新的Promise 因此最佳的实践由Deferred对象构成三条单链 而jQuery是三条函数数组，重用一个Promise，只是改变状态，并在抛错时死无全尸 前端模板，加载器， Deferred/Promise 维护性 但最关键的问题没有解决 JS代码与HTML的强耦合 JS代码必须在页面出来才能动手 眼花缭乱的选择器 write less do more ? 堆得快，死得快 ? 豆腐渣工程 MVVM的产生 微软2005年左右发明 WFP 1. 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 2. 可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 3. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。 4. 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。 对VM的操作成为JS编程的核心 var M= { firstName: “”, lastName: “”, fulllName: “” } knockout function ViewModel(){