摘要:本篇主要介绍 MPVC 中的关键组件:Pagelet页面消息的包装类,里面包含更新视图的所需要的信息:Html 代码,插入位置,额外的 Json 数据参考等信息。一个 Pagelet 对应一个前端的构建块,Pagelet 的作用包括:添加、修改构建块删除构建块向构建块发送 Json 消息PageletProcessor解析 Pagelet 里面的信息,并进行处理,完成视图更新。NavigationManager处理虚拟页面切换,并管理 Url 历史。加载一个新页面,可以理解为在一个特定区域内加载一个页面级的 Pagelet,并将原来的页面实例 Dispose 掉。在查看列表类页面时,列表页面不
阅读全文
摘要:现在设计一个系统,目标为达到以下要求:页面由若干可复用的构建块组件,构建块可以嵌套不同的页面只需要在后台将构建块按层级关系组装在一些即可,无需编写额外的代码在交互过程中,可以刷新某个或某几个构建块来达到更新视图的目的主要面临的挑战为:模块的级联更新问题在用户操作时将引发一系列的模块更新,它们如何同用户操作建立联系,即这种事件订阅关系如何生成?解决方案:对于父子关系的组件,由于构建块之间是层层嵌套的关系,底层的事件可以自然地冒泡到上层组件,但是这种事件传播又不同于 Dom 层面的事件冒泡。对于处于不同子树上的组件,则使用全局事件进行广播(好在这样的情况并不多)。兄弟节点之间的节点或有公共父节点的
阅读全文
摘要:MPVC 是对 Model Partial-View Controller 的缩写(姑且这样称呼它)。最近看到 MVVM 模式及司徒正美的avalon 框架有一些新的想法。对于 MVVM 的不足有以下考虑:需要在所有模板都要放在前端(也许后端还需要再来一份?)建模只是为了显示需要,哪怕对于不参与逻辑处理的字段都需要进行建模,显得比较麻烦不同的页面需要不同的 VM,维护成本较高对于多页面应用仍然需要编写代码以控制程序工作逻辑最大的美妙之处在于数据模型与视图显示的自动绑定。先抛开 MVC 模式不谈,从头思考下页面的构造与工作流程:对于一个不特定的网页应用来说,页面应该由若干个不同的区块构成,不同的
阅读全文
摘要:8.4% of all hangs in IE9 in the past month are caused by XMLHttpRequest objects blocking the UI thread with a synchronous request.难怪 ClosureLib 不支持同步方式的调用,远程模版调用还是只有用异步的方式进行了。
阅读全文
摘要:setup 和 tearDown 在每个测试方法的开始和结束都会被执行。对于有 dom 结构改变的场景有时候是不可逆的改变,目前只能按一定顺序执行测试方法,使 setup 逻辑只执行一次。框架代码会自动检测以 "test" 开头的测试用例,执行顺序为字母顺序,如果希望按顺序执行测试则需要对命名作一些调整。fireClickSequence 会引发完整的按钮动作过程,比如 mouseDown, click, couseUp, 而 fireClickEvent 仅引发 click 事件,引发事件是直接采用生成对象然后执行 callback 的方法,并非原生的浏览器事件。goog
阅读全文
摘要:一个相当无聊的东西,只是告诉你 html5 canvas 如何进行基本的使用:<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><titl
阅读全文
摘要:简单总结如下:bind 直接绑定 handler 于元素上delegate 绑定事件在父级元素上live 绑定于 document 之上为啥有了 bind 还需要 delegate ?使用 deletegate 不需要为每一个元素都绑定事件处理器,并能处理动态创建的元素的 dom 事件。为啥 delegate 优于 live?它只作用于靠近目标目标元素的父级元素上,不需要冒泡到 document,在需要的时候可以停止冒泡事件;live 需要绑定于特定的 css 选择器,而 delegate 不需要,灵活性更高。为啥还要用 live?一般用于作用广泛的全站事件,比如 hovercard。
阅读全文
摘要:查找指定容器下所有 a 根据属性决定是否应用 ajax 方式加载内容。使用层次深度来控制slide的方向。使用 margin-left/margin-right animation 显示过渡效果。ZH || (ZH = {});ZH.TreeSlider = function () { if (window.history && window.history.pushState) if ($("#slider").length != 0) if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { var
阅读全文
摘要:网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth(包括边线的宽);网页可见区域高: document.body.offsetHeight(包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: document.body.scrollTop; 在ie5之后不用它了。应该用document.documentElemen
阅读全文
摘要:从神奇的"$"函数开始"$"函数将在文档加载完成之后为一个指定的button 绑定事件,这些代码在单个网页中工作正常。但是如果我们还有其它的网页,我们将不得不重复这个过程。[代码]如果我们需要另一个行为的button怎么办?比如象这样:[代码]接下来,更多的问题出现了,我们需要很多这样的button, 这好象也不难。[代码]一个页面里面同种出现了两种button ......[代码]但是呢,不是所...
阅读全文
摘要:参考老赵的这篇俺觉得GC最精华的还是它的高级压缩功能,只不过用起来用点麻烦:最好的是不需要引用第三方类库, 如果需要用得加上编译参数也不需要提供给第三方不要将js写到html中html里面不要有静态函数调用, 比如onclick=XXX不使用['XXX']的形式访问属性,或者说使用['XXX']定义的属性也要使用这样的形式访问,而不能用 A.XXX的形式引用还有永远的那句话: eval is ev...
阅读全文
摘要:最近做项目遇到了经典的IE的resize问题, 估计好多浏览器假死现象都是由它引起的吧,真是可恶~~~, 方法好象也比较简单,就是把事件绑定到dom内一个100%宽度的div上面去.使用Mootools的代码如下:先在页面上添加一个 div , 设置 style :width:100%;height:100%;position:absolute;z-index:-999;dom加载后:代码Code...
阅读全文
摘要:本文由简到繁地介绍了以jQuery作为蓝本的js框架开发步聚, 希望借助本文大家对jQuery这样的框架内部有一个大致的认识。
阅读全文
摘要:本文主要介绍它的事件绑定机制与jquery的应用.
阅读全文