我才12岁 ?

刚刚去看了that电影，太扯了。。so yumei，我越来越觉得我有当大导演的潜力了哈。。。不过这片倒让我很怀念做孩子的感觉，真好。。。

昨天去看到100元的《东邪西毒》是VIP厅的。。囧。。。

继续阅读 »

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中。

继续阅读 »

这周刚刚百淘完。。。其实很不喜欢这样的东西。。。很被动的去听，大多数时候还是逃掉了~拓展还不错，能出去运动下，玩玩哈，虽然有点累，不过还是挺爽的哈！~其实自己喜欢挺多的运动，感觉看上去都挺好玩的，不过一样都没试过，一来没时间，二来我觉得这方面我挺笨的。。都学不会哈，所以只有羡慕别人的份，小时候一直憋在家里，我妈赶都赶不出去，现在工作什么的挺忙的，周末一个人在家里还是挺无聊的，经常的很想出去溜达溜达，不过基本没有出去溜达的机会，因为根本不知道要去哪里。总是感觉自己有很多事情没有做，一直在赶着去做，但是总是做不完的样子，觉得自己有很多事情很想去尝试，但是一直都没去尝试，太委屈自己啦，哈哈，先谈谈最近的工作吧。

在蝴蝶谷待了一个多月，每天的工作主要就是bug fix，每天都很忙，忙的一塌糊涂。有了一些心得：

1.在每个项目确定要做的时候，视觉/交互设计师一定要确保设计稿的准确性，而前端工程师也应该的仔细的审核每一个设计稿，确定设计稿中可能存在的问题，及时和交互设计师沟通进行修改，以免在后期进行各种各样的修改，给各方都带来很大的不便。

2.在做页面之前一定应该从各个设计稿中确定如何去构建，如何去做统一的规格，毕竟HTML是页面最基础的东西，就像盖房子似的，一定要把地基打好，否则房子就很难去盖好盖高（那个XXX斜塔除外哦）。能把HTML做好，后期应该少n多的麻烦，毕竟CSS和JS都是靠它来运作的。因为每个人都以为HTML很简单，所以都很随意，所以更多的CSS都被HACK充斥着，还一边的抱怨ie浏览器，自作孽，不可活哦~另外，HTML我觉得还是应该以简单为主，如果整个项目没有一个另类的或者只有一个另类的，就单独给它一个吧，不要为了它让其它n多的地方使用那么繁杂的结构，套那么多冗余的无用的棉袄。花更多的时间去考虑HTML，毕竟有了重构的概念以来，并不是每一次网站改版都要重构一次HTML，重构的意义应该在于一劳永逸，每次翻天覆地的去改，跟使用table有何分别。

继续阅读 »

就在刚刚，带着梦想，我去了影院，结果还是晚了一步。。。其实我有两个目标，一个是《东邪西毒》终极版，一个是《贫民窟的百万富翁》，然而到了影院我发现《东邪西毒》的票价竟然是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的神奇，下次再说哈，真的很神奇。。。

继续阅读 »

今天在整理优化的时候，发现很多地方都用了同样的button按钮，但是大小不一，但是在ie下不能很好的自适宽度，所以想做的统一一点。后来发现除了在Opera下表现的比较完美外，其他浏览器下button都默认的保留的有一定的边缘，不晓得是为什么，后来就不得已的在button中套了两个span，又回到了优化前的结构，其实做的仅仅是让它在ie下自适应。

HTML Code：

<button class="btn"><span><span>这是按钮哈</span></span></button>

这样子显得很冗余，但是没办法，可能你觉得这样子做不对，那么如果我们把span放到外边的话，那么块元素的宽度我们就做不了主了，暂且不管，先看看这样子达到的效果吧。

CSS Code：

.btn { border:none; padding:0; margin:0; background:none; cursor:pointer; text-align:center;}
.btn span { display:block; font-size:14px; font-weight:600; margin:0; padding:0; color:#fff; background:url(btn.gif) 0 0 no-repeat; min-width:100px; white-space:nowrap; _width:100px;}
.btn span span { background-position:right -30px; height:20px; display:block; padding:5px 10px;}

里边套了两层的span，并设定了最小宽度为100px（其实带上padding应该是120px），而ie6下解决不支持min-width的方法很简单，就是加上一个white-space。如下图所示效果：

但是这么做其实也并没有带来什么便利，感觉一层套一层，怪怪的，到最后还是选择了固定宽度，制作几种宽度的btn图标来做，这样子省去了很多麻烦。

那么button里边套块元素是不是合理呢？来看看W3C对button的介绍：

继续阅读 »

今天遇到一个问题，就是在页面内，弹出框口中内置一个iframe，然后在iframe内取不到父窗口，搞了半天，最后还是明城帮我弄的哈，这里记录一下。

比如父窗口的域名是：http://a.b.c.com，打开的iframe是拼装而成，当时iframe的src取的是document.domain，其实就相当于是a.b.c.com，窗口正常打开，但是在iframe里，却取不到父窗口。在iframe打印得到的document.domain却是b.c.com，跟父窗口不同，所以造成了跨域的问题，最后就是在弹出iframe窗口的时候不要取document.domain，直接写相对路径，因为本来就在同一个域下的，也没必要再取document.domain啦。

继续阅读 »