Cheshirecat

浅析Normal Flow,Formatting Context Note of YUI,Section 2,YUI 3.0/Core

0You

Note of YUI,Section 1,YUI 2.8/Core

Oct 22 2009 Post On Javascript and DOM

@during:09/09/07-09/10/01:version:2.8.0:source:*.debug.js

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.env.ua
COMMENTS:前增符号和后增符号的区别
e.g. CODE:
var i = 1;
console.log(i++); //print 1
console.log(i); //print 2
*/

var numberfy = function(s) {
    var c = 0;
    return parseFloat(s.replace(/\./g, function() {
        return (c++ == 1) ? '' : '.';
    }));
}

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.LANG
COMMENTS:NaN的特殊性
e.g. CODE:
console.log(typeof NaN); //print ‘number’
console.log(isFinite(NaN)); //print false
*/

isNumber: function(o) {
    return typeof o === 'number' && isFinite(o);{
}{

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.LANG
COMMENTS:修复ie中无法对派生对象(DO)中javascript原生(函数)方法(navtive function)进行枚举,即使在派生对象中这个方法已经被覆盖;
e.g. CODE:
var o = {
toString: function() {
alert(“toString”);
},
valueOf: function() {
alert(“valueOf”);
},
noNative: function() {
alert(“noNative”);
}
};
for (var i in o) {
console.log(‘o enmuerate: ‘ + o.hasOwnProperty(i) && i);
};
*/

_IEEnumFix: (YAHOO.env.ua.ie) ? function(r, s) {
    /**some code*/
} : function() {}

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.LANG
COMMENTS:注意构造器链(constractor chain),原型链(prototype chain)以及实例化,此函数实为犀牛书中”子类与超类”一章的副本,
犀牛书章节: 9.5 Superclasses and Subclasses
e.g. CODE:
YAHOO.lang.extend(PositionRectangle,Rectangle,{});
*/

extend: function(subc, superc, overrides) {
    /**some code*/
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:document.compatMode = BackCompat || CSS1Compat,分别对应浏览器渲染的两种方式Quirks Mode和Standards Mode,主要取决于为文档类型doctype的声明.在Dom脚本中的表现主要为对元素盒模型的解释问题进行处理,主要应用在元素坐标和高宽的几个方法上.
e.g. CODE:
*/

NONE

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:为了避免一些函数的重复执行,考虑到重用度,创建缓存对象.
e.g. CODE:
*/

var reCache = {};
_getClassRegex: function(className) {
    var re;
    if (className !== undefined) { // allow empty string to pass
        if (className.exec) { // already a RegExp
            re = className;
        } else {
            re = reCache[className];
            if (!re) {
                /**some code*/
                re = reCache[className] = new RegExp(C_START + className + C_END, G);
           }
       }
    }
    return re;
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS: GET_BOUNDING_CLIENT_RECT = getBoundingClientRect,方法支持IE(above 5),在Firefox(above 3)中开始支持,返回数组对象,通过top,bottom,left,right.
e.g. CODE:NONE
*/

_getXY: function() {
    if (document[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {
        /**some code*/
    } else {
        /**some code*/
    }
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS: Elements.offsetParent 表示元素坐标原点所指向的元素.一般情况下元素指向Document元素也就是body;当子元素样式position属性为非static且父元素亦非static时,子元素的offsetParent为父元素;
table中的tr和td元素的offsetParent指向table元素
e.g. CODE:
#c {
position:relative;
}
#d {
position:fixed;
top:1px;
right:1px;
}
<div id=”c”>ContainerC<div id=”d”>ContainerD</div></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ id=”e”>
<tr><th>Header</th></tr>
<tr id=”f”><td id=”g”>Data</td></tr>
</table>
*/

(function(){
    /**some code*/
})();

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:
e.g. CODE:
*/

//Line 734

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:
e.g. CODE:
*/

generateId: function(el, prefix) {
    var f = function() {
        /**some code*/
    }
    // batch fails when no element, so just generate and return single ID 
    // 代码的严密性 
    return Y.Dom.batch(el, f, Y.Dom, true) || f.apply(Y.Dom, arguments); 
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:Element.compareDocumentPosition 和 Element.contains分别为Firefox和其他浏览器检测父级元素是否包含某个指定的子元素方法,参考资料:

http://www.quirksmode.org/blog/archives/2006/01/contains_for_mo.html

e.g. CODE:
*/

isAncestor: function(haystack, needle) {
    haystack = Y.Dom.get(haystack);
    needle = Y.Dom.get(needle);
    var ret = false;
    if ( (haystack && needle) && (haystack[NODE_TYPE] && needle[NODE_TYPE]) ) {
        if (haystack.contains && haystack !== needle) { // contains returns true when equal
            ret = haystack.contains(needle);
        }
        else if (haystack.compareDocumentPosition) { // gecko
            ret = !!(haystack.compareDocumentPosition(needle) & 16);
        }
    } else {
        /**some code*/
    }
    /**some code*/
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:除去执行函数外,提供有效的返回值.YUI中大部分函数方法都会提供合适的返回值,便于链式操作
e.g. CODE:
*/

batch: function(el, method, o, overrides) {
	var collection = [];
	/**some code*/
        for (var i = 0; i < el.length; ++i) {
            collection[collection.length] = method.call(scope, el[i], o);
        }
    /**some code*/
    return collection;
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:获取document的scrollHeight,scrollWidth,clientHeight,clientWidth属性和当前文档显示模式有关,如果浏览器是safari或者chrome也会有一些区别.主要考虑横向或者纵向滚动条出现的问题
出现滚动条时,Safari的clientWidth以及clientHeight是不包含滚动条的宽度
e.g. CODE:
*/

 var width = self.innerWidth,  // Safari
    height = self.innerHeight, // Safari, Opera
    scrollWidth = (document[COMPAT_MODE] != CSS1_COMPAT || isSafari) ? 
                      document.body.scrollWidth : documentElement.scrollWidth

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:replace方法 string.replace(regexp, replacement) 其中replacement如果为函数,可传递多个参数,第一个参数为匹配正则的的字符串,第二个为匹配分组的字符串,第三个为匹配字符串出现的位置,最后一个为字符串本身.
e.g. CODE:
*/

_toCamel: function(property) {
	/**some code*/
    function tU(x,l) {
        return l.toUpperCase();
    }
    return /**some code*/ property.replace( /-([a-z])/gi, tU );
}

/**
FILE: EVEVT.DEBUG.JS
MODULE: YAHOO.EVENT
COMMENTS:使用call或者apply方法将arguments由类数组转换为数组
e.g. CODE:
*/

var args=[].slice.call(arguments, 0);

Categories

Archives

Links

RSS Feed

FanFou

Note of YUI,Section 1,YUI 2.8/Core