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 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
react中的DOM操作实现
Jun 30 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 clearstatcache()函数详解
2010/03/02 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python中kmeans聚类实现代码
2018/02/23 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python3 实现调用串口功能
2019/12/26 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Django多数据库联用实现方法解析
2020/11/12 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
企业文化建设实施方案
2014/03/22 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
商场收银员岗位职责
2015/04/07 职场文书
迎新生晚会主持词
2015/06/30 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js