江苏龙网

  1. 主页 > 生活百科 > >

常用的前端js函数封装，可以直接用( 三 )

js函数封装

< hrefarr.length; i++) {hrefarr[i] = hrefarr[i].split('=');obj[hrefarr[i][0]] = hrefarr[i][1];}return obj;}31、数组排序
// 快排 [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;}function bubbleSort(arr) {var len = arr.length;for (var i = 0; i < len - 1; i++) {for (var j = 0; j < len - 1 - i; j++) {if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}return arr;}32、遍历Dom树
// 给定页面上的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
function ajax(method, url, callback, data, flag) {var xhr;flag = flag || true;method = method.toUpperCase();if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject('Microsoft.XMLHttp');}xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(2)callback(xhr.responseText);}}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 loadScript(url, callback) {var oscript = document.createElement('script');if (oscript.readyState) { // ie8及以下版本oscript.onreadystatechange = function () {if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {callback();}}} else {oscript.onload = function () {callback()};}oscript.src = https://www.isolves.com/it/cxkf/yy/js/2021-04-02/url;document.body.appendChild(oscript);}35、cookie管理
var cookie = {set: function (name, value, time) {document.cookie = name + '=' + value + '; max-age=' + time;return this;},remove: function (name) {return this.setCookie(name, '', -1);},get: function (name, callback) {var allCookieArr = document.cookie.split('; ');for (var i = 0; i < allCookieArr.length; i++) {var itemCookieArr = allCookieArr[i].split('=');if (itemCookieArr[0] === name) {return itemCookieArr[1]}}return undefined;}}36、实现bind()方法
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、防抖
function debounce(handle, delay) {var timer = null;return function () {var _self = this,_args = arguments;clearTimeout(timer);timer = setTimeout(function () {handle.apply(_self, _args)}, delay)}}40、节流
function throttle(handler, wait) {var lastTime = 0;return function (e) {var nowTime = new Date().getTime();if (nowTime - lastTime > wait) {handler.apply(this, arguments);lastTime = nowTime;}}}41、requestAnimFrame兼容性方法
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底层方法


推荐阅读


上一篇：内网穿透工具chisel

下一篇：抖音、知乎纷纷上线图文转视频功能，加速“古典自媒体”的进化还是消亡？