常用javascript方法封装

墨蓝 2021-09-07 06:14 489阅读 0赞

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

  1. function type(para) {
  2. return Object.prototype.toString.call(para)
  3. }

2、数组去重

  1. function unique1(arr) {
  2. return [...new Set(arr)]
  3. }
  4. function unique2(arr) {
  5. var obj = {};
  6. return arr.filter(ele => {
  7. if (!obj[ele]) {
  8. obj[ele] = true;
  9. return true;
  10. }
  11. })
  12. }
  13. function unique3(arr) {
  14. var result = [];
  15. arr.forEach(ele => {
  16. if (result.indexOf(ele) == -1) {
  17. result.push(ele)
  18. }
  19. })
  20. return result;
  21. }

3、字符串去重

  1. String.prototype.unique = function () {
  2. var obj = {},
  3. str = '',
  4. len = this.length;
  5. for (var i = 0; i < len; i++) {
  6. if (!obj[this[i]]) {
  7. str += this[i];
  8. obj[this[i]] = true;
  9. }
  10. }
  11. return str;
  12. }
  13. ###### //去除连续的字符串
  14. function uniq(str) {
  15. return str.replace(/(\w)\1+/g, '$1')
  16. }

4、深拷贝 浅拷贝

  1. //深克隆(深克隆不考虑函数)
  2. function deepClone(obj, result) {
  3. var result = result || {};
  4. for (var prop in obj) {
  5. if (obj.hasOwnProperty(prop)) {
  6. if (typeof obj[prop] == 'object' && obj[prop] !== null) {
  7. // 引用值(obj/array)且不为null
  8. if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
  9. // 对象
  10. result[prop] = {};
  11. } else {
  12. // 数组
  13. result[prop] = [];
  14. }
  15. deepClone(obj[prop], result[prop])
  16. } else {
  17. // 原始值或func
  18. result[prop] = obj[prop]
  19. }
  20. }
  21. }
  22. return result;
  23. }
  24. // 深浅克隆是针对引用值
  25. function deepClone(target) {
  26. if (typeof (target) !== 'object') {
  27. return target;
  28. }
  29. var result;
  30. if (Object.prototype.toString.call(target) == '[object Array]') {
  31. // 数组
  32. result = []
  33. } else {
  34. // 对象
  35. result = {};
  36. }
  37. for (var prop in target) {
  38. if (target.hasOwnProperty(prop)) {
  39. result[prop] = deepClone(target[prop])
  40. }
  41. }
  42. return result;
  43. }
  44. // 无法复制函数
  45. var o1 = jsON.parse(jsON.stringify(obj1));

5、reverse底层原理和扩展

  1. // 改变原数组
  2. Array.prototype.myReverse = function () {
  3. var len = this.length;
  4. for (var i = 0; i < len; i++) {
  5. var temp = this[i];
  6. this[i] = this[len - 1 - i];
  7. this[len - 1 - i] = temp;
  8. }
  9. return this;
  10. }

6、圣杯模式的继承

  1. function inherit(Target, Origin) {
  2. function F() {};
  3. F.prototype = Origin.prototype;
  4. Target.prototype = new F();
  5. Target.prototype.constructor = Target;
  6. // 最终的原型指向
  7. Target.prop.uber = Origin.prototype;
  8. }

7、找出字符串中第一次只出现一次的字母

  1. String.prototype.firstAppear = function () {
  2. var obj = {},
  3. len = this.length;
  4. for (var i = 0; i < len; i++) {
  5. if (obj[this[i]]) {
  6. obj[this[i]]++;
  7. } else {
  8. obj[this[i]] = 1;
  9. }
  10. }
  11. for (var prop in obj) {
  12. if (obj[prop] == 1) {
  13. return prop;
  14. }
  15. }
  16. }

8、找元素的第n级父元素

  1. function parents(ele, n) {
  2. while (ele && n) {
  3. ele = ele.parentElement ? ele.parentElement : ele.parentNode;
  4. n--;
  5. }
  6. return ele;
  7. }

9、 返回元素的第n个兄弟节点

  1. function retSibling(e, n) {
  2. while (e && n) {
  3. if (n > 0) {
  4. if (e.nextElementSibling) {
  5. e = e.nextElementSibling;
  6. } else {
  7. for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling);
  8. }
  9. n--;
  10. } else {
  11. if (e.previousElementSibling) {
  12. e = e.previousElementSibling;
  13. } else {
  14. for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling);
  15. }
  16. n++;
  17. }
  18. }
  19. return e;
  20. }

10、封装mychildren,解决浏览器的兼容问题

  1. function myChildren(e) {
  2. var children = e.childNodes,
  3. arr = [],
  4. len = children.length;
  5. for (var i = 0; i < len; i++) {
  6. if (children[i].nodeType === 1) {
  7. arr.push(children[i])
  8. }
  9. }
  10. return arr;
  11. }

11、判断元素有没有子元素

  1. function hasChildren(e) {
  2. var children = e.childNodes,
  3. len = children.length;
  4. for (var i = 0; i < len; i++) {
  5. if (children[i].nodeType === 1) {
  6. return true;
  7. }
  8. }
  9. return false;
  10. }

12、我一个元素插入到另一个元素的后面

  1. Element.prototype.insertAfter = function (target, elen) {
  2. var nextElen = elen.nextElenmentSibling;
  3. if (nextElen == null) {
  4. this.appendChild(target);
  5. } else {
  6. this.insertBefore(target, nextElen);
  7. }
  8. }

13、返回当前的时间(年月日时分秒)

  1. function getDateTime() {
  2. var date = new Date(),
  3. year = date.getFullYear(),
  4. month = date.getMonth() + 1,
  5. day = date.getDate(),
  6. hour = date.getHours() + 1,
  7. minute = date.getMinutes(),
  8. second = date.getSeconds();
  9. month = checkTime(month);
  10. day = checkTime(day);
  11. hour = checkTime(hour);
  12. minute = checkTime(minute);
  13. second = checkTime(second);
  14. function checkTime(i) {
  15. if (i < 10) {
  16. i = "0" + i;
  17. }
  18. return i;
  19. }
  20. return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒"
  21. }

14、获得滚动条的滚动距离

  1. function getScrollOffset() {
  2. if (window.pageXOffset) {
  3. return {
  4. x: window.pageXOffset,
  5. y: window.pageYOffset
  6. }
  7. } else {
  8. return {
  9. x: document.body.scrollLeft + document.documentElement.scrollLeft,
  10. y: document.body.scrollTop + document.documentElement.scrollTop
  11. }
  12. }
  13. }

15、获得视口的尺寸

  1. function getViewportOffset() {
  2. if (window.innerWidth) {
  3. return {
  4. w: window.innerWidth,
  5. h: window.innerHeight
  6. }
  7. } else {
  8. // ie8及其以下
  9. if (document.compatMode === "BackCompat") {
  10. // 怪异模式
  11. return {
  12. w: document.body.clientWidth,
  13. h: document.body.clientHeight
  14. }
  15. } else {
  16. // 标准模式
  17. return {
  18. w: document.documentElement.clientWidth,
  19. h: document.documentElement.clientHeight
  20. }
  21. }
  22. }
  23. }

16、获取任一元素的任意属性

  1. function getStyle(elem, prop) {
  2. return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]
  3. }

17、绑定事件的兼容代码

  1. function addEvent(elem, type, handle) {
  2. if (elem.addEventListener) { //非ie和非ie9
  3. elem.addEventListener(type, handle, false);
  4. } else if (elem.attachEvent) { //ie6到ie8
  5. elem.attachEvent('on' + type, function () {
  6. handle.call(elem);
  7. })
  8. } else {
  9. elem['on' + type] = handle;
  10. }
  11. }

18、解绑事件

  1. function removeEvent(elem, type, handle) {
  2. if (elem.removeEventListener) { //非ie和非ie9
  3. elem.removeEventListener(type, handle, false);
  4. } else if (elem.detachEvent) { //ie6到ie8
  5. elem.detachEvent('on' + type, handle);
  6. } else {
  7. elem['on' + type] = null;
  8. }
  9. }

19、取消冒泡的兼容代码

  1. function stopBubble(e) {
  2. if (e && e.stopPropagation) {
  3. e.stopPropagation();
  4. } else {
  5. window.event.cancelBubble = true;
  6. }
  7. }

20、检验字符串是否是回文

  1. function isPalina(str) {
  2. if (Object.prototype.toString.call(str) !== '[object String]') {
  3. return false;
  4. }
  5. var len = str.length;
  6. for (var i = 0; i < len / 2; i++) {
  7. if (str[i] != str[len - 1 - i]) {
  8. return false;
  9. }
  10. }
  11. return true;
  12. }

21、检验字符串是否是回文

  1. function isPalindrome(str) {
  2. str = str.replace(/\W/g, '').toLowerCase();
  3. console.log(str)
  4. return (str == str.split('').reverse().join(''))
  5. }

22、兼容getElementsByClassName方法

  1. Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
  2. var allDomArray = document.getElementsByTagName('*');
  3. var lastDomArray = [];
  4. function trimSpace(strClass) {
  5. var reg = /\s+/g;
  6. return strClass.replace(reg, ' ').trim()
  7. }
  8. for (var i = 0; i < allDomArray.length; i++) {
  9. var classArray = trimSpace(allDomArray[i].className).split(' ');
  10. for (var j = 0; j < classArray.length; j++) {
  11. if (classArray[j] == _className) {
  12. lastDomArray.push(allDomArray[i]);
  13. break;
  14. }
  15. }
  16. }
  17. return lastDomArray;
  18. }

23、运动函数

  1. function animate(obj, json, callback) {
  2. clearInterval(obj.timer);
  3. var speed,
  4. current;
  5. obj.timer = setInterval(function () {
  6. var lock = true;
  7. for (var prop in json) {
  8. if (prop == 'opacity') {
  9. current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
  10. } else {
  11. current = parseInt(window.getComputedStyle(obj, null)[prop]);
  12. }
  13. speed = (json[prop] - current) / 7;
  14. speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  15. if (prop == 'opacity') {
  16. obj.style[prop] = (current + speed) / 100;
  17. } else {
  18. obj.style[prop] = current + speed + 'px';
  19. }
  20. if (current != json[prop]) {
  21. lock = false;
  22. }
  23. }
  24. if (lock) {
  25. clearInterval(obj.timer);
  26. typeof callback == 'function' ? callback() : '';
  27. }
  28. }, 30)
  29. }

24、弹性运动

  1. function ElasticMovement(obj, target) {
  2. clearInterval(obj.timer);
  3. var iSpeed = 40,
  4. a, u = 0.8;
  5. obj.timer = setInterval(function () {
  6. a = (target - obj.offsetLeft) / 8;
  7. iSpeed = iSpeed + a;
  8. iSpeed = iSpeed * u;
  9. if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) {
  10. console.log('over')
  11. clearInterval(obj.timer);
  12. obj.style.left = target + 'px';
  13. } else {
  14. obj.style.left = obj.offsetLeft + iSpeed + 'px';
  15. }
  16. }, 30);
  17. }

25、封装自己的forEach方法

  1. Array.prototype.myForEach = function (func, obj) {
  2. var len = this.length;
  3. var _this = arguments[1] ? arguments[1] : window;
  4. // var _this=arguments[1]||window;
  5. for (var i = 0; i < len; i++) {
  6. func.call(_this, this[i], i, this)
  7. }
  8. }

26、封装自己的filter方法

  1. Array.prototype.myFilter = function (func, obj) {
  2. var len = this.length;
  3. var arr = [];
  4. var _this = arguments[1] || window;
  5. for (var i = 0; i < len; i++) {
  6. func.call(_this, this[i], i, this) && arr.push(this[i]);
  7. }
  8. return arr;
  9. }

27、数组map方法

  1. Array.prototype.myMap = function (func) {
  2. var arr = [];
  3. var len = this.length;
  4. var _this = arguments[1] || window;
  5. for (var i = 0; i < len; i++) {
  6. arr.push(func.call(_this, this[i], i, this));
  7. }
  8. return arr;
  9. }

28、数组every方法

  1. Array.prototype.myEvery = function (func) {
  2. var flag = true;
  3. var len = this.length;
  4. var _this = arguments[1] || window;
  5. for (var i = 0; i < len; i++) {
  6. if (func.apply(_this, [this[i], i, this]) == false) {
  7. flag = false;
  8. break;
  9. }
  10. }
  11. return flag;
  12. }

29、数组reduce方法

  1. Array.prototype.myReduce = function (func, initialValue) {
  2. var len = this.length,
  3. nextValue,
  4. i;
  5. if (!initialValue) {
  6. // 没有传第二个参数
  7. nextValue = this[0];
  8. i = 1;
  9. } else {
  10. // 传了第二个参数
  11. nextValue = initialValue;
  12. i = 0;
  13. }
  14. for (; i < len; i++) {
  15. nextValue = func(nextValue, this[i], i, this);
  16. }
  17. return nextValue;
  18. }

30、获取url中的参数

  1. function getWindonHref() {
  2. var sHref = window.location.href;
  3. var args = sHref.split('?');
  4. if (args[0] === sHref) {
  5. return '';
  6. }
  7. var hrefarr = args[1].split('#')[0].split('&');
  8. var obj = {};
  9. for (var i = 0; i < hrefarr.length; i++) {
  10. hrefarr[i] = hrefarr[i].split('=');
  11. obj[hrefarr[i][0]] = hrefarr[i][1];
  12. }
  13. return obj;
  14. }

31、数组排序

  1. // 快排 [left] + min + [right]
  2. function quickArr(arr) {
  3. if (arr.length <= 1) {
  4. return arr;
  5. }
  6. var left = [],
  7. right = [];
  8. var pIndex = Math.floor(arr.length / 2);
  9. var p = arr.splice(pIndex, 1)[0];
  10. for (var i = 0; i < arr.length; i++) {
  11. if (arr[i] <= p) {
  12. left.push(arr[i]);
  13. } else {
  14. right.push(arr[i]);
  15. }
  16. }
  17. // 递归
  18. return quickArr(left).concat([p], quickArr(right));
  19. }
  20. // 冒泡
  21. function bubbleSort(arr) {
  22. for (var i = 0; i < arr.length - 1; i++) {
  23. for (var j = i + 1; j < arr.length; j++) {
  24. if (arr[i] > arr[j]) {
  25. var temp = arr[i];
  26. arr[i] = arr[j];
  27. arr[j] = temp;
  28. }
  29. }
  30. }
  31. return arr;
  32. }
  33. function bubbleSort(arr) {
  34. var len = arr.length;
  35. for (var i = 0; i < len - 1; i++) {
  36. for (var j = 0; j < len - 1 - i; j++) {
  37. if (arr[j] > arr[j + 1]) {
  38. var temp = arr[j];
  39. arr[j] = arr[j + 1];
  40. arr[j + 1] = temp;
  41. }
  42. }
  43. }
  44. return arr;
  45. }

32、遍历Dom树

  1. // 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)
  2. // 对于每个访问的元素,函数讲元素传递给提供的回调函数
  3. function traverse(element, callback) {
  4. callback(element);
  5. var list = element.children;
  6. for (var i = 0; i < list.length; i++) {
  7. traverse(list[i], callback);
  8. }
  9. }

33、原生js封装ajax

  1. function ajax(method, url, callback, data, flag) {
  2. var xhr;
  3. flag = flag || true;
  4. method = method.toUpperCase();
  5. if (window.XMLHttpRequest) {
  6. xhr = new XMLHttpRequest();
  7. } else {
  8. xhr = new ActiveXObject('Microsoft.XMLHttp');
  9. }
  10. xhr.onreadystatechange = function () {
  11. if (xhr.readyState == 4 && xhr.status == 200) {
  12. console.log(2)
  13. callback(xhr.responseText);
  14. }
  15. }
  16. if (method == 'GET') {
  17. var date = new Date(),
  18. timer = date.getTime();
  19. xhr.open('GET', url + '?' + data + '&timer' + timer, flag);
  20. xhr.send()
  21. } else if (method == 'POST') {
  22. xhr.open('POST', url, flag);
  23. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  24. xhr.send(data);
  25. }
  26. }

34、异步加载script

  1. function loadScript(url, callback) {
  2. var oscript = document.createElement('script');
  3. if (oscript.readyState) { // ie8及以下版本
  4. oscript.onreadystatechange = function () {
  5. if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
  6. callback();
  7. }
  8. }
  9. } else {
  10. oscript.onload = function () {
  11. callback()
  12. };
  13. }
  14. oscript.src = url;
  15. document.body.appendChild(oscript);
  16. }
  1. var cookie = {
  2. set: function (name, value, time) {
  3. document.cookie = name + '=' + value + '; max-age=' + time;
  4. return this;
  5. },
  6. remove: function (name) {
  7. return this.setCookie(name, '', -1);
  8. },
  9. get: function (name, callback) {
  10. var allCookieArr = document.cookie.split('; ');
  11. for (var i = 0; i < allCookieArr.length; i++) {
  12. var itemCookieArr = allCookieArr[i].split('=');
  13. if (itemCookieArr[0] === name) {
  14. return itemCookieArr[1]
  15. }
  16. }
  17. return undefined;
  18. }
  19. }

36、实现bind()方法

  1. Function.prototype.myBind = function (target) {
  2. var target = target || window;
  3. var _args1 = [].slice.call(arguments, 1);
  4. var self = this;
  5. var temp = function () {};
  6. var F = function () {
  7. var _args2 = [].slice.call(arguments, 0);
  8. var parasArr = _args1.concat(_args2);
  9. return self.apply(this instanceof temp ? this : target, parasArr)
  10. }
  11. temp.prototype = self.prototype;
  12. F.prototype = new temp();
  13. return F;
  14. }

37、实现call()方法

  1. Function.prototype.myCall = function () {
  2. var ctx = arguments[0] || window;
  3. ctx.fn = this;
  4. var args = [];
  5. for (var i = 1; i < arguments.length; i++) {
  6. args.push(arguments[i])
  7. }
  8. var result = ctx.fn(...args);
  9. delete ctx.fn;
  10. return result;
  11. }

38、实现apply()方法

  1. Function.prototype.myApply = function () {
  2. var ctx = arguments[0] || window;
  3. ctx.fn = this;
  4. if (!arguments[1]) {
  5. var result = ctx.fn();
  6. delete ctx.fn;
  7. return result;
  8. }
  9. var result = ctx.fn(...arguments[1]);
  10. delete ctx.fn;
  11. return result;
  12. }

39、防抖

  1. function debounce(handle, delay) {
  2. var timer = null;
  3. return function () {
  4. var _self = this,
  5. _args = arguments;
  6. clearTimeout(timer);
  7. timer = setTimeout(function () {
  8. handle.apply(_self, _args)
  9. }, delay)
  10. }
  11. }

40、节流

  1. function throttle(handler, wait) {
  2. var lastTime = 0;
  3. return function (e) {
  4. var nowTime = new Date().getTime();
  5. if (nowTime - lastTime > wait) {
  6. handler.apply(this, arguments);
  7. lastTime = nowTime;
  8. }
  9. }
  10. }

41、requestAnimFrame兼容性方法

  1. window.requestAnimFrame = (function () {
  2. return window.requestAnimationFrame ||
  3. window.webkitRequestAnimationFrame ||
  4. window.mozRequestAnimationFrame ||
  5. function (callback) {
  6. window.setTimeout(callback, 1000 / 60);
  7. };
  8. })();

42、cancelAnimFrame兼容性方法

  1. window.cancelAnimFrame = (function () {
  2. return window.cancelAnimationFrame ||
  3. window.webkitCancelAnimationFrame ||
  4. window.mozCancelAnimationFrame ||
  5. function (id) {
  6. window.clearTimeout(id);
  7. };
  8. })();

43、jsonp底层方法

  1. function jsonp(url, callback) {
  2. var oscript = document.createElement('script');
  3. if (oscript.readyState) { // ie8及以下版本
  4. oscript.onreadystatechange = function () {
  5. if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
  6. callback();
  7. }
  8. }
  9. } else {
  10. oscript.onload = function () {
  11. callback()
  12. };
  13. }
  14. oscript.src = url;
  15. document.body.appendChild(oscript);
  16. }

44、获取url上的参数

  1. function getUrlParam(sUrl, sKey) {
  2. var result = {};
  3. sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, function (ele, key, val) {
  4. if (!result[key]) {
  5. result[key] = val;
  6. } else {
  7. var temp = result[key];
  8. result[key] = [].concat(temp, val);
  9. }
  10. })
  11. if (!sKey) {
  12. return result;
  13. } else {
  14. return result[sKey] || '';
  15. }
  16. }

45、格式化时间

  1. function formatDate(t, str) {
  2. var obj = {
  3. yyyy: t.getFullYear(),
  4. yy: ("" + t.getFullYear()).slice(-2),
  5. M: t.getMonth() + 1,
  6. MM: ("0" + (t.getMonth() + 1)).slice(-2),
  7. d: t.getDate(),
  8. dd: ("0" + t.getDate()).slice(-2),
  9. H: t.getHours(),
  10. HH: ("0" + t.getHours()).slice(-2),
  11. h: t.getHours() % 12,
  12. hh: ("0" + t.getHours() % 12).slice(-2),
  13. m: t.getMinutes(),
  14. mm: ("0" + t.getMinutes()).slice(-2),
  15. s: t.getSeconds(),
  16. ss: ("0" + t.getSeconds()).slice(-2),
  17. w: ['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
  18. };
  19. return str.replace(/([a-z]+)/ig, function ($1) {
  20. return obj[$1]
  21. });
  22. }

46、验证邮箱的正则表达式

  1. function isAvailableEmail(sEmail) {
  2. var reg = /^([\w+\.])+@\w+([.]\w+)+$/
  3. return reg.test(sEmail)
  4. }

47、函数柯里化

  1. //是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术
  2. function curryIt(fn) {
  3. var length = fn.length,
  4. args = [];
  5. var result = function (arg) {
  6. args.push(arg);
  7. length--;
  8. if (length <= 0) {
  9. return fn.apply(this, args);
  10. } else {
  11. return result;
  12. }
  13. }
  14. return result;
  15. }

48、大数相加

  1. function sumBigNumber(a, b) {
  2. var res = '', //结果
  3. temp = 0; //按位加的结果及进位
  4. a = a.split('');
  5. b = b.split('');
  6. while (a.length || b.length || temp) {
  7. //~~按位非 1.类型转换,转换成数字 2.~~undefined==0
  8. temp += ~~a.pop() + ~~b.pop();
  9. res = (temp % 10) + res;
  10. temp = temp > 9;
  11. }
  12. return res.replace(/^0+/, '');
  13. }

49、单例模式

  1. function getSingle(func) {
  2. var result;
  3. return function () {
  4. if (!result) {
  5. result = new func(arguments);
  6. }
  7. return result;
  8. }
  9. }

发表评论

表情:
评论列表 (有 0 条评论,489人围观)

还没有评论,来说两句吧...

相关阅读