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 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
老生常谈js数据类型
2017/08/03 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
高中生职业规划范文
2014/03/09 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
先进工作者个人总结
2015/02/15 职场文书
售票员岗位职责
2015/02/15 职场文书
二年级数学教学反思
2016/02/16 职场文书
《花钟》教学反思
2016/02/17 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers