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 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
vuex实现购物车功能
Jun 28 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php查询及多条件查询
2017/02/26 PHP
php实现的双色球算法示例
2017/06/20 PHP
js function定义函数使用心得
2010/04/15 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python的迭代器和生成器
2015/07/29 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python 二维数组90度旋转的方法
2019/01/28 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
成语的广告词
2014/03/19 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
保研推荐信范文
2015/03/25 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技