JavaScript封装方法

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

2、数组去重

3、字符串去重

4、深拷贝 浅拷贝

5、reverse底层原理和扩展

6、圣杯模式的继承

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

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

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

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

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

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

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

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

15、获得视口的尺寸

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

17、绑定事件的兼容代码

18、解绑事件

19、取消冒泡的兼容代码

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

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

22、兼容getElementsByClassName方法

23、运动函数

24、弹性运动

25、封装自己的forEach方法

26、封装自己的filter方法

27、数组map方法

28、数组every方法

29、数组reduce方法

30、获取url中的参数

31、数组排序

32、遍历Dom树

33、原生js封装ajax

34、异步加载script

35、cookie管理

36、实现bind()方法

37、实现call()方法

38、实现apply()方法

39、防抖

40、节流

41、requestAnimFrame兼容性方法

42、cancelAnimFrame兼容性方法

43、jsonp底层方法

44、获取url上的参数

45、格式化时间

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

47、函数颗粒化

48、大数相加

49、单例模式

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个兄弟节点

复制代码
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);

      }

      n--;

    } else {

        if (e.previousElementSibling) {

          e = e.previousElementSibling;

        } else {

          for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling);

        }

      n++;

    }

  }

  return e;

}
复制代码

 

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

复制代码
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、弹性运动

复制代码
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) <= 1 && Math.abs(a) <= 1) {

    console.log('over')
  
    clearInterval(obj.timer);

    obj.style.left = target + 'px';

  } else {

    obj.style.left = obj.offsetLeft + iSpeed + 'px';

    }

  }, 30);

}
复制代码

 

25、封装自己的forEach方法

复制代码
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中的参数

复制代码
function getWindonHref() {

  var sHref = window.location.href;

  var args = sHref.split('?');

  if (args[0] === sHref) {

    return '';

  }

  var hrefarr = args[1].split('#')[0].split('&');

  var obj = {};

  for (var i = 0; i < 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 = 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底层方法

复制代码
function jsonp(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 = url;

  document.body.appendChild(oscript);

}
复制代码

 

44、获取url上的参数

复制代码
function getUrlParam(sUrl, sKey) {

  var result = {};

  sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, function (ele, key, val) {

    if (!result[key]) {

      result[key] = val;

    } else {

      var temp = result[key];

      result[key] = [].concat(temp, val);

    }

  })

  if (!sKey) {

    return result;
  
  } else {

    return result[sKey] || '';

  }

}
复制代码

 

45、格式化时间

复制代码
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 curryIt(fn) {

  var length = fn.length,

  args = [];

  var result = function (arg) {

    args.push(arg);

    length--;

    if (length <= 0) {

      return fn.apply(this, args);

    } else {

      return result;

    }

  }

  return result;

}
复制代码

 

48、大数相加

复制代码
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;

  }

}
复制代码

 

posted @   偷熊计划  阅读(204)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示