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的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
node.js超时timeout详解
Nov 26 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
vue增删改查的简单操作
Jul 15 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
JavaScript如何操作css
Oct 24 Javascript
原生js实现表格循环滚动
Nov 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php xml 入门学习资料
2011/01/01 PHP
调整PHP的性能
2013/10/30 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue实现循环切换动画
2018/10/17 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
Python中tell()方法的使用详解
2015/05/24 Python
Python使用minidom读写xml的方法
2015/06/03 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python使用turtle绘制分形树
2018/06/22 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
行政管理专业推荐信
2013/11/02 职场文书
小学生环保倡议书
2014/05/15 职场文书
机关党员公开承诺书
2014/08/30 职场文书
教师培训学习心得体会
2016/01/21 职场文书
JavaScript原型链详解
2021/11/07 Javascript