- 浏览: 1466440 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
node-debug.js :
Node 为 HTMLElement包装(处理了缓存),关键 addMethod ,importMethod 将 Y.DOM 中的静态方法(YUI2模型)迁移到 Node实例中去.
Y.DOM.method(node,args); ==> node.method(args);
NodeList 为 多个 htmlelements的包装,关键也为 NodeList.addMethod 以及NodeList.importMethod,同Ext
.compositeElement
类似
将Node的方法也加到NodeList中去,并调用时自动循环对nodelist中的所有元素调用对应方法。
event-custom-debug.js & event-simulate-debug.js
自定义事件处理系统和原生dom处理事件系统完全接口一致(不同于Extjs,node和组件的事件处理完全分离,yui3 Node和组件其实都是 augment 自 EventTarget):除了dom模拟触发需要 node.simulate 而自定义事件需要obj.fire。
YUI当前实例 Y 本身也 augment 自EventTarget,一些全局自定义事件比如windowresize,domready即由 Y触发,可以在Y上处理。
注意 node.simulate并没有采用 jquery自己遍历树结构,挨个执行处理函数的方式,而是利用了浏览器自身的event simulation framework,对于w3c-dom-event2兼容浏览器使用document.createEvent而对于ie则使用document.createEventObject
而dom事件通过 DOMEventFacade 来进行包装,保证各个浏览器的一致性。当emitFacade为true时复杂情况下的自定义事件触发使用 EventFacade 来包装,具有和DOMEventFacade基本一致的属性,EventFacade.detail为fire参数。
事件处理器统一用Subscriber包装,可以方便实现AOP,contextFn动态上下文环境的调用。
并且自定义事件也实现了bubble以及defaultFn功能
(publish必须设置emitFacade为true,调用fireComplex
)
,可方便的实现以前组件必须显式检查beforeShow以及调用者必须监听 beforeShow 等事件来实现AOP拦截,现在只需组件编写者申明事件的defaultFn以及调用者监听 on("show")决定是否preventDefault即可,bubble定义在 EventTarget 中,EventTarget可以通过addTarget添加事件往上传播的通知对象,使得自定义事件也可以通过delegate来简化事件处理。
EventTarget 还另外支持了 jquery 类似的分类事件功能,对同一个事件的一些监听器可以分做一类,类名放在事件名前面用|分隔,以及结合 Base 支持的前缀机制,可以解决不同类的同名事件监听问题,使用例子 。
event-debug.js
不同于dom-event2中添加多个事件处理器由浏览器调度,yui3以及ext每个事件每个元素底层只绑定一个dom2事件处理器,由这个dom2事件处理器再调用绑定在这个事件的所有事件处理函数。
Y.Env.evt.dom_wrappers 为对所有事件的统一处理封装,将每个dom事件映射为自定义事件,每个自定义事件有一个事件处理器绑定到dom节点,该事件处理器再调用所有用户绑定的事件处理函数。
20100427感悟:
事实上 Node.on 调用 Y.on ,而 Y argument 自
EventTarget ,则 相当于在 Y 上添加自定义事件,不同点在于,在Y上添加自定义事件的同时还在dom node上绑定事件当dom事件发生时fire自定义事件,自定义事件fire再调用我们的处理函数,又一次实现了自定义事件与dom事件的统一。
键:
var ek = Y.stamp(el), key = 'event:' + ek + type, cewrapper; if (false === facade) { key += 'native'; } if (capture) { key += 'capture'; }
值 :
cewrapper,类型为 CustomEvent ,这样就和自定义事件完美融合在一起,将dom事件映射到了自定义事件,一个CustomEvent 对应于多个事件处理函数(listeners)
详见函数Y.Event._createWrapper: cewrapper 。
对单个元素单个事件的统一处理,事件发生后 cewrapper.fn 触发,然后再取Y.Env.evt.dom_map 为元素和该 cewrapper 关联的事件处理函数(listeners),再统一依次调用。
精妙的Y.augment :
保证augment后,new出来的示例,在运行相关augment方法时,之前augment来源构造器要在当前实例上运行且只运行一次!
关键源码解析:
Y.each(sProto, function(v, k) { replacements[k] = function() { //任何一函数一运行,就把实例上的所有override函数置为 override来源的原方法 for (i in sequestered) { if (sequestered.hasOwnProperty(i) && (this[i] === replacements[i])) { // Y.log('... restoring ' + k); this[i] = sequestered[i]; } } //保证只会运行一次,不管调用哪个override的方法,一旦调用,this[k]就不是replacements[i]了, construct.apply(this, a); return sequestered[k].apply(this, arguments); }; if ((!wl || (k in wl)) && (ov || !(k in this))) { if (L.isFunction(v)) { //保留override来源的最原始方法 sequestered[k] = v; //为了保证构造器运行且只运行一次,需要暂时替换一下 this[k] = replacements[k]; } else { this[k] = v; } } }, newProto, true);
示例详解:
var comp=function(){}; Y.augment(comp,Y.EventTarget); var two=new comp(); //EventTarget构造函数没有执行 console.log(two._yuievt); //方法为暂时替代方法 console.log(two.on.toString()); //运行一次override函数,EventTarget构造函数作用在实例上,且实例上的所有方法复原 two.on("ok",function(){}); //一切正常 console.log(two._yuievt); console.log(two.on.toString());
总之一句话:yui任何一个函数的调用都很曲折,为了完美的架构以及桥梁承接以前略显陈旧的代码,yui3在性能上确实做出了不少的牺牲。
参考:
YUI3源码 以及 Luke Smith — Events Evolved
Satyen Desai — YUI3: Design Goals and Architecture
发表评论
-
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8637模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
构建前端 DSL
2012-10-11 22:10 5375目前在传统的软件开 ... -
KISSY kisses bootstrap navbar
2012-08-03 01:12 6061看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅 ... -
promise api 与应用场景
2012-02-07 17:34 7404promise 是 commonjs 社区中提出的异步规范,其 ... -
unified event model
2011-10-14 23:02 1792为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2856简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2855场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2274分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 7081作为前端开放的基础安全保证,caja 是目前比较合 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2486这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
just another event model
2011-06-08 20:47 2174事件模型也算是客户端兼容性的一个长期问题,早期 jquery ... -
框架 build 系统介绍
2010-07-11 01:29 1665一个复杂的类库通常都包括很多子模块( jquery@git ... -
querySelectorAll 探讨
2010-07-01 22:35 5266随着css selector engine在越来越多的java ... -
再谈 attribute
2010-06-22 11:37 2685@slideshare 原生: ... -
事件机制探讨
2010-06-21 13:54 2247由于浏览器事件机制的不兼容性,譬如最常见的注册事件差异 ... -
利用Attribute重构:业务与UI分离
2010-06-08 16:54 1595很简单的一个应用 通过按钮来限制输入范围 ,这样的话再 ... -
yui3 loader的串行加载特性
2010-06-04 12:30 1818yui3 的沙箱机制可以在 ... -
yui3下的load事件触发
2010-06-01 13:31 3250以前的一些总结:页面l ... -
理解YUI3 extension:Base.create
2010-05-31 03:01 2009YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的 ... -
google WebFont Loader 源码阅读
2010-05-22 01:04 2792资料: 关于新发 ...
相关推荐
通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...
这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...
**YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库,它提供了丰富的UI组件和工具,用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,...
从YUI2到YUI3看前端的演变
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...
**YUI3简介** YUI(Yahoo! User Interface Library)是雅虎公司开发的一个开源JavaScript库,主要用于构建富互联网应用程序(RIA)。YUI3是YUI的第三个主要版本,它在设计时注重模块化、可扩展性和性能优化,提供了...
在“yui.rar”里,可能包含有如“yui-core”、“yui-dom”、“yui-event”等基础模块,这些模块分别对应核心功能、DOM操作和事件处理。开发者可以通过精确定义配置,选择需要的模块,确保代码高效运行。 YUI还提供...
3. **CSS样式工具**:YUI3包含了一套CSS工具,如样式类名管理器(YUI.addClass, YUI.removeClass等),这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**:YUI3提供了丰富的DOM操作接口,如查找元素(YUI...
3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行。 4. **动画效果**:通过Transition和Anim模块,可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...
1. **YUI 3.0架构**:YUI 3采用了模块化设计,允许开发者按需加载组件,降低了页面加载时间。每个模块都有独立的命名空间,避免了全局变量污染。 2. **核心组件**:YUI 3的核心组件包括事件处理、DOM操作、动画效果...
### YUI3 Cookbook知识点概述 #### 一、YUI3简介 YUI3(Yahoo User Interface Library Version 3)是雅虎开发的一款免费开源的JavaScript库,它为开发者提供了丰富的前端开发工具,包括动画效果、事件处理、DOM操作...
**YUI(Yahoo! User Interface Library)框架API详解** YUI是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可维护的Web应用程序。它包含了一系列模块化的组件,覆盖了用户界面设计、事件处理、...
### YUI3中文文档知识点详解 #### YUI3概述及YUIGlobal对象介绍 **YUI3** 是一个开源的JavaScript库,旨在提供一系列工具和API,帮助开发者构建高性能、高质量的Web应用。YUI3的核心优势在于其模块化的设计、强大...
YUI 3是YUI库的第三个主要版本,与之前的版本相比,它进行了彻底的重构,更加模块化,易于定制和扩展。它遵循CommonJS规范,允许开发者按需加载所需的功能,从而减少了页面加载时间。YUI 3的核心组件包括事件处理、...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...