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 相关文章推荐
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JS实现日期加减的方法
Nov 29 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 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中的Class的几点个人看法
2006/10/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
json前后端数据交互相关代码
2018/09/19 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
复古服装:RetroStage
2019/05/10 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
支教自我鉴定
2014/01/18 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS