js封装一些常用功能函数

// 1.输出类型值，封装typeof方法 // 2.数组去重 // 3.字符串去重 // 4.字符串中只出现一次并且是第一次出现的字符 // 5.圣杯模式 继承模式 // 6.深拷贝 // 7.封装函数，返回元素e的第n层祖先元素 // 8.封装child功能，解决以前部分浏览器不兼容问题,返回元素节点 noteType==1 // 9.封装hasChildren()方法，不可以使用children属性 // 10.封装函数，返回元素e的第n个元素节点，n为正，返回后面的兄弟节点， // 11.返回元素子节点，按照层级来（不是很好） // 12.封装insertAfter // 13.求屏幕滚动距离 // 14.封装函数，获取屏幕当前视口大小 // 15.封装 获取元素css属性值的方法 // 16.封装函数 事件绑定函数 解决兼容性问题 addEvent // 17.封装取消冒泡事件 // 18.封装阻止默认事件 // 1.输出类型值，封装typeof方法 function type(target) { // 1.分两类 原始值 引用值 // 2.区分引用值 // 3.null var template = { "[object Array]": "array", "[object Object]": "object", "[object Number]": "number - object", "[object Boolean]": "boolean - object", "[object String]": "string - object" } if (target === null) { return "null"; } else if (typeof (target) == 'object') { // 数组 对象 包装类 Object.prototype.toString var str = Object.prototype.toString.call(target); return template[str]; } else { return typeof (target); } } // 2.数组去重 // 要求在原型链上编程 // Array.prototype.unique = function () {} // 利用对象属性名不能相同,哈希值 Array.prototype.unique = function () { var obj = {}, arr = [], len = this.length; for (var i = 0; i < len; i++) { if (!obj[this[i]]) { obj[this[i]] = "a"; arr.push(this[i]); } } return arr; } // 3.字符串去重 String.prototype.uniqueStr = function () { var Str = '', obj = {}; for (var prop in this) { if (this.hasOwnProperty(prop)) { if (!obj[this[prop]]) { obj[this[prop]] = "a"; Str += this[prop]; } } } return Str; } // 4.字符串中只出现一次并且是第一次出现的字符 String.prototype.theFirstWord = function () { var obj = {}; for (var prop in this) { if (this.hasOwnProperty(prop)) { (!obj[this[prop]]) ? obj[this[prop]] = 1 : obj[this[prop]] += 1; } } for (var prop in obj) { if (obj[prop] == 1) { return prop; } } } // 5.圣杯模式 继承模式 var inhert = (function () { var F = {}; return function (target, origin) { F.prototype = origin.prototype; target.prototype = new F(); target.prototype.constructor = target; target.prototype.uber = origin.prototype } }()) // 6.深拷贝 function deepClone(origin, target) { var target = target || {}, //参数预处理 toStr = Object.prototype.toString, //判断是数组还是对象 arrStr = '[object Array]'; for (prop in origin) { if (origin.hasOwnProperty(prop)) { if (typeof (origin[prop]) == 'object') { if (toStr.call(origin[prop]) == arrStr) { target[prop] = []; } else { target[prop] = {}; } deepClone(origin[prop], target[prop]); } else { target[prop] = origin[prop]; } } } } // 7.封装函数，返回元素e的第n层祖先元素 function retParent(elem, n) { while (elem && n) { elem = elem.parentElement; n--; } return elem; } // 8.封装child功能，解决以前部分浏览器不兼容问题,返回元素节点 noteType==1 Element.prototype.myChildren = function () { var child = this.childNodes; var len = child.length; var arr = []; for (var i = 0; i < len; i++) { if (child[i].nodeType == 1) { arr.push(child[i]); } } return arr; } // 9.封装hasChildren()方法，不可以使用children属性 Element.prototype.myHasChildren = function () { var child = this.childNodes; var len = child.length; for (var i = 0; i < len; i++) { if (child[i].nodeType == 1) { return true; } } return false; } // 10.封装函数，返回元素e的第n个元素节点，n为正，返回后面的兄弟节点， // n为负，返回前面的，n = 0返回自己 // 循环一般要考虑条件的合法性 function retSibling(e, n) { while (e && n) { if (n > 0) { e = e.nextElementSibling; n--; } else { e = e.previousElementSibling; n++; } } return e; } // 做浏览器兼容问题 function retSibling(e, n) { while (e && n) { if (n > 0) { if (e.nextElementSibling) { e = e.nextElementSibling; } else { for (e = e.nextSibling; e && e.noteType != 1; e = e.nextSibling); } n--; } else { if (e.nextElementSibling) { e = e.nextElementSibling; } else { for (e = e.previousSibling; e && e.noteType != 1; e = e.previousSibling); } n++; } } return e; } // 11.返回元素子节点，按照层级来（不是很好） Element.prototype.myChild1 = function (obj) { var Obj = obj || {}; var child = this.childNodes; var len = child.length; for (var i = 0; i < len; i++) { var myNodeName = child[i].nodeName.toString(); if (child[i].nodeType == 1 && child[i].childNodes.length <= 1) { Obj[i + "." + myNodeName] = child[i].nodeName; } else if (child[i].nodeType == 1 && child[i].childNodes.length > 1) { Obj[i + "." + myNodeName] = {}; child[i].myChild1(Obj[i + "." + myNodeName]); } } return Obj; } // 12.封装insertAfter Element.prototype.inserAfter = function (targetNode, afterNode) { var beforNode = afterNode.nextElementSibling; if (beforNode == null) { this.appendChild(targetNode); } else { this.insertBefore(targetNode, beforNode); } } // 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 getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { if (document.compatMode === "BackCompat") { return { w: document.body.clientWidth, h: document.body.clientHeight } } else { return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } } //15.封装 获取元素css属性值的方法 // elem：元素名 prop：css属性名 function getStyle(elem, prop) { if (window.getComputedStyle) { return window.getComputedStyle(elem, null)[prop]; } else { return elem.currentStyle[prop]; } } // 16.封装函数 事件绑定函数 解决兼容性问题 addEvent function addEvent(elem, type, handle) { if (elem.addEventListener) { elem.addEventListener(type, handle, false); } else if (elem.attachEvent) { elem.attachEvent('on' + type, function () { handle.call(elem); }) } else { elem['on' + type] = handle; } } // 17.封装取消冒泡事件 function stopBobble(event) { if (event.stopPropagation) { event.stopPropagation; } else { event.cancelBubble = true; } } // 18.封装阻止默认事件 function cancelHandler(event) { if (event.preventDefault) { event.preventDefault; } else { event.returnValue = false; } }