1. 圣杯模式继承
var inherit = ( function ( ) {
var Buffer = function ( ) { } ;
return function ( Target, Origin ) {
Buffer . prototype = Origin . prototype;
Target . prototype = new Buffer ( ) ;
Target . prototype. constructor = Target;
Target. super_class = Origin;
}
} ) ( ) ;
2. 封装typeof函数
function myTypeof ( str ) {
var toStr = Object . prototype. toString,
strType = typeof ( str) ;
res = {
'[object Object]' : '[object Object]' ,
'[object Array]' : '[object Array]' ,
'[object Boolean]' : '[object Boolean]' ,
'[object Number]' : '[object Number]' ,
'[object String]' : '[object String]' ,
'[object Date]' : '[object Date]'
} ;
if ( str === null ) {
return 'null' ;
} else if ( strType === 'object' ) {
var newType = toStr . call ( str) ;
return res[ newType] ;
} else {
return strType;
}
}
3. 深拷贝
function deepClone ( origin, target ) {
var target = target || { } ,
toStr = Object . prototype. toString,
arrType = '[object Array]' ;
for ( var key in origin) {
if ( origin. hasOwnProperty ( key) ) {
if ( typeof ( origin[ key] ) === 'object' && origin[ key] !== null ) {
if ( toStr . call ( origin[ key] ) === arrType) {
target[ key] = [ ] ;
deepClone ( origin[ key] , target[ key] ) ;
} else {
target[ key] = { } ;
deepClone ( origin[ key] , target[ key] ) ;
}
} else {
target[ key] = origin[ key] ;
}
}
}
return target;
}
4. 获取子元素节点
Element . prototype. myChildren = function ( ) {
var childNodes = this . childNodes,
childNodesLen = childNodes. length,
temp = {
'length' : 0 ,
'splice' : Array . prototype. splice,
'push' : Array . prototype. push
} ;
for ( var i = 0 ; i < childNodesLen; i++ ) {
var item = childNodes[ i] ;
if ( item. nodeType === 1 ) {
temp. push ( item) ;
}
}
return temp;
}
5. 遍历任意一个父元素,找到它的子元素节点,有数字参数的话,就返回对应的子元素;没有数字参数,就返回子元素节点的集合。
Element . prototype. checkChildren = function ( number ) {
var childNodes = this . childNodes,
childNodesLen = childNodes. length,
temp = {
'length' : 0 ,
'splice' : Array . prototype. splice,
'push' : Array . prototype. push
} ;
if ( number !== undefined && typeof ( number) !== 'number' ) {
return undefined ;
}
return number === undefined ? filterChildren ( ) : filterChildren ( ) [ number] ;
function filterChildren ( ) {
for ( var i = 0 ; i < childNodesLen; i++ ) {
var item = childNodes[ i] ;
if ( item. nodeType === 1 ) {
temp. push ( item) ;
}
}
return temp;
}
}
6. 找出一个元素的第N层父级元素。
Element . prototype. parentNth = function ( number ) {
var type = typeof ( number) ,
elem = this ;
if ( number === undefined || type !== 'number' ) {
return elem. parentNode;
} else if ( number < 0 ) {
return undefined ;
}
while ( number) {
if ( elem. nodeName === 'HTML' ) {
return null ;
}
elem = elem. parentNode;
number-- ;
}
return elem;
}
7. 判断父节点是否存在子元素节点。
Element . prototype. hasChildrenElement = function ( ) {
var childNodes = this . childNodes,
childNodesLen = childNodes. length,
item;
for ( var i = 0 ; i < childNodesLen; i++ ) {
item = childNodes[ i] ;
if ( item. nodeType === 1 ) {
return true ;
}
}
return false ;
}
8. 寻找兄弟元素节点,传递参数N,N>0找之后第N个兄弟元素节点;N<0找之前的第N个。
Element . prototype. brotherElementNode = function ( number ) {
var elem = this ,
type = typeof ( number) ,
parentNode = elem. parentNode,
parentChildNodes = parentNode. childNodes,
parentChildNodesLen = parentChildNodes. length;
if ( type === 'undefined' || type !== 'number' ) {
return undefined ;
}
if ( number > 0 ) {
return getBrotherElement ( elem, number) ;
} else if ( number < 0 ) {
return getBrotherElement ( elem, number) ;
}
return elem;
function getBrotherElement ( elem, number ) {
var temp = {
'length' : 0 ,
'splice' : Array . prototype. splice,
'push' : Array . prototype. push,
'indexOf' : Array . prototype. indexOf
} ,
index = 0 ;
for ( var i = 0 ; i < parentChildNodesLen; i++ ) {
var item = parenChildNodes[ i] ;
if ( item. nodeType === 1 ) {
temp. push ( item) ;
}
}
index = temp. indexOf ( elem) ;
return number === 0 ? temp[ index] : temp[ index + number] ;
}
}
9. 寻找兄弟元素节点,传递参数N,N>0找之后第N个兄弟元素节点;N<0找之前的第N个。
Element . prototype. brotherNode = function ( n ) {
var elem = this ;
while ( n) {
if ( n > 0 ) {
if ( elem. nextElementSibling) {
elem = elem. nextElementSibling;
} else {
for ( elem = elem. nextSibling; elem && elem. nodeType !== 1 ; elem = elem. nextSibling) ;
}
n-- ;
} else {
for ( elem = elem. previousSibling; elem && elem. nodeType !== 1 ; elem = elem. previousSibling) ;
}
n++ ;
}
return elem;
}
Element . prototype. brotherNode = function ( n ) {
var elem = this ;
while ( n) {
if ( n > 0 ) {
elem = elem. nextSibling;
while ( elem && elem. nodeType !== 1 ) {
elem = elem. nextSibling;
}
n-- ;
} else if ( n < 0 ) {
elem = elem. previousSibling;
while ( elem && elem. nodeType !== 1 ) {
elem = elem. previousSibling;
}
n++ ;
}
}
return elem;
}
10. 遍历一个父级元素下面所有的元素节点
Element . prototype. childrenElementNode = function ( arr ) {
var elem = this ,
childNodes = elem. childNodes,
childNodeLen = elem. childNodes. length,
temp = arr || {
'length' : 0 ,
'splice' : Array . prototype. splice,
'push' : Array . prototype. push
} ;
for ( var i = 0 ; i < childNodeLen; i++ ) {
var item = childNodes[ i] ;
if ( item. nodeType === 1 ) {
temp. push ( item) ;
item. childrenElementNode ( temp) ;
}
}
}
function getFullChildren ( node ) {
var children = node. childNodes,
childrenLen = children. length,
item;
if ( node && node. nodeType === 1 ) {
console. log ( node) ;
}
for ( var i = 0 ; i < childrenLen; i++ ) {
item = children[ i] ;
if ( item. nodeType === 1 ) {
getFullChildren ( item) ;
}
}
}
11. 原型上封装insertAfter方法
Element . prototype. insertAfter = function ( newNode, referenceNode ) {
var refNextNode = referenceNode. nextSibling;
while ( refNextNode) {
if ( refNextNode. nodeType === 1 ) {
return this . insertBefore ( newNode, refNextNode) ;
}
refNextNode = refNextNode. nextSibling;
}
this . appendChild ( newNode) ;
}
12. DOM结构树倒序
function revese ( node ) {
var children = node. childNodes,
childrenLen = children. length;
while ( childrenLen) {
childrenLen-- ;
node. appendChild ( children[ childrenLen] ) ;
}
}
13. 获取滚动条的兼容写法
function getScrollOffset ( ) {
if ( window. pageXOffset) {
return {
x : window. pageXOffset,
y : window. pageYOffset
}
} else {
return {
x : document. body. scrollLeft + document. documentElement. scrollLeft,
y : document. body. scrollTop + document. documentElement. scrollTop
}
}
}
14. 获取浏览器的可视窗口宽和高兼容写法
function getViewportSize ( ) {
if ( window. innerWidth) {
return {
x : window. innerWidth, ( 包括滚动条)
y : window. innerHeight
}
} else {
if ( document. compatMode === 'BackCompat' ) {
return {
x : document. body. clientWidth, ( 不包括滚动条)
y : document. body. clientHeight
}
} else {
return {
x : document. documentElement. clientWidth, ( 不包括滚动条)
y : document. documentElement. clientHeight
}
}
}
}
15. 获取文档的宽和高兼容写法
function getDocSize ( ) {
if ( document. body. scrollWidth) {
return {
x : document. body. scrollWidth,
y : document. body. scrollHeight
}
} else {
return {
x : document. documentElement. scrollWidth,
y : document. documentElement. scrollHeight
}
}
}
16. 封装offsetLeft和offsetTop兼容写法
function getElemDocPosition ( elem ) {
var parentPos = elem. offsetParent,
offsetLeft = parentPos. offsetLeft,
offsetTop = parentPos. offsetTop;
if ( elem. nodeName === 'HTML' ) {
return {
offsetLeft : 0 ,
offsetTop : 0
}
}
while ( parentPos) {
parentLeft += parentPos. offsetLeft;
parentTop += parentPos. offsetTop;
parentPos = parentPos. offsetParent;
}
return {
offsetLeft : parentOffX,
offsetTop : parentOffY
}
}
17. 获取计算样式方法window.getComputedStyle()封装兼容写法
function getStyle ( elem, prop ) {
if ( window. getComputedStyle) {
if ( prop) {
return window. getComputedStyle ( elem, null ) [ prop] ;
} else {
return window. getComputedStyle ( elem, null ) ;
}
} else {
if ( prop) {
return elem. currentStyle[ prop] ;
} else {
return elem. currentStyle;
}
}
}
18. 绑定事件的监听兼容写法
function addEvent ( elem, type, fn ) {
if ( elem. addEventListener) {
elem. addEventListener ( type, fn, false ) ;
} else if ( elem. attachEvent) {
elem. attachEvent ( 'on' + type, function ( ) {
fn . call ( elem) ;
} ) ;
} else {
elem[ 'on' + type] = fn;
}
}
19. 解除事件的监听兼容写法
function removeEvent ( elem, type, fn ) {
if ( elem. removeEventListener) {
elem. removeEventListener ( type, fn, false ) ;
} else if ( elem. detachEvent) {
elem. detachEvent ( 'on' + type, fn) ;
} else {
elem[ 'on' + type] = false ;
}
}
20. 取消冒泡的兼容写法
function cancleBublle ( event ) {
var event = event || window. event;
if ( event. stopPropagation) {
event. stopPropagation ( ) ;
} else {
event. cancelBublle = true ;
}
}
21. 取消默认事件的兼容性写法
function cancleDefaultEvent ( event ) {
var event = event || window. event;
if ( event. preventDefault) {
event. preventDefault ( ) ;
} else if ( event. returnValue) {
event. returnValue = false ;
} else {
return false ;
}
}
22. 鼠标坐标系pageX / pageY封装
function posPage ( e ) {
var e = e || window. event,
sLeft = getScrollLeft ( ) . x,
sTop = getScrollTop ( ) . y,
cLeft = document. documentElement. clientLeft || 0 ,
cTop = document. documentElement. clientTop || 0 ;
return {
x : e. clientX + sLeft - cLeft,
y : e. clientY + sTop - cTop
}
}
23. 封装拖拽函数
function elemDrag ( elem ) {
var x,
y;
addEvent ( elem, 'mousedown' , function ( e ) {
var e = e || window. event,
clientX = posPage ( e) . X - parseInt ( getStyle ( elem, 'left' ) ) ,
clientY = posPage ( e) . Y - parseInt ( getStyle ( elem, 'top' ) ) ;
addEvent ( document, 'mousemove' , mouseMove) ;
addEvent ( document, 'mouseup' , mouseUp) ;
function mouseMove ( e ) {
var e = e || window. event,
x = posPage ( e) . X - clientX,
y = posPage ( e) . Y - clientY;
elem. style. left = x + 'px' ;
elem. style. top = y + 'px' ;
}
function mouseUp ( e ) {
var e = e || window. event;
removeEvent ( document, 'mousemove' , mouseMove) ;
removeEvent ( document, 'mouseup' , mouseUp) ;
}
cancleBublle ( e) ;
cancleDefaultEvent ( e) ;
} ) ;
}
24. AJAX的封装
var $ = ( function ( ) {
function _doAjax ( opt ) {
var xhr = window. XMLHttpRequest ? new XMLHttpRequest ( ) : new ActiveXObject ( 'Microsoft.XMLHTTP' ) ;
if ( ! xhr) {
throw new Error ( '您的浏览器不支持AJAX请求数据!请更新后再试~' ) ;
}
var method = ( opt. method || 'GET' ) . toUpperCase ( ) ,
url = opt. url,
async = '' + opt. async === 'false' ? false : true ,
data = opt. data || null ,
dataType = opt. dataType || 'JSON' ,
jsonp = opt. jsonp || 'cb' ,
jsonpCallback = opt. jsonpCallback || 'jQuery' + randomNum ( ) + '_' + new Date ( ) . getTime ( ) ,
success = opt. success || function ( ) { } ,
error = opt. error || function ( ) { } ,
complete = opt. complete || function ( ) { } ,
timeout = opt. timeout || 5000 ,
t = null ;
if ( ! url) {
throw new Error ( '未传入url参数' ) ;
}
if ( dataType. toUpperCase ( ) === 'JSONP' && method !== 'GET' ) {
throw new Error ( '如果dataType为JSONP,请您将type设置成GET' ) ;
}
if ( dataType. toUpperCase ( ) === 'JSONP' ) {
var oScript = document. createElement ( 'script' ) ;
oScript. src = url. indexOf ( '?' ) === - 1
? url + '?' + jsonp + '=' + jsonpCallback
: url + '&' + jsonp + '=' + jsonpCallback;
document. body. appendChild ( oScript) ;
document. body. removeChild ( oScript) ;
window[ jsonpCallback] = function ( data ) {
success ( data) ;
}
return ;
}
xhr. onreadystatechange = function ( ) {
if ( xhr. readyState === 4 ) {
if ( ( xhr. status >= 200 && xhr. status < 300 ) || xhr. status === 304 ) {
switch ( dataType. toUpperCase ( ) ) {
case 'JSON' :
success ( JSON . parse ( xhr. responseText) ) ;
break ;
case 'XML' :
success ( xhr. responseXML) ;
break ;
case 'TEXT' :
success ( xhr. responseText) ;
break ;
default :
success ( JSON . parse ( xhr. responseText) ) ;
break ;
}
} else {
error ( ) ;
}
clearTimeout ( t) ;
t = null ;
xhr = null ;
complete ( ) ;
}
}
xhr. open ( method, url, async) ;
xhr. setRequestHeader ( "Content-type" , "application/x-www-form-urlencoded" ) ;
xhr. send ( method === 'GET' ? null : dataFormat ( data) ) ;
t = setTimeout ( function ( ) {
xhr. abort ( ) ;
clearTimeout ( t) ;
t = null ;
xhr = null ;
throw new Error ( '请求超时,请稍后重试!' ) ;
} , timeout)
}
function dataFormat ( data ) {
var str = '' ;
for ( var key in data) {
if ( data. hasOwnProperty ( key) ) {
str += key + '=' + data[ key] + '&' ;
}
}
return str. replace ( / &$ / , '' ) ;
}
function randomNum ( ) {
var str = '' ;
for ( var i = 0 ; i < 20 ; i++ ) {
str += Math. floor ( Math. random ( ) * 10 ) ;
}
return str;
}
return {
Ajax : function ( opt ) {
_doAjax ( opt) ;
} ,
post : function ( url, data, timeout, dataType, successCB, errorCB, completeCB ) {
_doAjax ( {
method : 'POST' ,
url : url,
data : data,
dataType : dataType,
timeout : timeout,
success : successCB,
error : errorCB,
complete : completeCB
} ) ;
} ,
get : function ( url, data, timeout, dataType, successCB, errorCB, completeCB ) {
_doAjax ( {
method : 'GET' ,
url : url,
data : data,
timeout : timeout,
dataType : dataType,
success : successCB,
error : errorCB,
complete : completeCB
} ) ;
}
}
} ) ( ) ;
var ajaxDomain = ( function ( ) {
function createIframe ( frameId, frameUrl ) {
var iframe = document. createElement ( 'iframe' ) ;
iframe. src = frameUrl;
iframe. id = frameId;
iframe. style. display = 'none' ;
return frame;
}
return function ( opt ) {
document. main = opt. basicDomain;
var iframe = createIframe ( opt. frameId, opt. frameUrl) ;
iframe. onload = function ( ) {
var $$ = document. getElementById ( opt. frameId) . contentWindow. $;
$$. ajax ( {
url : opt. url,
method : opt. method,
data : opt. data,
success : opt. success,
error : opt. error
} )
}
document. body. appenChild ( iframe) ;
}
} ) ( ) ;
25. Cookie的封装
var manageCookie = {
set : function ( key, value, expTime ) {
document. cookie = key + '=' + value + '; ' + 'max-age=' + expTime;
return this ;
} ,
get : function ( key, callback ) {
var cookiesArray = document. cookie. split ( '; ' ) ;
for ( var i = 0 ; i < cookiesArray. length; i++ ) {
var cookieItem = cookiesArray[ i] ;
var cookieItemArray = cookieItem. split ( '=' ) ;
if ( cookieItemArray[ 0 ] === key) {
callback ( cookieItemArray[ 1 ] ) ;
return this
}
}
callback ( undefined ) ;
return this ;
} ,
delete : function ( key ) {
return this . set ( key, '' , - 1 ) ;
}
}
26.节流函数
var oInput = document.querySelector('.J_Input_Node');
oInput.addEventListener('input', throttle(changeInputValue, 1000), false);
// 节流函数
function throttle(throttleFn, delay) {
var startTime = new Date().getTime();
return function () {
var endTime = new Date().getTime(),
distance = endTime - startTime;
if (distance >= delay) {
// 允许触发
throttleFn.call(this);
startTime = endTime;
}
}
}
// 一定间隔内减少触发的次数
function changeInputValue() {
console.log(this.value);
}