淘宝Kissy框架分析【七】

最新推荐文章于 2024-09-28 22:32:44 发布

weixin_30299539

最新推荐文章于 2024-09-28 22:32:44 发布

阅读量67

点赞数

文章标签：测试

原文链接：http://www.cnblogs.com/bluedream2009/archive/2010/06/20/1761469.html

版权

今天开始就正式进入了DOM文件夹部分. DOMAPI算是比较难搞的部分.KISSY也在不断完善中.所以现在实现的不是很全面.这篇我们主要看下

dom.js和dom-class.js

dom.js只定义了个命名空间.代码还没有具体实现

J1616.add( ' dom ' , function (J) {
    J.DOM = {
        _isElementNode: function (elem) {
             return elem && elem.nodeType === 1 ;
        }
    };
});

但由于DOM方法都是扩展在J.DOM命名空间下.所以这个文件是必须的.

dom-class.js是对元素的class进行了控制.

【程序源码】

J1616.add( ' dom-class ' , function (J, undefined) {
     var SPACE = ' ' ,
        DOM = J.DOM,
        REG_SPLIT = / [\.\s]\s*\.? / ,
        REG_CLASS = / [\n\t] / g;

    J.mix(DOM, {
         // selector是否存在指定的class
        hasClass: function (selector, value) {
             return batch(selector, value, function (elem, classNames, cl) {
                 var elemClass = elem.className;
                 if (elemClass) {
                     var className = SPACE + elemClass + SPACE, j = 0 , ret = true ;
                     for (; j < cl; ++ j) {
                         if (className.indexOf(SPACE + classNames[j] + SPACE) < 0 ) {
                            ret = false ;
                             break ;
                        }
                    }
                     if (ret) return true ;
                }
            }, true );
        },
         // 为selector 添加class
        addClass: function (selector, value) {
            batch(selector, value, function (elem, classNames, cl) {
                 var elemClass = elem.className;
                 if ( ! elemClass) {
                    elem.className = value;
                }
                 else {
                     var className = SPACE + elemClass + SPACE, setClass = elemClass, j = 0 ;
                     for (; j < cl; ++ j) {
                         if (className.indexOf(SPACE + classNames[j] + SPACE) < 0 ) {
                            setClass += SPACE + classNames[j];
                        }
                    }
                    elem.className = J.trim(setClass);
                }
            });
        },
         // 为指定的selector删除class
        removeClass: function (selector, value) {
            batch(selector, value, function (elem, classNames, cl) {
                 var elemClass = elem.className;
                 if (elemClass) {
                     if ( ! cl) {
                        elem.className = '' ;
                    }
                     else {
                         var className = (SPACE + elemClass + SPACE).replace(REG_CLASS, SPACE), j = 0 ;
                         for (; j < cl; j ++ ) {
                            className = className.replace(SPACE + classNames[j] + SPACE, SPACE);
                        }
                        elem.className = J.trim(className);
                    }
                }
            });
        },
         // 用新class替换旧的class
        replaceClass: function (selector, oldClassName, newClassName) {
            DOM.removeClass(selector, oldClassName);
            DOM.addClass(selector, newClassName);
        },
         // 切换指定的class. state是强制删除或者添加
        toggleClass: function (selector, value, state) {
             var isBool = J.isBoolean(state), has;

            batch(selector, value, function (elem, classNames, cl) {
                 var j = 0 , className;
                 for (; j < cl; ++ j) {
                    className = classNames[j];
                    has = isBool ? ! state : DOM.hasClass(elem, className);
                    DOM[has ? ' removeClass ' : ' addClass ' ](elem, className);
                }
            });
        }
    });

     function batch(selector, value, fn, resultIsBool) {
         if ( ! (value = J.trim(value))) return resultIsBool ? false : undefined;

         var elems = J.query(selector),
            i = 0 , len = elems.length,
            classNames = value.split(REG_SPLIT),
            elem, ret;
         for (; i < len; ++ i) {
            elem = elems[i];
             if (elem.nodeType === 1 ) {
                ret = fn(elem, classNames, classNames.length);
                 if (ret !== undefined) return ret;
            }
        }
         if (resultIsBool) return false ;
    }
});

1. batch方法

这个方法是批量元素处理的核心方法.总共4个参数:

1) selector[选择器] 这个会通过J.query通过选择器选择出所有符合条件的元素. J.query会在下节讲解.

2) value要进行操作的样式名称.支持(acls bclas) (acls.bcls) (acls .bcls)等宽松模式.

3) fn 回调函数选择器选出的NodeList value传入的classNames, classNames的长度会循环并作为参数传入回调函数.

4) resultIsBool 如果为true那么返回值为true或false, 否则为undefined.

2.addClass方法.

作用: 为selector筛选出的元素都追加value指定的class

我们下面测试的所有HTML都需要引入这些文件

< style type = " text/css " >
.red {color:red}
.blue {background - color: blue}
< / style>
< script src = " ../j1616/j1616.js " >< / script>
< script src = " ../j1616/j1616-ua.js " >< / script>
< script src = " ../j1616/j1616-lang.js " >< / script>
< script src = " dom.js " >< / script>
< script src = " dom-class.js " >< / script>
< script src = " selector.js " >< / script>
< / head>
< body >
< div id = " odiv " > div < / div>
< div id = " odiv2 " > div2 < / div>

测试用例

J.DOM.addClass( ' #odiv2, #odiv ' , ' red blue ' );

这样我们就为id为odiv2, odiv的元素都追加了red和blue的class ==> 字体变红,背景色变蓝.

3.hasClass方法

作用:判断选择器筛选出的元素是否含有value指定的class. 只要有一个元素符合那么就为true. 如果所有的元素都不匹配value那么就为false.

测试用例

J.DOM.addClass( ' #odiv2 ' , ' red blue ' ); // 事先为odiv2 添加red和blue样式
J.log(J.DOM.hasClass( ' #odiv, #odiv2 ' , ' red blue ' )); // 只有odiv2符合那么就返回true

4.removeClass方法

作用:为选择器筛选的元素删除value给定的class.

测试用例

5.replaceClass方法

作用:用一个新的class替换一个class

测试用例

J.DOM.addClass( ' #odiv2 ' , ' red blue ' ); // 事先为odiv2 添加red和blue样式
J.log(J.DOM.hasClass( ' #odiv, #odiv2 ' , ' red blue ' )); // 只有odiv2符合那么就返回true
J.DOM.removeClass( ' #odiv2 ' , ' blue ' ); // 删除了blue样式
J.log(J.DOM.hasClass( ' #odiv, #odiv2 ' , ' red blue ' )); // 此时blue样式已被删除所以返回false
J.DOM.replaceClass( ' #odiv2 ' , ' red ' , ' blue ' ); // div元素的背景色变蓝因为用blue替换了red

6.toggleClass方法

作用:切换一个指定的class. 如果第一次样式存在那么就删除第二次就又追加上以此类推.

测试用例: