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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python多线程和多进程关系详解
2020/12/14 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
2014年乡镇民政工作总结
2014/12/02 职场文书
2015年科室工作总结
2015/04/10 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js