我才12岁 ?

由于昨天遇到的一个问题，才有了这种想法。目前的YAHOO.util.Dom.getElementsByClassName仅支持一个class的寻找，如果我想寻找多个class的话就要多操作几次了，而且如果要给这些节点添加相同的事件的话，又要首先把它们放到一个数组，然后给新的数组添加事件，或者分别给各个数组添加事件，挺麻烦的，所以给YAHOO.util.Dom.getElementsByClassName做一点小改进，让它可以找到包含任何一个所给class的所有节点。

getElementsByClassName: function(className, tag, root, apply, o, overrides) {
    className = lang.trim(className);
    tag = tag || '*';
    root = (root) ? Y.Dom.get(root) : null || document; 
    if (!root) {
        return [];
    }
    var nodes = [],
        elements = root.getElementsByTagName(tag),
        hasClass = Y.Dom.hasClass;
    if(className.indexOf('|')>0) {
        var classnames = className.split('|');
        //找到所有节点
        for (var i = 0, len = elements.length; i < len; ++i) {
            for (var j = 0; j < classnames.length; ++j) {
                if ( hasClass(elements[i], lang.trim(classnames[j])) ) {
                    nodes[nodes.length] = elements[i];
                }
            }
        }
        //剔除相同的节点
        for (var k = 0; k < nodes.length; k++) {
            for(var l = k+1; l < nodes.length; l++) {
                if(nodes[k] == nodes[l]) {
                    nodes.splice(l,1);
                }
            }
        }
    } else {
        for (var i = 0, len = elements.length; i < len; ++i) {
            if ( hasClass(elements[i], className) ) {
                nodes[nodes.length] = elements[i];
            }
        }


}
if (apply) {
    Y.Dom.batch(nodes, apply, o, overrides);
}
return nodes;


}

用法很简单，就是在class之间加上“|”，比如：YAHOO.util.Dom.getElementsByClassName(‘hehe|haha|heihei’)。

继续阅读 »

YAHOO.util.Event看的我还是比较晕的，一是我这方面确实好弱，一是YUI太NB了，还是分享一下我的学习经验，谈下我遇到的问题，首先是YAHOO.util.Event.addListener。

if ( this._isValidCollection(el)) {
    var ok = true;
    for (var i=0,len=el.length; i<len; ++i) {
        ok = this.on(el[i], 
                       sType, 
                       fn, 
                       obj, 
                       overrideContext) && ok;
    }
    return ok;


} else if (YAHOO.lang.isString(el)) {
    var oEl = this.getEl(el);
    if (oEl) {
        el = oEl;
    } else {
        this.onAvailable(el, function() {
           YAHOO.util.Event.on(el, sType, fn, obj, overrideContext);
        });
        return true;
    }
}

this._isValidCollection(el)是判断el是否是一个数组，详细可以看下_isValidCollection这个方法，如果是数组的话，就拆分开来，调用YAHOO.util.Event.addListener。if (YAHOO.lang.isString(el))是判断是否是字符串，也就是说el是否为id，如果是的话就转换成HTMLElement，然后调用YAHOO.util.Event.addListener。其实这两个判断的目的都是为了将el转化为HTMLElement，然后再执行YAHOO.util.Event.addListener。

继续阅读 »

前边稍微介绍了下YUI的CustomEvent，可能还不够明了，这里再举一个简单的小例子。其实他的原理就是在触发一个事件的时候，可以联动的去触发其他你想触发的事件。前边说的那个YUI的例子虽然比较简单，但是我觉得它体现了一种理念，就是触发事件自身与其关联的事件就在正常的触发中进行，而额外的需要触发的事件通过fire来触发。当然，可能这种并不太正确，这里依据这个观点举一个简单的小例子。

Demo链接：http://www.12sui.cn/test/19

在写每一段代码的时候，我们都应该考虑好该如何去写，如何去放置，我这个这个例子很简单，首先我们创建一个自定义事件：

var onCheck = new Y.CustomEvent('onCheck');

然后我们写一下点击按钮时需要触发的onclick事件：

function changeValue(e) {
  var target = E.getTarget(e);
  var value = target.name;
  if(value == 'a') {
    target.firstChild.nodeValue = '回答正确';
    answer = 'right';
  } else {
    target.firstChild.nodeValue = '回答错误';
    answer = 'wrong';
  }
  onCheck.fire(answer);
}

如果回答正确的话，就将按钮的文字修改为‘回答正确’，如果回答错误的话就把按钮的文字改为‘回答错误’，而这个函数的最后onCheck.fire(answer);用来触发订阅的事件。在这里，我们不仅仅是需要给出正确的提示，我们还要给回答的人一些相应的奖惩，所以写了另一个显示提示信息的函数。

function showmsg(type,args) {
  D.setStyle('J_'+args[0],'display','block');
}

这个函数根据带进来的函数来显示提示信息，而这个事件怎么被onclick事件触发呢，一来是需要fire来最终激活，另外我们还需要订阅这个事件：

onCheck.subscribe(showmsg);

当然，可以订阅很多很多个事件，只要通过fire触发onCheck这个自定义事件就会让这些事件都发生。应该比较好理解吧哈~看一下完整的代码：

(function(){
    var Y = YAHOO.util,D = Y.Dom,E = Y.Event,answer;
    var onCheck = new Y.CustomEvent('onCheck');
    function changeValue(e) {
        var target = E.getTarget(e);
        var value = target.name;
        if(value == 'a') {
            target.firstChild.nodeValue = '回答正确';
            answer = 'right';
        } else {
            target.firstChild.nodeValue = '回答错误';
            answer = 'wrong';
        }
        onCheck.fire(answer);
    }
    var buttons = document.getElementsByTagName('button');
    E.on(buttons,'click',changeValue);
    function showmsg(type,args) {
        D.setStyle('J_'+args[0],'display','block');
    }
    onCheck.subscribe(showmsg);
})();

YUI的自定义事件可能在写组件的时候用的时候会比较多，平常可能很少人会去用，其实还是很方便的，如果一个事件很麻烦的不妨拆开，用自定义事件试试。

4月份啦，我女儿快生日了，提前祝乖女儿生日快乐，希望今年能考上理想的大学，加油哈。

我妈又给我打电话催我找老婆了。。。。头疼。。。。那么急干嘛。。。。愁死啦。。。

继续阅读 »

YAHOO.util.CustomEvent是什么呢？其实很简单，它就是一个构造函数而已，那么它到底有何作用呢？

The CustomEvent class lets you define events for your application that can be subscribed to by one or more independent component.

通过YAHOO.util.CustomEvent可以创建自定义事件，并被其他事件订阅。打个比方，就像我的博客，很多人可以订阅，而我一旦发布了新的文章，那么其他订阅的人都会收到新的文章。因为代码比较多，就着重讲一下YAHOO.util.CustomEvent的两个方法：fire和subscribe。

subscribe: function(fn, obj, overrideContext) {
        if (!fn) {
throw new Error("Invalid callback for subscriber to '" + this.type + "'");
        }


    if (this.subscribeEvent) {
        this.subscribeEvent.fire(fn, obj, overrideContext);
    }

    this.subscribers.push( new YAHOO.util.Subscriber(fn, obj, overrideContext) );
}

subscribe主要是用来订阅事件，它有三个参数，fn是要执行的回调函数，obj是作用域或者其它对象，overrideContext决定是否用obj作为上下文。this.subscribeEvent.fire(fn, obj, overrideContext);作何用呢？先看看subscribeEvent：this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true);，YUI对它的注释是：

Custom events provide a custom event that fires whenever there is a new subscriber to the event. This provides an opportunity to handle the case where there is a non-repeating event that has already fired has a new subscriber.

意思就是自定义事件确保任何时候任何一个新的订阅者都能被及时的引燃，就是在每一个事件订阅的时候就点燃一下~this.subscribers.push( new YAHOO.util.Subscriber(fn, obj, overrideContext) );是将订阅者加入到subscribers中。

继续阅读 »

就在刚刚，带着梦想，我去了影院，结果还是晚了一步。。。其实我有两个目标，一个是《东邪西毒》终极版，一个是《贫民窟的百万富翁》，然而到了影院我发现《东邪西毒》的票价竟然是100元。。。远远超过了我的心里承受能力，所以我放弃了，另一个《贫民窟的百万富翁》票价是50元，还能接受，可是已经在19点05分上映了。。我去的时间已经晚了十几分钟，而下一场的时间是20点25分，我想了想，等看完了，就太晚了，所以我毅然决定返回，只听嗖的一声，我飞了回来。继续YUI。。。

YUI的Dom方法中的batch促成了大多数其他Dom方法的el可以使用数组，功劳不小哦~现在来看看batch方法：

batch: function(el, method, o, overrides) {
            var collection = [],
                scope = (overrides) ? o : window;


        el = (el && (el[TAG_NAME] || el.item)) ? el : Y.Dom.get(el); // skip get() when possible
        if (el && method) {
            if (el[TAG_NAME] || el.length === undefined) { // element or not array-like 
                return method.call(scope, el, o);
            } 

            for (var i = 0; i < el.length; ++i) {
                collection[collection.length] = method.call(scope, el[i], o);
            }
        } else {
            YAHOO.log('batch called with invalid arguments', 'warn', 'Dom');
            return false;
        } 
        return collection;
    }</pre>


应该是比较好理解，如果el是id或者单节点的话，就直接返回，如果是数组的话就循环一下，最后输出数组。

继续阅读 »

今晚谈一下Dom结构的修改和坐标的获取等，一共是17个方法。其中Dom结构的操作只有两个，另外15个都是有关宽度、高度、坐标的获取。

insertBefore ( newNode , referenceNode )：这个和Dom方法中的insertBefore一样，就是将一个节点插入到另一个节点的前边。

insertAfter ( newNode , referenceNode )：Dom方法中没有insertAfter 方法，YUI根据insertBefore构建了这个方法，就是将一个节点插入到另一个节点的后边。

getDocumentHeight ( )：获取页面的高度。

getDocumentWidth ( )：获取页面的宽度。

getViewportHeight ( )：获取页面的可视高度。

getViewportWidth ( )：获取页面的可视宽度。

getDocumentScrollLeft ( document )：获取滚的左宽度。。这个我也不知道咋描述。。。

getDocumentScrollTop ( document )：获取滚的上宽度。。。

getClientRegion ( )：获取浏览器的可视区域，返回top、right、bottom、left、height、width。

getRegion ( el )：获取元素的坐标以及宽高信息，返回top、right、bottom、left、height、width，这个可能用的情况还是比较多吧哈。

getXY ( el )：获取元素的坐标，返回left和top。

getX ( el )：获取元素的横向坐标，也就是离左侧的距离。

getY ( el )：获取元素的纵向总表，也就是离上部的距离。

setXY ( el , pos , noRetry )：设置节点的横向和纵向坐标。

setX ( el , x )：设置节点的横向坐标。

setY ( el , x )：设置纵向坐标。

继续阅读 »

名字倒不知道怎么写了，就记成布尔值吧，主要介绍YUI的Dom方法里返回Boolean值的几个方法，一共三个，比较简单：

hasClass ( el , className )：这个方法就是判断el是否拥有某一个class。

inDocument ( el , doc )：就是判断el是否在Dom结构中存在，一般我们使用removeChild方法会将元素移出到超空间，虽然是存在的，但是它不存在Dom结构中，普通的Dom方法中我是通过判断document.documentElement是否包含那个元素，YUI的方法其实一样的。

isAncestor ( haystack , needle )：判断是否是父节点，这个方法可以用来解决很困扰我们的onmouseover和onmouseout问题，要善用哈~

好久没有好好睡了，实在不行了，早点睡了哈，大家晚安~

继续阅读 »

其实网页上很多炫的交互动作都是通过JavaScript操作样式表来实现的，这里谈一下我学习YUI的这部分经验。YUI中操作样式表以及元素属性的方法一共有7个，很少，也比较好理解。

getStyle ( el , property )：这个方法是获取元素的某个特定属性，el可以是String、HTMLElement、Array，注意property是不能为Array的，样式有内嵌的和外链的，读取内嵌的（特指style定义的）还好，如果是链入的，因为IE和Dom获取style的方式不同（IE是currentStyle，而Dom的方法是window.getComputedStyle），所以经常我们使用的时候要判断，而YUI的这个方法已经涵盖了两种情况，可以随意的使用。另外提到的一点是，float是JavaScript的保留字，所以在读取样式的时候要cssFloat（Dom）或者styleFloat（IE）来代替，我也是在读YUI代码的时候发现这一点。貌似直接读取样式的操作并不常用，至少我是。。。

setStyle ( el , property , val )：这个方法应该是比较常用滴，因为我们操作样式表的目的就是为了改变元素的样式，需要注意的东西跟上一个一样，这里就不多说啦。

addClass ( el , className )：这个方法的作用是给元素添加一个className，正常我们操作的时候，要么直接设置el.className=”，要么el.className += ”，其实YUI代码里使用的方法并没什么高级的：Y.Dom.setAttribute(el, CLASS_NAME, trim(current + SPACE + className))，这个函数其实并没有比我们正常使用的方法高级多少，但是值得注意的是这里的el可以是Array的~

继续阅读 »

YUI的Dom方法一共有45个，在这里谈一下我学习过程遇到的问题和经验，先介绍17个寻找节点类型的Dom方法。

get(el)：记得初学JavaScript的时候，最先认识的两个方法就是getElementById和getElementsByTagName，这两个东东也基本上能够找到大多数你需要找的东西啦。YUI里的get方法跟getElementById类似，但是它的能力却要强很多了，el可以是String、HTMLElement或者Array。

getElementsBy ( method , tag , root , apply , o , overrides )：这个会和getElementsByTagName比较像一点点吧，但是功能差好远，基本上getElementsBy应该可以找到一切你想找的元素，method是定义一个校验目标元素的方法，返回一个boolean值，tag是目标元素的nodeName，root是指在哪个元素中进行寻找，也可以说成是一个范围吧。apply，我必须要说下它。。当初它困扰我了半天，YUI给出的解释是“A function to apply to each element when found ”，可以理解为一个回调函数吧，再看看YUI的代码，其中有这么一段：

if (apply) {
     Y.Dom.batch(nodes, apply, o, overrides);
}

我当时的理解是，因为最终返回的是一个节点的数组嘛，我就以为执行完前边的校验后得到的结果再在apply中进行一次，也就是我在apply中再对结果元素进行下一步的节点寻找，那么最后返回的应该是apply执行后得到的所有节点集合。。。可是无论我怎么试，最终返回的都是通过method方法所得到数组，并没有再次通过apply获得更多的元素，嘿嘿，不要见笑哈，当时就是这么想的。。。后来发现，实际上不是这样子，我理解错误的原因只要就在那个batch上，当时的错误在于，我把batch放进getElementsBy里了，那么在batch里边return后应该不会再继续执行return nodes了，但是实际上这里的Y.Dom.batch(nodes, apply, o, overrides)只是一个最终的结果而已，所以return nodes还是会执行的。那么这个apply的作用在何处呢？其实作用就是执行一次回调嘛哈，它是可以实现我之前的想法的，但是不是直接返回的，举个例子：

var uls = YAHOO.util.Dom.getElementsBy(function(el){
    return el.className === 'J_tab';
},'ul','content');

这是寻找id为content的容器下className为J_tab的节点，那么如果我同时还需要获取每个ul下的所有li节点该怎么做呢，总不能再来一次循环吧，当然也可以啦，不过要好好利用下YUI吧，那就是让它获取ul的同时获取li：

var lis = [];
function getli(obj) {
    lis.push(obj.getElementsByTagName('li'));
}
var uls = YAHOO.util.Dom.getElementsBy(function(el){
    return el.className === 'J_tab';
},'ul','content',getli);

OK，这样子就一举两得了哈~后边的作用域和上下文就不多说啦，关于batch的神奇，下次再说哈，真的很神奇。。。

继续阅读 »