Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0


Posted in Javascript onMarch 22, 2008

batch: function(el, method, o, override) {
    // 让 el 始终为 HTMLElement
    el = (el && (el.tagName || el.item)) ? el : Y.Dom.get(el); 

    if (!el || !method) {
        return false;
    }

    //  确定返回的对象
    var scope = (override) ? o : window;

    // 看起来是个 HTMLElement 或者不是 Array
    if (el.tagName || el.length === undefined) {
        return method.call(scope, el, o);
    } 

    var collection = []; 
    for (var i = 0, len = el.length; i < len; ++i) {
        collection[collection.length] = method.call(scope, el[i], o);
    }

    return collection;
},小马补充

batch 是 YUI Dom 库的核心之一。它最大的意义在于,它让 Dom 库的其他大多方法
的第一个参数可以是一个 id / 元素对象 或 一组 id/元素对象,减少了循环的使用。在这里可以找到 call 与 apply 的用法。在了解了 batch 以后,下来看 YUI.util.Dom 是怎么使用这一方法的,一口气看两个函数

getStyle: function(el, property) {
    // toCamel 函数后面介绍
    property = toCamel(property);

    // 获取节点的样式
    var f = function(element) {
        return getStyle(element, property);
    };

    return Y.Dom.batch(el, f, Y.Dom, true);
},setStyle: function(el, property, val) {
    property = toCamel(property);

    // 设置节点的样式
    var f = function(element) {
        setStyle(element, property, val);        
    };

    Y.Dom.batch(el, f, Y.Dom, true);
},有关这两个函数的具体用法,可以看下相关的文档。其实从参数上就很容易理解怎么使用。看上面的两个函数有利于理解 YAHOO.util.Dom.batch 的调用方式。

接下来,粗略看下 getXY

getXY: function(el) {
    var f = function(el) {
        // 确定元素是否“肉眼可见”
        if ( (el.parentNode === null || el.offsetParent === null ||
                this.getStyle(el, 'display') == 'none') && 
                            el != el.ownerDocument.body) {
            return false;
        }

        return getXY(el);
    };

    return Y.Dom.batch(el, f, Y.Dom, true);
},getX 与 getY 方法也是调用此函数,只是获取返回值的数组元素不一样。由于浏览器的兼容问题,提供给用户的 YAHOO.util.Dom.getXY 也仅仅是判断变量以后,再扔给最为复杂的内部 getXY 函数。

OK,留下太多的“悬念”了,下一期着重将它们解决。

Javascript 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 #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
You might like
php简单实现批量上传图片的方法
2016/05/09 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
详解python单例模式与metaclass
2016/01/15 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
tensorflow多维张量计算实例
2020/02/11 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
动态密码技术
2012/10/18 面试题
院药学专业个人求职信
2013/09/21 职场文书
个人找工作求职简历的自我评价
2013/10/20 职场文书
大学生入党思想汇报
2014/01/14 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
上课看小说检讨书
2014/02/22 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
水毁工程实施方案
2014/04/01 职场文书
室内趣味活动方案
2014/08/24 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
大学生英文求职信范文
2015/03/19 职场文书
安全温馨提示语大全
2015/07/14 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript