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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
vue中v-model对select的绑定操作
Aug 31 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&amp;MYSQL留言板源码
2020/07/19 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
python复制文件代码实现
2013/12/23 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python如何输出警告信息
2020/07/30 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
好习惯伴我成长演讲稿
2014/05/21 职场文书
国企干部对照检查材料
2014/08/22 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android