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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
JavaScript 异步调用
Oct 25 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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP数字格式化
2006/12/06 PHP
?生?D片??C字串
2006/12/06 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
考试作弊检讨书大全
2014/02/18 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书