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替换已存在于element上的event的方法
Mar 09 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue实现匀速轮播效果
Jun 29 Javascript
Vue Element plus使用方法梳理
Dec 24 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
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php实现数据库的增删改查
2017/02/26 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Atom的python插件和常用插件说明
2018/07/08 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
wxPython实现绘图小例子
2019/11/19 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python软件都是免费的吗
2020/06/18 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
信息管理专业自荐书
2014/06/05 职场文书
运动会宣传语
2015/07/13 职场文书
创业计划书之寿司
2019/07/19 职场文书