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读取ASP设定的COOKIE
Feb 15 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
js动态切换图片的方法
Jan 20 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
在vue中使用Autoprefixed的方法
Jul 27 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php算法实例分享
2015/07/14 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python3 replace()函数使用方法
2018/03/19 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
介绍一下Linux文件的记录形式
2013/09/29 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
大学生励志演讲稿
2014/04/25 职场文书
项目建议书怎么写
2014/05/15 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年应急工作总结
2014/12/11 职场文书
工程款申请报告
2015/05/15 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书