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 相关文章推荐
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
如何实现双向绑定mvvm的原理实现
May 28 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二维数组转成字符串示例
2014/02/17 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php验证码实现代码(3种)
2015/09/07 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python提示No module named images的解决方法
2014/09/29 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
详解python里的命名规范
2018/07/16 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
客服主管岗位职责
2013/12/13 职场文书
会计学专业自荐信
2014/06/25 职场文书
护士求职信
2014/07/05 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书