`
yiminghe
  • 浏览: 1466544 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

YUI3 core阅读笔记

阅读更多

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

 

0
0
分享到:
评论

相关推荐

    yui3-master.zip

    通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...

    YUI3 中tree的两种实现

    这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...

    YUI3 dialog组件

    **YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库,它提供了丰富的UI组件和工具,用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,...

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    yui3-3.17.2最新版

    YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

    YUI3.6文档及示例

    1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...

    YAHOO YUI3简单入门

    **YUI3简介** YUI(Yahoo! User Interface Library)是雅虎公司开发的一个开源JavaScript库,主要用于构建富互联网应用程序(RIA)。YUI3是YUI的第三个主要版本,它在设计时注重模块化、可扩展性和性能优化,提供了...

    yui.rar 例子

    在“yui.rar”里,可能包含有如“yui-core”、“yui-dom”、“yui-event”等基础模块,这些模块分别对应核心功能、DOM操作和事件处理。开发者可以通过精确定义配置,选择需要的模块,确保代码高效运行。 YUI还提供...

    YUI3.7.3 最新版本 带API

    3. **CSS样式工具**:YUI3包含了一套CSS工具,如样式类名管理器(YUI.addClass, YUI.removeClass等),这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**:YUI3提供了丰富的DOM操作接口,如查找元素(YUI...

    yui 资源包

    3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行。 4. **动画效果**:通过Transition和Anim模块,可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...

    yahoo3.0 YUI Examples

    1. **YUI 3.0架构**:YUI 3采用了模块化设计,允许开发者按需加载组件,降低了页面加载时间。每个模块都有独立的命名空间,避免了全局变量污染。 2. **核心组件**:YUI 3的核心组件包括事件处理、DOM操作、动画效果...

    YUI3 Cookbook

    ### YUI3 Cookbook知识点概述 #### 一、YUI3简介 YUI3(Yahoo User Interface Library Version 3)是雅虎开发的一款免费开源的JavaScript库,它为开发者提供了丰富的前端开发工具,包括动画效果、事件处理、DOM操作...

    针对YUI框架API

    **YUI(Yahoo! User Interface Library)框架API详解** YUI是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可维护的Web应用程序。它包含了一系列模块化的组件,覆盖了用户界面设计、事件处理、...

    YUi文档(中文的哦)

    ### YUI3中文文档知识点详解 #### YUI3概述及YUIGlobal对象介绍 **YUI3** 是一个开源的JavaScript库,旨在提供一系列工具和API,帮助开发者构建高性能、高质量的Web应用。YUI3的核心优势在于其模块化的设计、强大...

    yui3.10.3最新版

    YUI 3是YUI库的第三个主要版本,与之前的版本相比,它进行了彻底的重构,更加模块化,易于定制和扩展。它遵循CommonJS规范,允许开发者按需加载所需的功能,从而减少了页面加载时间。YUI 3的核心组件包括事件处理、...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

Global site tag (gtag.js) - Google Analytics