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的Function详细
Nov 14 Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
学习php分页代码实例
2013/10/24 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
yii2安装详细流程
2018/05/23 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python调用API实现智能回复机器人
2018/04/10 Python
pycharm安装和首次使用教程
2018/08/27 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
个人简历自我评价
2014/01/06 职场文书
学生喝酒检讨书
2014/02/06 职场文书
财务科科长岗位职责
2014/03/10 职场文书
庆六一活动总结
2014/08/29 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
简历自我评价模板
2015/03/11 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技