YUI 读码日记之 YAHOO.util.Dom - Part.1_YUI.Ext相关

先绕开头部很多的 if...else (其实就是定义 toCamel 与 getStyle 两个函数) - 由于浏览器的实现不统一,才造成如此麻烦的情况,回头可以聊聊这些代码。

下面我们在 YAHOO.util.Dom 类中看看有哪些宝藏。目前思想已经逐步的分裂,我看见个函数说个函数。

// 基本上可以认为是 document.getElementById 的翻版
get: function(el) {
    // 如果已经是 HTMLElement ,那么就直接返回
    if (el && (el.nodeType || el.item)) {
        return el;
    }

    // 如果是字符串,那么就返回有这个 ID 的 Element
    if (YAHOO.lang.isString(el) || !el) {
        return document.getElementById(el);
    }

    // 看起来是个数组,循环调用自身,获取 Eelement
    if (el.length !== undefined) {
        var c = [];
        for (var i = 0, len = el.length; i < len; ++i) {
            c[c.length] = Y.Dom.get(el[i]);
        }

        return c;
    }

    return el;
},这段代码写得非常的精妙。坦白的说,上述代码中的循环体,如果不加思索的话,恐怕就会写成

for (var i = 0, len = el.length; i < len; ++i) {
    c[c.length] = document.getElementById(el[i]);
}虽然也能正常工作,但是前面的判断就失去了意义。

继续走马观花,现在看看 getElementsByClassName 的内部机制。有关 getElementsByClassName 的详细调用,可以参看 YUI 文档。

getElementsByClassName: function(className, tag, root, apply) {
    // 获取 tag 标签,默认为所有(“*”)
    tag = tag || '*';
    // 指定跟节点名
    root = (root) ? Y.Dom.get(root) : null || document; 
    if (!root) {
        return [];
    }

    // 初始化节点信息
    var nodes = [],
        elements = root.getElementsByTagName(tag),
        re = getClassRegEx(className);

    // 滤掉不符合规则的节点
    for (var i = 0, len = elements.length; i < len; ++i) {
        if ( re.test(elements[i].className) ) {
            // 你一定很奇怪为什么用 nodes.length 而不是用 i
            // 仔细考虑下 :^)
            nodes[nodes.length] = elements[i];
            // 执行回调函数
            if (apply) {
                apply.call(elements[i], elements[i]);
            }
        }
    }

    return nodes;
},教科书式的 DOM 节点获取和过滤,初始化数据以及操作数据都显得非常的严谨而且正规,YUI 的代码让我有几分的“安全感”。类似的,再来一个 getElementsBy 函数,相应代码如下

getElementsBy: function(method, tag, root, apply) {
    // 与上述函数相同,略
    tag = tag || '*';
    root = (root) ? Y.Dom.get(root) : null || document; 

    if (!root) {
        return [];
    }

    var nodes = [],
        elements = root.getElementsByTagName(tag);

    for (var i = 0, len = elements.length; i < len; ++i) {
        // 根据自定义函数返回值判断节点的属性
        if ( method(elements[i]) ) {
            nodes[nodes.length] = elements[i];
            if (apply) {
                apply(elements[i]);
            }
        }
    }

    return nodes;
},OK,今天就先到这里。

时间: 2024-09-20 05:51:40

YUI 读码日记之 YAHOO.util.Dom - Part.1_YUI.Ext相关的相关文章

javascript YUI 读码日记之 YAHOO.util.Dom - Part.4_YUI.Ext相关

var getXY = function() {     // 判断是否是 IE     if (document.documentElement.getBoundingClientRect) {         // 注1         return function(el) {             var box = el.getBoundingClientRect();             var rootNode = el.ownerDocument;             

YUI 读码日记之 YAHOO.lang.is*_YUI.Ext相关

YAHOO.lang = YAHOO.lang || {     isArray: function(o) {          if (o) {            var l = YAHOO.lang;            // 如果该对象有 length 这个属性,同时支持 splice 方法,            // 那么就认为它为数组.            return l.isNumber(o.length) && l.isFunction(o.splice);   

学习YUI.Ext第五日--做拖放Darg&amp;amp;Drop_YUI.Ext相关

拖放某个元素Darg&Drop是windows(视窗)问世时的一个重要特征.现在我们要在浏览器里面实现,怎么做呢?先看看基本例子: 复制代码 代码如下: YAHOO.example.DDApp = function() {      var dd;      return {          init2: function() {  //   var dropzone =["dz"];  //   for(i in dropzone){  //           new Y

javascript-请教一下YAHOO.util.Connect.asyncRequest的用法

问题描述 请教一下YAHOO.util.Connect.asyncRequest的用法 通过这段代码YAHOO.util.Connect.asyncRequest('POST''/xpe/jingpinke/service/security/json/login' callback null)把POST请求发送给服务器端 和我直接用post请求发送给服务器端有什么区别 ??我如何通过java代码模拟这段JS代码提交数据给服务器. 解决方案 参考Java利用httpasyncclient进行异步H

学习YUI.Ext第七日-View&amp;amp;JSONView Part Two-一个画室网站的案例_YUI.Ext相关

之前在Part 1简单介绍了Veiw和JSONView.今天这里小弟为大家说说应用的案例,原本Jack的Image Chooser是一个非常好的案例,当中包含Jack大量的奇技淫巧,不过正因为这样,过于深奥,小弟我亦不能全盘吃透,只挑其"勃大茎深"之处,与君共勉之!本文包含四大知识点:1.在LayoutDialog中加入Tabs:2.View的使用方式:3.JSONView的使用方式;4.获取XML/JSON的fields值与分页 演示地址 [View之定义]  A View is g

如何简单地用YUI做JavaScript动画_YUI.Ext相关

原文地址:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/ YUI的动画类简直就是一门艺术工作.不像其它的传统的JS库,提供了已经"预设好"的直接可运行的效果,相反,它由开发者做自己喜欢的.在这点,我比较喜欢适当地运行一些动画和变换效果,越多越好. 按照这么地说,也会有个问题.动画API是非常"底层"的工作,而且需要您花时间去弄的,子类的构

为Yahoo! UI Extensions Grid增加内置的可编辑器_YUI.Ext相关

原文地址 文章日期:2006/9/10 对YUI-EXT GIRD功能需求最强烈的是内置可编辑的支持.市场上大多数收费的JAVASCRIPT GIRD,我看过的那些可编辑支持,并没有给我留下太深的印象.它给你一个基本的TEXT FIELD,一些CHECKBOXS或者是Select fields,这导致了你一边单击某个字段在编辑,另一边厢插入一个FORM到这个单元格之中,不知不觉地,会出现越来越多编辑过的"脚印footprint",尤其是IE,在很多行的情况下. 所以我决定不采用这种方法

从Chrome源码看浏览器如何构建DOM树

这几天下了Chrome的源码,安装了一个debug版的Chromium研究了一下,虽然很多地方都一知半解,但是还是有一点收获,将在这篇文章介绍DOM树是如何构建的,看了本文应该可以回答以下问题: IE用的是Trident内核,Safari用的是Webkit,Chrome用的是Blink,到底什么是内核,它们的区别是什么? 如果没有声明<!DOCTYPE html>会造成什么影响? 浏览器如何处理自定义的标签,如写一个<data></data>? 查DOM的过程是怎么样的

java.util.concurrent包源码阅读(二) java.util.concurrent.atomic包

Aomic数据类型有四种类型:AomicBoolean, AomicInteger, AomicLong, 和AomicReferrence(针对Object的)以及它们的数组类型, 还有一个特殊的AomicStampedReferrence,它不是AomicReferrence的子类,而是利用AomicReferrence实现的一个储存引用和Integer组的扩展类 首先,所有原子操作都是依赖于sun.misc.Unsafe这个类,这个类底层是由C++实现的,利用指针来实现数据操作 关于CAS