'Clean' javascript: "Start"

Hello to all.

As you already understood from the title of the article, I do not like the JS framework.
I am afraid of their size, slowness and uncertainty ...
Yes, yes, it is the “unknown”, even when there is taking the “clean” source code without any compression, etc., it is difficult to trace the entire path of the executed function. How many times at work did I encounter an elementary task, such as: “Delete a whole row from the html table, when I clicked a button” - ended with an error in IE. That is why I thought about creating my 'gentleman' set for working with JS.

Something was found in the vast javascript.ru, something - in the vastness of the Internet, but something was written by me.
Most of the functions each of you have already seen, so I will linger only on interesting points (in my opinion).
')
So let's get started:

//  debug,     console.log(), //    ,     ,   ,    /** * Debug function * * @version 2012-07-16 * @param mixed param * @return void */ function _d(param) { console.log(param); } //     /** * Function return random integer value * * @version 2012-07-22 * @param integer minV * @param integer maxV * @return integer */ function getRandomInt(minV, maxV) { if(minV == undefined) minV = 0; if(maxV == undefined) maxV = 10; return Math.floor(Math.random() * (maxV - minV + 1)) + minV; } //    ,    /** * Function return element by id * * @version 2012-07-22 * @param string id title of id * @return Object */ function $(id) { return document.getElementById(id); } //     ,    ''  -  ok, //    ,     -    className /** * Function return element by class name * * @version 2012-11-07 * @param string classList * @param object node * @return Object */ function $$(classList, node) { if(document.getElementsByClassName) return (node || document).getElementsByClassName(classList); else{ var node = node || document, list = node.getElementsByTagName('*'), length = list.length, classArray = classList.split(/\s+/), classes = classArray.length, result = [], i,j; for(i = 0; i < length; i++) { for(j = 0; j < classes; j++) { if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) { result.push(list[i]) break } } } return result; } } 

Here the first batch of functions ends, and the second begins (the first two, I think everyone has already met, so they do not need explanations):

  /** * Function attach event to element * * @version 2012-07-22 * @param Object elem dom element * @param string type event type * @param mixed handler * @return Object */ function addEvent(elem, type, handler) { if(!elem) _d('Error: invalid param in `addEvent()`.'); if (elem.addEventListener) elem.addEventListener(type, handler, false); else if (elem.attachEvent) elem.attachEvent("on" + type, handler); } /** * Function deattach event to element * * @version 2012-07-22 * @param Object elem dom element * @param string type event type * @param mixed handler * @return Object */ function removeEvent(elem, type, handler) { if(!elem) _d('Error: invalid param in `removeEvent()`.'); if (elem.removeEventListener) elem.removeEventListener(type, handler, false) else if (elem.detachEvent) elem.detachEvent("on" + type, handler) } //    Event ,   . //               IE,      /** * Function return Cross-browser object Event * * @version 2012-08-17 * @param Object e event Object * @return Object */ function getEvent(e) { // get event element event = e || window.event // function edit event element one time if ( event.isFixed ) return event event.isFixed = true // add 'preventDefault/stopPropagation' for IE event.preventDefault = event.preventDefault || function(){this.returnValue = false} event.stopPropagation = event.stopPropagaton || function(){this.cancelBubble = true} // add 'target' for IE if (!event.target) event.target = event.srcElement // add 'relatedTarget' for IE, if need if (!event.relatedTarget && event.fromElement) event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement; // add 'pageX/pageY' for IE if ( event.pageX == null && event.clientX != null ) { var html = document.documentElement, body = document.body; event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0); event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0); } // add 'which' for mouse in IE // 1 == left; 2 == middle; 3 == right if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); return event; } //  ,   js web-    , //   - JS ,    (     .) //      . //   ,      ,     onLoad() /** * Function attach one event on dom ready * * @version 2012-10-27 * @param mixed handler * @return void */ function bindReady(handler) { var called = false; // simple function function ready() { if (called) return; called = true; handler(); } // if browser support event "DOMContentLoaded" if ( document.addEventListener ) { document.addEventListener( "DOMContentLoaded", function(){ ready() }, false ); } else if ( document.attachEvent ) { // if IE browsers if ( document.documentElement.doScroll && window == window.top ) { function tryScroll(){ if (called) return; if (!document.body) return; // try scroll page, else try scroll through some time try { document.documentElement.doScroll("left"); ready(); } catch(e) { setTimeout(tryScroll, 0); } } tryScroll() } // if browser support event "onreadystatechange" document.attachEvent("onreadystatechange", function(){ if ( document.readyState === "complete" ) ready() }); } // attach to standart onLoad event if (window.addEventListener) window.addEventListener('load', ready, false) else if (window.attachEvent) window.attachEvent('onload', ready) window.onload=ready } //  ,    ,   , //      ,  // initialize array for onReady() readyList = []; /** * Function attach some dom ready events * * @version 2012-10-27 * @param mixed handler * @see bindReady() * @return void */ function onReady(handler) { if (!readyList.length) { bindReady(function() { for(var i=0; i<readyList.length; i++) readyList[i](); }); } readyList.push(handler) } //  -  ,   : onReady(function () { alert('...'); }); onReady(function () { alert('     ...'); }); 

And finally, the last portion of JS for today:

  //     : // {top: xxx, left: xxx, right: xxx, bottom: xxx, width: xxx, height: xxx},  xxx -   //  , -  ,      ,    ,    scroll //      , obj.style.position ='absolute' /** * Function return all coordinates for element * * @version 2012-10-26 * @param Object obj dom element * @param boolean absolute if position = `absolute` or `fixed` * @return Object */ function getCoordinates(obj, absolute) { if(!obj) obj = window; // get block box if(obj != window && obj != document){ var box = obj.getBoundingClientRect(); var width = obj.offsetWidth; var height = obj.offsetHeight; } else{ var box = new Object({'top':0, 'left':0}); var width = window.innerWidth || document.documentElement.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight; } // get body var body = document.body; var docEl = document.documentElement; // get scroll params if((absolute != undefined) && absolute){ var scrollTop = 0; var scrollLeft = 0; } else{ var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; } // get shift in IE var clientTop = docEl.clientTop || body.clientTop || 0; var clientLeft = docEl.clientLeft || body.clientLeft || 0; var top = Math.round(box.top + scrollTop - clientTop); var left = Math.round(box.left + scrollLeft - clientLeft); return { 'top': top, 'left': left, 'right': left+width, 'bottom': top+height, 'width':width, 'height': height }; } //      /** * Function return TRUE if element has class * * @version 2012-07-22 * @param Object elem dom element * @param string classname class name * @return boolean */ function hasClass(elem, classname) { return (' '+elem.className+' ').indexOf(' '+classname+' ') > -1; } //   ,    /** * Function add new class for element * * @version 2012-07-27 * @param Object elem dom element * @param string classname class name * @return boolean */ function addClass(elem, classname) { if(!hasClass(elem, classname)) if(elem.className != '') elem.className += ' '+classname; else elem.className = classname; } // ...  -   /** * Function remove class from element * * @version 2012-07-27 * @param Object elem dom element * @param string classname class name * @return boolean */ function removeClass(elem, classname) { if(hasClass(elem, classname)) elem.className = trim(elem.className.replace(new RegExp('(^|\\s)' + classname + '(?:\\s|$)'), '$1')); } //     -  php trim() //    ,   Mootools :) /** * Function remove spaces in begin and end of string * * @version 2012-11-05 * @param string str * @return string */ function trim(str) { return String(str).replace(/^\s+|\s+$/g, ''); } 

That's probably all.
If someone needs these notes of a madman, I'll write a sequel ...

Ps. Sources will be available after the second part of the article.