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 相关文章推荐
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
利用javaScript处理常用事件详解
Apr 14 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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购物车实现代码
2011/10/10 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python3.8中使用f-strings调试
2019/05/22 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python3跳出一个循环的实例操作
2020/08/18 Python
python简单实现插入排序实例代码
2020/12/16 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
override和overload的区别
2016/03/09 面试题
致跳远、跳高运动员广播稿
2014/01/09 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python