Shulou(Shulou.com)06/03 Report--

This article is about what commonly used front-end JavaScript methods encapsulate. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Enter a value and return its data type * * function type (para) {return Object.prototype.toString.call (para)} 2, array function unique1 (arr) {return [... new Set (arr)]} function unique2 (arr) {var obj = {}; return arr.filter (ele = > {if (! obj [ele])) {obj [ele] = true; return true }})} function unique3 (arr) {var result = []; arr.forEach (ele = > {if (result.indexOf (ele) = =-1) {result.push (ele)}}) return result;} 3, string deduplication String.prototype.unique = function () {var obj = {}, str ='', len = this.length For (var I = 0; I

< len; i++) { if (!obj[this[i]]) { str += this[i]; obj[this[i]] = true; } } return str;}###### //去除连续的字符串 function uniq(str) { return str.replace(/(\w)\1+/g, '$1')}4、深拷贝 浅拷贝//深克隆（深克隆不考虑函数）function deepClone(obj, result) { var result = result || {}; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { if (typeof obj[prop] == 'object' && obj[prop] !== null) { // 引用值(obj/array)且不为null if (Object.prototype.toString.call(obj[prop]) == '[object Object]') { // 对象 result[prop] = {}; } else { // 数组 result[prop] = []; } deepClone(obj[prop], result[prop]) } else { // 原始值或func result[prop] = obj[prop] } }}return result;}// 深浅克隆是针对引用值function deepClone(target) { if (typeof (target) !== 'object') { return target; } var result; if (Object.prototype.toString.call(target) == '[object Array]') { // 数组 result = [] } else { // 对象 result = {}; } for (var prop in target) { if (target.hasOwnProperty(prop)) { result[prop] = deepClone(target[prop]) } } return result;}// 无法复制函数var o1 = jsON.parse(jsON.stringify(obj1));5、reverse底层原理和扩展// 改变原数组Array.prototype.myReverse = function () { var len = this.length; for (var i = 0; i < len; i++) { var temp = this[i]; this[i] = this[len - 1 - i]; this[len - 1 - i] = temp; } return this;}6、圣杯模式的继承function inherit(Target, Origin) { function F() {}; F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constructor = Target; // 最终的原型指向 Target.prop.uber = Origin.prototype;}7、找出字符串中第一次只出现一次的字母String.prototype.firstAppear = function () { var obj = {}, len = this.length; for (var i = 0; i < len; i++) { if (obj[this[i]]) { obj[this[i]]++; } else { obj[this[i]] = 1; } } for (var prop in obj) { if (obj[prop] == 1) { return prop; } }}8、找元素的第n级父元素function parents(ele, n) { while (ele && n) { ele = ele.parentElement ? ele.parentElement : ele[xss_clean]; n--; } return ele;}9、 返回元素的第n个兄弟节点function retSibling(e, n) { while (e && n) { if (n >

0) {if (e.nextElementSibling) {e = e.nextElementSibling;} else {for (e = e.nextSibling; e & & e.nodeType! = = 1; e = e.nextSibling);} else {if (e.previousElementSibling) {e = e.previousElementSibling } else {for (e = e.previousElementSibling; e & & e.nodeType! = = 1; e = e.previousElementSibling);} nemesis;}} return e;} 10, encapsulate mychildren to solve browser compatibility problems function myChildren (e) {var children = e.childNodes, arr = [], len = children.length; for (var I = 0; I)

< len; i++) { if (children[i].nodeType === 1) { arr.push(children[i]) } } return arr;}11、判断元素有没有子元素function hasChildren(e) { var children = e.childNodes, len = children.length; for (var i = 0; i < len; i++) { if (children[i].nodeType === 1) { return true; } } return false;}12、我一个元素插入到另一个元素的后面Element.prototype.insertAfter = function (target, elen) { var nextElen = elen.nextElenmentSibling; if (nextElen == null) { this.appendChild(target); } else { this.insertBefore(target, nextElen); }}13、返回当前的时间（年月日时分秒）function getDateTime() { var date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() + 1, minute = date.getMinutes(), second = date.getSeconds(); month = checkTime(month); day = checkTime(day); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒"}14、获得滚动条的滚动距离 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}}}15、获得视口的尺寸function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8及其以下 if (document.compatMode === "BackCompat") { // 怪异模式 return { w: document.body.clientWidth, h: document.body.clientHeight } } else { // 标准模式 return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } }}16、获取任一元素的任意属性function getStyle(elem, prop) { return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]}17、绑定事件的兼容代码function addEvent(elem, type, handle) { if (elem.addEventListener) { //非ie和非ie9 elem.addEventListener(type, handle, false); } else if (elem.attachEvent) { //ie6到ie8 elem.attachEvent('on' + type, function () { handle.call(elem); }) } else { elem['on' + type] = handle; }}18、解绑事件function removeEvent(elem, type, handle) { if (elem.removeEventListener) { //非ie和非ie9 elem.removeEventListener(type, handle, false); } else if (elem.detachEvent) { //ie6到ie8 elem.detachEvent('on' + type, handle); } else { elem['on' + type] = null; }}19、取消冒泡的兼容代码function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; }}20、检验字符串是否是回文function isPalina(str) { if (Object.prototype.toString.call(str) !== '[object String]') { return false; } var len = str.length; for (var i = 0; i < len / 2; i++) { if (str[i] != str[len - 1 - i]) { return false; } } return true;}21、检验字符串是否是回文function isPalindrome(str) { str = str.replace(/\W/g, '').toLowerCase(); console.log(str) return (str == str.split('').reverse().join(''))}22、兼容getElementsByClassName方法Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) { var allDomArray = document.getElementsByTagName('*'); var lastDomArray = []; function trimSpace(strClass) { var reg = /\s+/g; return strClass.replace(reg, ' ').trim() } for (var i = 0; i < allDomArray.length; i++) { var classArray = trimSpace(allDomArray[i].className).split(' '); for (var j = 0; j < classArray.length; j++) { if (classArray[j] == _className) { lastDomArray.push(allDomArray[i]); break; } } } return lastDomArray;}23、运动函数function animate(obj, json, callback) { clearInterval(obj.timer); var speed, current; obj.timer = setInterval(function () { var lock = true; for (var prop in json) { if (prop == 'opacity') { current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100; } else { current = parseInt(window.getComputedStyle(obj, null)[prop]); } speed = (json[prop] - current) / 7; speed = speed >

0? Math.ceil (speed): Math.floor (speed); if (prop = = 'opacity') {obj.style [prop] = (current + speed) / 100;} else {obj.style [prop] = current + speed +' px';} if (current! = json [prop]) {lock = false }} if (lock) {clearInterval (obj.timer); typeof callback = = 'function'? Callback ():';}}, 30)} 24, elastic motion function ElasticMovement (obj, target) {clearInterval (obj.timer); var iSpeed = 40, a, u = 0.8; obj.timer = setInterval (function () {a = (target-obj.offsetLeft) / 8; iSpeed = iSpeed + a; iSpeed = iSpeed * u; if (Math.abs (iSpeed))

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.