YUI 读码日记之 YAHOO.util.Dom - Part.1


Posted in Javascript onMarch 22, 2008

先绕开头部很多的 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,今天就先到这里。

Javascript 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 #Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 #Javascript
Javascript的一种模块模式
Mar 22 #Javascript
javascript cookie解码函数(兼容ff)
Mar 17 #Javascript
简单的JS多重继承示例
Mar 13 #Javascript
JMenuTab简单使用说明
Mar 13 #Javascript
JObj预览一个JS的框架
Mar 13 #Javascript
You might like
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript中的this机制
2016/01/30 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
python 性能提升的几种方法
2016/07/15 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python常用类型转换实现代码实例
2020/07/28 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
计算机科学系职业生涯规划书
2014/03/08 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
拖欠货款起诉状
2015/05/20 职场文书
运动会开幕式主持词
2015/07/01 职场文书
队名及霸气口号大全
2015/12/25 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Python+DeOldify实现老照片上色功能
2022/06/21 Python