常用的前端JavaScript方法封装

发布于：2022-03-13 10:27:22 栏目：技术文档

1、输入一个值，返回其数据类型**

function type(para) { return Object.prototype.toString.call(para)}2、数组去重

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.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.parentNode; n—; } return ele;}9、返回元素的第n个兄弟节点

Element.prototype.insertAfter = function (target, elen) { var nextElen = elen.nextElenmentSibling; if (nextElen == null) { this.appendChild(target); } else { this.insertBefore(target, nextElen); }}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 } }}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 stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; }}20、检验字符串是否是回文

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、弹性运动

Array.prototype.myForEach = function (func, obj) { var len = this.length; var _this = arguments[1] ? arguments[1] : window; // var _this=arguments[1]||window; for (var i = 0; i < len; i++) { func.call(_this, this[i], i, this) }}26、封装自己的filter方法

Array.prototype.myFilter = function (func, obj) { var len = this.length; var arr = []; var _this = arguments[1] || window; for (var i = 0; i < len; i++) { func.call(_this, this[i], i, this) && arr.push(this[i]); } return arr;}27、数组map方法

Array.prototype.myMap = function (func) { var arr = []; var len = this.length; var _this = arguments[1] || window; for (var i = 0; i < len; i++) { arr.push(func.call(_this, this[i], i, this)); } return arr;}28、数组every方法

Array.prototype.myEvery = function (func) { var flag = true; var len = this.length; var _this = arguments[1] || window; for (var i = 0; i < len; i++) { if (func.apply(_this, [this[i], i, this]) == false) { flag = false; break; } } return flag;}29、数组reduce方法

Array.prototype.myReduce = function (func, initialValue) { var len = this.length, nextValue, i; if (!initialValue) { // 没有传第二个参数 nextValue = this[0]; i = 1; } else { // 传了第二个参数 nextValue = initialValue; i = 0; } for (; i < len; i++) { nextValue = func(nextValue, this[i], i, this); } return nextValue;}30、获取url中的参数

// 快排 [left] + min + [right]function quickArr(arr) { if (arr.length <= 1) { return arr; } var left = [], right = []; var pIndex = Math.floor(arr.length / 2); var p = arr.splice(pIndex, 1)[0]; for (var i = 0; i < arr.length; i++) { if (arr[i] <= p) { left.push(arr[i]); } else { right.push(arr[i]); } } // 递归 return quickArr(left).concat([p], quickArr(right));}

// 冒泡function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] > arr[j]) { var temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } return arr;}

// 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)// 对于每个访问的元素，函数讲元素传递给提供的回调函数function traverse(element, callback) { callback(element); var list = element.children; for (var i = 0; i < list.length; i++) { traverse(list[i], callback); }}33、原生js封装ajax

if (method == 'GET') {
    var date = new Date(),
    timer = date.getTime();
    xhr.open('GET', url + '?' + data + '&timer' + timer, flag);
    xhr.send()
    } else if (method == 'POST') {
    xhr.open('POST', url, flag);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
}

}34、异步加载script

Function.prototype.myBind = function (target) { var target = target || window; var _args1 = [].slice.call(arguments, 1); var self = this; var temp = function () {}; var F = function () { var _args2 = [].slice.call(arguments, 0); var parasArr = _args1.concat(_args2); return self.apply(this instanceof temp ? this : target, parasArr) } temp.prototype = self.prototype; F.prototype = new temp(); return F;}37、实现call()方法

Function.prototype.myCall = function () { var ctx = arguments[0] || window; ctx.fn = this; var args = []; for (var i = 1; i < arguments.length; i++) { args.push(arguments[i]) } var result = ctx.fn(…args); delete ctx.fn; return result;}38、实现apply()方法

Function.prototype.myApply = function () { var ctx = arguments[0] || window; ctx.fn = this; if (!arguments[1]) { var result = ctx.fn(); delete ctx.fn; return result; } var result = ctx.fn(…arguments[1]); delete ctx.fn; return result;}39、防抖

window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };})();42、cancelAnimFrame兼容性方法

window.cancelAnimFrame = (function () { return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (id) { window.clearTimeout(id); };})();43、jsonp底层方法

function formatDate(t, str) { var obj = { yyyy: t.getFullYear(), yy: (“” + t.getFullYear()).slice(-2), M: t.getMonth() + 1, MM: (“0” + (t.getMonth() + 1)).slice(-2), d: t.getDate(), dd: (“0” + t.getDate()).slice(-2), H: t.getHours(), HH: (“0” + t.getHours()).slice(-2), h: t.getHours() % 12, hh: (“0” + t.getHours() % 12).slice(-2), m: t.getMinutes(), mm: (“0” + t.getMinutes()).slice(-2), s: t.getSeconds(), ss: (“0” + t.getSeconds()).slice(-2), w: [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’][t.getDay()] }; return str.replace(/([a-z]+)/ig, function ($1) { return obj[$1] });}46、验证邮箱的正则表达式

function isAvailableEmail(sEmail) { var reg = /^([\w+.])+@\w+([.]\w+)+$/ return reg.test(sEmail)}47、函数柯里化

//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术

function sumBigNumber(a, b) { var res = ‘’, //结果 temp = 0; //按位加的结果及进位 a = a.split(‘’); b = b.split(‘’); while (a.length || b.length || temp) { //~~按位非 1.类型转换，转换成数字 2.~~undefined==0 temp += ~~a.pop() + ~~b.pop(); res = (temp % 10) + res; temp = temp > 9; } return res.replace(/^0+/, ‘’);}49、单例模式

function getSingle(func) { var result; return function () { if (!result) { result = new func(arguments); } return result; }}

相关推荐

SaaS的续费率为什么那么低？
中国SaaS产业表面风光无限为什么说很难盈利
Code Review有什么好处？
什么是Istio? Istio究竟是干嘛的？
linux mv命令怎么用

阅读 +