工具封装

对象深拷贝

  1. //ES5写法
  2. //循环对象之前需要检测对象里面的属性值是否是引用值
  3. //当发现有引用值的时候需要遍历
  4. //不仅判断键值对是否含有引用值，还得判断是对象还是数组
  5. //利用递归克隆函数进行再次循环
  6. function deepClone(origin, target) {
  7.   //万一用户不传target参数，自己默认创建空对象
  8.   var target = target || {},
  9.     toStr = Object.prototype.toString,
  10.     arrType = '[object Array]';
  12.   for (var key in origin) {
  13.     //排除原型上的属性
  14.     if (origin.hasOwnProperty(key)) {
  15.       //判断是否为引用值 同时排除null
  16.       if (typeof (origin[key]) === 'object' && origin[key] !== null) {
  18.         //判断引用值是否为数组类型
  19.         if (toStr.call(origin[key]) === arrType) {
  20.           //创建空数组
  21.           target[key] = [];
  22.         } else {
  23.           //引用值是对象
  24.           //创建空对象
  25.           target[key] = {};
  26.         }
  28.         //递归，再次遍历
  29.         deepClone(origin[key], target[key]);
  31.       } else {
  32.         //这里是递归的出口
  33.         //遍历第一层 浅拷贝
  34.         target[key] = origin[key];
  35.       }
  36.     }
  37.   }
  38.   return target;
  39. }
  40. // // var person2 = deepClone(person1);
  1. //ES6 - weekmap写法
  2. //ES6 WeekMap实现对象深克隆
  3. //Map 键名为任意类型
  4. //WeekMap 键名只能为对象
  6. //本质区别
  7. //WeekMap为弱引用，会被垃圾回收，存在意义是希望键名的对象被回收时，键值也被回收掉
  8. //而函数移除需要赋值为null才能被垃圾回收
  10. //原理: 对象被拷贝过的，再拷贝就会死循环，利用weekmap记录一下是否被拷贝过
  12. var oldObj = {
  13.   a: 1,
  14.   b: 2,
  15.   c: {
  16.     e: 3,
  17.     f: 4
  18.   },
  19.   d: ['5', '6', '7']
  20. }
  22. /**
  23.  * 深拷贝对象
  24.  * @param {*} origin 旧的数据
  25.  * @hashMap 记录过的weakmap类型数据,唯一hash值，弱引用值是键名
  26.  */
  27. function deepClone(origin, hashMap = new WeakMap()) {
  28.   //排除null undefined
  29.   //排除原始值
  30.   //null == undefined => true
  31.   //null === undefined => false
  32.   if (origin == undefined || typeof origin !== 'object') {
  33.     //不做处理返回对象本身
  34.     return origin;
  35.   }
  37.   //Date RegExp 
  38.   if (origin instanceof Date) {
  39.     return new Date(origin);
  40.   }
  41.   if (origin instanceof RegExp) {
  42.     return new RegExp(origin);
  43.   }
  45.   //找到对象键名里面值
  46.   const hashKey = hashMap.get(origin);
  47.   //判断是否存在
  48.   if (hashKey) {
  49.     //返回本身不做处理
  50.     return hashKey;
  51.   }
  53.   //通过对象的构造器new一个新的实例对象
  54.   //此方式数组也适用
  55.   const target = new origin.constructor();
  57.   //记录保存一下是否有过深拷贝
  58.   //如果之前拷贝过了就不会再次拷贝
  59.   hashMap.set(origin, target);
  61.   //{} []
  62.   for (let k in origin) {
  63.     //如果对象里包含本身的属性则拷贝
  64.     if (origin.hasOwnProperty(k)) {
  65.       //将原来的对象复制到新的对象
  66.       //如果原来对象里面的属性也有对象，则递归复制
  67.       target[k] = deepClone(origin[k], hashMap);
  68.     }
  69.   }
  70.   return target;
  71. }
  73. console.log(oldObj);
  74. //{a: 1, b: 2, c: {e: 3, f: 4}, d: ["5", "6", "7"]}
  75. const newObj = deepClone(oldObj);
  76. newObj.c.g = 5;
  77. newObj.d[3] = '8';
  78. console.log(newObj);
  79. //{a: 1, b: 2, c: {e: 3, f: 4, g: 5}, d: ["5", "6", "7", "8"]}

类型查找

  1. //封装myTypeof()
  2. function myTypeof(val) {
  3.   var type = typeof (val),
  4.     toStr = Object.prototype.toString,
  5.     res = {
  6.       '[object Array]': 'array',
  7.       '[object Object]': 'object',
  8.       '[object Number]': 'object number',
  9.       '[object String]': 'object string',
  10.       '[object Boolean]': 'object boolean'
  11.     }
  12.   if (val === null){
  13.     return 'null';
  14.     //object: null {} []
  15.     //这里返回包括包装类Number, String, Boolean
  16.   } else if (type === 'object') {
  17.     var ret = toStr.call(val);
  18.     return res[ret];
  19.     //返回原始值
  20.     //
  21.   } else {
  22.     return type;
  23.   }
  24. }

滚动距离

  1. /**
  2.  * 封装兼容IE8&IE9以下的滚动条距离函数
  3.  * @返回值 返回左/上滚动距离
  4.  * 找到滚动距离
  5.  * getScrollOffset()
  6.  */
  8. function getScrollOffset() {
  9.   if (window.pageXOffset) {
  10.     return {
  11.       left: window.pageXOffset,
  12.       top: window.pageYOffset
  13.     }
  14.   } else {
  15.     return {
  16.       left: document.body.scrollLeft + document.documentElement.scrollLeft,
  17.       top: document.body.scrollTop + document.documentElement.scrollTop
  18.     }
  19.   }
  20. }
  22. getScrollOffset().top;

可视区域

  1. /**
  2.  * 封装兼容IE8&IE9以下的可视区域宽高尺寸的函数
  3.  * 获取可视窗口宽度/高度
  4.  * 原理：判断模式是否为怪异
  5.  */
  7. function getViewportSize() {
  8.   if (window.innerWidth) {
  9.     return {
  10.       width: window.innerWidth,
  11.       height: window.innerHeight
  12.     }
  13.   } else {
  14.     if (document.compatMode === 'BackCompat') {
  15.       return {
  16.         width: document.body.clientWidth,
  17.         height: document.body.clientHeight
  18.       }
  19.     } else {
  20.       return {
  21.         width: document.documentElement.clientWidth,
  22.         height: document.documentElement.clientHeight
  23.       }
  24.     }
  25.   }
  26. }
  28. getViewportSize().width

滚动长度

  1. /**
  2.  * 封装兼容IE8&IE9以下的滚动尺寸的函数
  3.  * 获取整个文档的宽度/高度
  4.  */
  6. function getScrollSize() {
  7.   if (document.body.scrollWidth) {
  8.     return {
  9.       width: document.body.scrollWidth,
  10.       height: document.body.scrollHeight
  11.     }
  12.   } else {
  13.     return {
  14.       width: document.documentElement.scrollWidth,
  15.       height: document.documentElement.scrollHeight
  16.     }
  17.   }
  18. }
  20. getScrollSize().width

查看盒子到页面边缘的距离

  1. /**
  2.  * 封装合并子盒子与父盒子到左侧/上侧 到 页面左侧/上侧的 距离
  3.  */
  5. function getElemDocPosition(el) {
  6.   //找到有定位的父级盒子
  7.   var parent = el.offsetParent,
  8.     //找到当前盒子左侧/上侧到页面左侧/上侧的距离
  9.     offsetLeft = el.offsetLeft,
  10.     offsetTop = el.offsetTop;
  12.   // 如果parent存在
  13.   while (parent) {
  14.     // 循环出来的parent是定位元素
  15.     offsetLeft += parent.offsetLeft;
  16.     offsetTop += parent.offsetTop;
  17.     //重新赋值parent，找到外层盒子继续加
  18.     parent = parent.offsetParent;
  19.   }
  21.   return {
  22.     left: offsetLeft,
  23.     top: offsetTop
  24.   }
  25. }
  27. getElemDocPosition(son);
  28. //{left: 230, top: 230}

鼠标坐标

  1. /**
  2.  * 封装页面坐标函数pagePos()
  3.  * @e 元素
  4.  * @返回值 页面内的x/y坐标
  5.  */
  7. function pagePos(e) {
  8.   //获取滚动条距离
  9.   //使用获取滚动条距离函数
  10.   var sLeft = getScrollOffset().left,
  11.     sTop = getScrollOffset().top,
  12.     //获取文档偏移
  13.     //documentElement.clientLeft IE8及以下不存在(undefined)
  14.     cLeft = document.documentElement.clientLeft || 0,
  15.     cTop = document.documentElement.clientTop || 0;
  17.   return {
  18.     //可视区域坐标 + 滚动条距离 - 偏移距离
  19.     X: e.clientX + sLeft - cLeft,
  20.     Y: e.clientY + sTop - cTop
  21.   }
  22. }

鼠标拖拽

  1. /**
  2.  * 封装拖拽函数
  3.  */
  5. function elemDrag(elem) {
  6.   var x, y;
  8.   //鼠标按下时
  9.   addEventListener(elem, "mousedown", function (e) {
  10.     var e = e || window.event;
  11.     //pagePos()找到鼠标点击的坐标
  12.     //getStyles()找到目标元素左上顶点到浏览器窗口边缘的left/top值
  13.     x = pagePos(e).X - getStyles(elem, "left");
  14.     y = pagePos(e).Y - getStyles(elem, "top");
  16.     addEventListener(document, "mouseMove", mousemove);
  17.     addEventListener(document, "mouseUp", mouseup);
  18.     cancelBubble(e);
  19.     preventDefaultEvent(e);
  20.   });
  22.   //鼠标移动时
  23.   function mouseMove(e) {
  24.     var e = e || window.event;
  25.     //鼠標移動后有新的pagePos().X/Y值
  26.     //雖然鼠標位置變了，但是計算后的x/y值是不變的
  27.     //新的pagePos().X/Y值 - x/y = 新目標元素到瀏覽器邊緣的距離 
  28.     elem.style.top = pagePos(e).Y - y + "px";
  29.     elem.style.left = pagePos(e).X - x + "px";
  30.   }
  32.   //鼠标抬起时释放绑定的事件
  33.   function mouseUp(e) {
  34.     var e = e || window.event;
  35.     removeEvent(document, "mousemove", mouseMove);
  36.     removeEvent(document, "mouseup", mouseUp);
  37.   }
  38. }

元素属性

  1. /**
  2.  * 获取元素属性
  3.  * @elem 元素
  4.  * @prop 属性
  5.  * @返回值 返回指定元素的属性值
  6.  */
  8. function getStyles(elem, prop) {
  9.   //检测getComputedStyle是否存在
  10.   if (window.getComputedStyle) {
  11.     //存在，打印具体属性值
  12.     if (prop) {
  13.       return parseInt(window.getComputedStyle(elem, null)[prop]);
  14.     }
  15.     //不存在，打印集合
  16.     return window.getComputedStyle(elem, null);
  17.   } else {
  18.     if (prop) {
  19.       return parseInt(elem.currentStyle[prop]);
  20.     } else {
  21.       return elem.currentStyle;
  22.     }
  23.   }
  24. }
  26. getStyles(div);
  27. getStyles(div, 'height'); //200px

事件函数

  1. /**
  2.  * 封装兼容低版本的事件绑定处理函数
  3.  * @el 元素
  4.  * @type 事件类型
  5.  * @fn 事件处理函数
  6.  */
  7. function addEvent(el, type, fn) {
  8.   if (el.addEventListener) {
  9.     el.addEventListener(type, fn, false);
  10.   } else if (el.attachEvent) {
  11.     el.attachEvent('on' + type, function () {
  12.       fn.call(el);
  13.     })
  14.   } else {
  15.     el['on' + type] = fn;
  16.   }
  17. }

移除事件

  1. /**
  2.  * 解除事件处理函数
  3.  * @el 元素
  4.  * @type 事件类型
  5.  * @fn 事件处理函数
  6.  */
  8. function removeEvent(elem, type, fn) {
  9.   if (elem.addEventListener) {
  10.     elem.removeEventListener(type, fn, false);
  11.   } else if (elem.attachEvent) {
  12.     elem.detachEvent('on' + type, fn);
  13.   } else {
  14.     elem['on' + 'type'] = null;
  15.   }
  16. }

找子元素

  1. //找子元素函数
  2. function elemChildren(node) {
  3.   var temp = {
  4.     'length': 0,
  5.     'push': Array.prototype.push,
  6.     'splice': Array.prototype.splice
  7.   };
  9.   var children = node.childNodes,
  10.     len = children.length,
  11.     item;
  13.   for (var i = 0; i < len; i++) {
  14.     item = children[i];
  15.     if (item.nodeType === 1) {
  16.       temp.push(item);
  17.     }
  18.   }
  19.   return temp;
  20. }

找父元素

  1.   /**
  2.    * 封装找父级元素的函数
  3.    * @node 子元素节点
  4.    * @n 寻找第几个父级元素
  5.    * @返回值 返回父级元素
  6.    */
  7.   function elemParent(node, n) {
  8.     var type = typeof (n);
  10.     if (type === 'undefined') {
  11.       return node.parentNode;
  12.     } else if (n <= 0 || type !== 'number') {
  13.       return undefined;
  14.     }
  16.     while (n) {
  17.       node = node.parentNode;
  18.       n--;
  19.     }
  20.     return node;
  21.   }

取消冒泡

  1. /**
  2.  * 兼容性写法封装：
  3.  * 封装取消冒泡方法
  4.  */
  6. function cancelBubble(e) {
  7.   var e = e || window.event;
  8.   if (e.stopPropagation) {
  9.     e.stopPropagation();
  10.   } else {
  11.     e.cancelBubble = true;
  12.   }
  13. }
  1. /**
  2.  * 兼容性写法封装：
  3.  * 封装取消冒泡方法
  4.  */
  6.  function preventDefaultEvent(e) {
  7.   var e = e || window.event;
  8.   if (e.preventDefault) {
  9.     event.preventDefault();
  10.   } else {
  11.     event.returnValue = false;
  12.   }
  13. }

文档解析

封装文档解析完毕函数

  1. function domReady(fn) {
  2.   if (document.addEventListener) {
  3.     document.addEventListener('DOMContentLoaded', function () {
  4.       //释放内容
  5.       document.removeEventListener('DOMContentLoaded', arguments.callee, false);
  6.       fn();
  7.     }, false);
  8.     //兼容IE
  9.   } else if (document.attachEvent) {
  10.     document.attachEvent('onreadystatechange', function () {
  11.       //文档加载完成
  12.       if (this.readyState === 'complete') {
  13.         document.attachEvent('onreadystatechange', arguments.callee);
  14.         fn();
  15.       }
  16.     })
  17.   }
  18.   //doScroll可以操作滚动条
  19.   //如果文档没有解析完渲染完会报错
  20.   if (document.documentElement.doScroll && typeof (window.frameElement) === 'undefined') {
  21.     try {
  22.       document.documentElement.doScroll('left');
  24.     } catch (e) {
  25.       return setTimeout(arguments.callee, 20);
  26.     }
  27.     fn();
  28.   }
  29. }
  30. domReady(fn);

行为预测

判断是否在三角区域

  1. /**
  2.  * 行为预测技术：
  3.  * 判断是否在三角区域
  4.  */
  6. //判断点是否在一个三角形内
  7. function vec(a, b) {
  8.   return {
  9.     x: b.x - a.x,
  10.     y: b.y - a.y
  11.   }
  12. }
  14. function vecProduct(v1, v2) {
  15.   return v1.x * v2.y - v2.x * v1.y;
  16. }
  18. function sameSymbols(a, b) {
  19.   return (a ^ b) >= 0;
  20. }
  22. function pointInTriangle(p, a, b, c) {
  23.   var PA = vec(p, a),
  24.     PB = vec(p, b),
  25.     PC = vec(p, c),
  26.     R1 = vecProduct(PA, PB),
  27.     R2 = vecProduct(PB, PC),
  28.     R3 = vecProduct(PC, PA);
  30.   return sameSymbols(R1, R2) && sameSymbols(R2, R3);
  31. }

模板替换

  1. // 正则规则
  2. function regTpl() {
  3.   // gim 全局大小写不敏感多行
  4.   return new RegExp(/{{(.*?)}}/, 'gim');
  5. }
  7. /**
  8.  * 字符串替换
  9.  * @tpl 模板
  10.  * @regExp 匹配规则
  11.  * @opt 一个对象保存被传的key值
  12.  * 
  13.  * 函数是匹配规则：关键点根据正则匹配{{}}里的某一个key值
  14.  * @node 关键点 如 {{career}} 
  15.  * @key 就是opt对象里面的属性值
  16.  */
  17. function setTplToHTML(tpl, regExp, opt) {
  18.   // ''.replace(替换目标, 替换值)
  19.   // ''.replace(正则表达式, 函数(node,key){})
  20.   return tpl.replace(regExp(), function (node, key) {
  21.     //return被替换的key值
  22.     return opt[key];
  23.   });
  24. }
  26. //调用写法：
  27. list += setTplToHTML(tpl, regTpl, {
  28.   career: item.career,
  29.   city: item.city,
  30.   salary: item.salary,
  31.   img: item.img
  32. });

AJAX

  1. /**
  2.  * AJAX封装
  3.  * 
  4.  * 调用写法一：
  5.  * $.ajax({
  6.  *   url: 'xxx',
  7.  *   type: 'POST',
  8.  *   dataType: 'JSON',
  9.  *   data: {
  10.  *     status: 1
  11.  *   },
  12.  *   success: function (data) {
  13.  *     console.log(data);
  14.  *   }
  15.  * })
  16.  * 
  17.  * 调用写法二：
  18.  * $.post('http://localhost/xxx', { status: 1 }, function (data) { console.log(data); });
  19.  * 
  20.  * 调用写法三：
  21.  * $.get('http://localhost/xxx?status=1', function (data) { console.log(data); });
  22.  * 
  23.  * 
  24.  */
  26. //老写法：
  27. // var $ = {
  28. //   ajax: function (opt) {
  29. //     var url = opt.url;
  30. //     console.log(url);
  31. //   },
  32. //   post: function () {
  33. //     console.log('post');
  34. //   },
  35. //   get: function () {
  36. //     console.log('get');
  37. //   }
  38. // }
  40. // 模块化写法
  41. var $ = (function () {
  42.   //利用_doAjax函数传参拿到局部作用域ajax函数里的形参
  43.   function _doAjax(opt) {
  44.     //兼容IE5,IE6
  45.     var o = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  47.     //IE4及以下
  48.     if (!o) {
  49.       throw new Error('您的浏览器不支持异步发起HTTP请求');
  50.     }
  52.     //初始化传入的配置
  53.     var opt = opt || {},
  54.       // console.log(opt); //{type: "POST"}
  55.       //初始化请求类型为GET
  56.       type = (opt.type || 'GET').toUpperCase(),
  57.       // console.log(type); //POST
  58.       // 同步/异步 false/true
  59.       async = '' + opt.async === 'false' ? false : true,
  60.         url = opt.url,
  61.         //如果GET请求就为null
  62.         data = opt.data || null,
  63.         //响应数据
  64.         dataType = opt.dataType || 'JSON',
  65.         //后端定义的cb或callback字符串
  66.         jsonp = opt.jsonp || 'cb',
  67.         //定义的函数名称方便给后端匹配
  68.         jsonpCallback = opt.jsonpCallback || 'jQuery' + randomNum() + '_' + new Date().getTime(),
  69.         timeout = opt.timeout || 30000,
  70.         error = opt.error || function () {},
  71.         success = opt.success || function () {},
  72.         //不管成功或失败都执行complete函数
  73.         complete = opt.complete || function () {},
  75.         // 初始化定时器
  76.         t = null;
  78.     if (!url) {
  79.       throw new Error('您没有填写url');
  80.     }
  82.     if (dataType.toUpperCase === 'JSONP' && type !== 'GET') {
  83.       throw new Error('如果dataType为JSONP,请您将type设置为GET');
  84.     }
  86.     //格式: xxx.domain.com/xxx.php?jsonp=jsonpCallback
  87.     //情况1:xxx.domain.com/xxx.php?cb=test
  88.     //情况2:xxx.domain.com/xxx.php?wd=xxx&cb=test
  89.     if (dataType.toUpperCase() === 'JSONP') {
  90.       var oScript = document.createElement('script');
  91.       oScript.src = url.indexOF('?') === -1 ?
  92.         //情况1:如果没有? 则加?
  93.         url + '?' + jsonp + '=' + jsonpCallback :
  94.         //情况2:如果有? 证明多参数情况下加 & 隔开
  95.         url + '&' + jsonp + '=' + jsonpCallback;
  96.       document.body.appendChild(oScript);
  97.       document.body.removeChild(oScript);
  99.       //定义函数并挂载到window
  100.       window[jsonpCallback] = function (data) {
  101.         //关联ajax里的success函数,执行success函数
  102.         success(data);
  103.       }
  104.       //阻止ajax向下执行
  105.       return;
  106.     }
  108.     /**发送HTTP请求
  109.      * @type 请求类型
  110.      * @url 请求地址
  111.      * @async 异步/同步
  112.      */
  113.     o.open(type, url, async);
  115.     //超时设置 写法一： 设置超时时间 30s 
  116.     //兼容性不太好
  117.     // o.ontimeout = 30000;
  119.     //设置POST请求头
  120.     //如果为真走后面
  121.     type === 'POST' && o.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  123.     //如果是GET请求，不用传参数
  124.     o.send(type === 'GET' ? null : formatDatas(data));
  126.     //监听响应事件
  127.     o.onreadystatechange = function () {
  128.       if (o.readyState === 4) {
  129.         //请求已完成，且响应已就绪
  130.         if (o.status >= 200 && o.status < 300 && o.status === 304) {
  131.           switch (dataType.toUpperCase()) {
  132.             case 'JSON':
  133.               // 成功时响应服务器JSON数据
  134.               success(JSON.parse(o.responseText));
  135.               break;
  136.             case 'TEXT':
  137.               // 成功时响应服务器文本数据
  138.               success(o.responseText);
  139.               break;
  140.             case 'XML':
  141.               // 成功时响应服务器XML数据
  142.               success(o.responseXML);
  143.               break;
  144.             default:
  145.               // 默认响应服务器JSON数据
  146.               success(JSON.parse(o.responseText));
  147.           }
  148.         } else {
  149.           error();
  150.         }
  151.         // 无论成功与否都要执行complete函数
  152.         complete();
  153.         clearTimeout(t);
  154.         t = null;
  155.         o = null;
  156.       }
  157.     }
  159.     // 超时设置 写法一：
  160.     //只要超时就会执行的函数
  161.     //兼容性不太好
  162.     // o.ontimeout = function () {
  163.     //   //o对象的所有程序都会中止
  164.     //   o.abort();
  165.     //   //并销毁对象
  166.     //   o = null;
  167.     // }
  169.     // 超时设置 写法二：
  170.     t = setTimeout(function () {
  171.       //o对象的所有程序都会中止
  172.       o.abort();
  173.       clearTimeout(t);
  174.       t = null;
  175.       o = null;
  176.       //抛出错误
  177.       throw new Error('This request has been timeout for' + url);
  178.     }, timeout);
  179.   }
  181.   //希望将{status:1,flag:2}转为'status=1&flag=2'
  182.   //格式化传入的data数据
  183.   function formatDatas(obj) {
  184.     var str = '';
  185.     for (var key in obj) {
  186.       str += key + '=' + obj[key] + '&';
  187.     }
  188.     //去掉最后一项的 &
  189.     //正则规则：以&结尾 替换为空字符
  190.     return str.replace(/&$/, '');
  191.   }
  193.   return {
  194.     ajax: function (opt) {
  195.       _doAjax(opt);
  196.     },
  197.     get: function (url, dataType, successCB, errorCB, completeCB) {
  198.       _doAjax({
  199.         type: 'GET',
  200.         url: url,
  201.         dataType: dataType,
  202.         success: successCB,
  203.         error: errorCB,
  204.         complete: completeCB
  205.       });
  206.     },
  207.     post: function (url, data, dataType, successCB, errorCB, completeCB) {
  208.       _doAjax({
  209.         type: 'POST',
  210.         url: url,
  211.         data: data,
  212.         dataType: dataType,
  213.         success: successCB,
  214.         error: errorCB,
  215.         complete: completeCB
  216.       });
  217.     }
  218.   }
  219. })();
  221. //随机生成
  222. function randomNum() {
  223.   var num = '';
  224.   for (var i = 0; i < 20; i++) {
  225.     num += Math.floor(Math.random() * 10);
  226.   }
  227.   return num;
  228. }

替换空格

  1. function trimSpace(str) {
  2.   return str.replace(/\s+/gim, '');
  3. }

事件源

  1. /**
  2.  * 封装 获取target 函数 并兼容IE
  3.  * @param {*} e 事件对象
  4.  * @param {*} mark 标识 判断是tagName 还是 className
  5.  * @返回值 一个对象包含tar和mark
  6.  */
  7. function getTarget(e, mark) {
  8.   var e = e || window.event,
  9.     tar = e.target || e.srcElement;
  11.   mark = mark == 'className' ? tar.className : tar.tagName.toLowerCase();
  13.   return {
  14.     tar: tar,
  15.     mark: mark
  16.   }
  17. }

获取节点

  1. /**
  2.  * 封装获取元素节点函数(类似jquery)
  3.  * 执行语句写法：
  4.  * $get('.box')[0]
  5.  * $get('#box')
  6.  * $get('div')[2]
  7. */
  8. function $get(target) {
  9.   //找到第一个字符
  10.   var _s = target.charAt(0),
  11.     rTarget = target.replace(_s, '');
  13.   switch (_s) {
  14.     case '#':
  15.       //id
  16.       return document.getElementById(rTarget);
  17.       break;
  18.     case '.':
  19.       //class
  20.       return document.getElementsByClassName(rTarget);
  21.       break;
  22.     default:
  23.       return document.getElementsByTagName(target);
  24.   }
  25. }

异步加载

写法一

  1. //阻塞onload执行
  2. //异步加载
  3. (function () {
  4.   //阻塞onload执行
  5.   function async_load() {
  6.     var s = document.createElement("script");
  7.     s.type = "text/javascript";
  8.     s.async = true;
  9.     s.src = "utils.js";
  10.     oScript.parentNode.insertBefore(s, oScript);
  12.     //执行
  13.     document.body.appendChild(s);
  14.   }
  16.   if (window.attachEvent) {
  17.     window.attachEvent("onload", async_load);
  18.   } else {
  19.     window.addEventListener("load", async_load, false);
  20.   }
  21. })();

写法二

  1. // 通过readyState事件判断 -> onreadystatechange输出的值判断页面是否加载完毕 -> IE
  2. function exec_util_with_loading_script(url, fn) {
  3.   //异步加载
  4.   var s = document.createElement('script'),
  5.     oScript = document.getElementsByTagName('script')[0];
  6.   s.type = 'text/javascript';
  8.   //如果存在，则为IE浏览器
  9.   //readyState为标签返回的状态码
  10.   if (s.readyState) {
  11.     s.onreadychange = function () {
  12.       var state = s.readyState;
  13.       //onload会一直监听页面加载是否完毕
  14.       if (state === 'complete' || state === 'loaded') {
  15.         utils[fn]();
  16.       }
  17.     }
  18.   } else {
  19.     s.onload = function () {
  20.       utils[fn]();
  21.     }
  22.   }
  23.   //readyState需要在资源加载完毕后才执行
  24.   s.src = url;
  25.   oScript.parentNode.insertBefore(s, oScript);
  26. }
  28. //调用
  29. exec_util_with_loading_script('utils.js', 'test')

时间日期

  1. /**
  2.  * 格式化时间日期
  3.  * JavaScript时间单位带毫秒
  4.  * PHP时间不带毫秒
  5.  * @ts 时间戳 如1548744604
  6.  * @type 日期格式 如日期/时间/日期+时间
  7.  */
  8. function getDateTime(ts, type) {
  9.   // 转为字符串才有length属性
  10.   var len = ts.toString().length;
  12.   //证明是php以秒为单位的格式,需要转为JS单位
  13.   if (len === 10) {
  14.     ts = ts * 1000;
  15.   }
  17.   //获取年月日时分秒
  18.   var dt = new Date(ts),
  19.     y = dt.getFullYear(),
  20.     //注意：month从0开始
  21.     m = addZero(dt.getMonth() + 1),
  22.     d = addZero(dt.getDate()),
  23.     h = addZero(dt.getHours()),
  24.     i = addZero(dt.getMinutes()),
  25.     s = addZero(dt.getSeconds());
  27.   switch (type) {
  28.     case 'date':
  29.       return y + '-' + m + '-' + d;
  30.       break;
  31.     case 'time':
  32.       return h + ':' + i + ':' + s;
  33.       break;
  34.     case 'dateTime':
  35.       return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
  36.       break;
  37.     default:
  38.       return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
  39.   }
  41.   //把一位数字补齐为两位 格式为 1 -> 01
  42.   function addZero(num) {
  43.     return num < 10 ? ('0' + num) : num;
  44.   }
  45. }

cookie

  1. /**
  2.  * 封装cookie增删改查的函数
  3.  */
  4. var manageCookies = {
  5.   /**
  6.    * 设置cookie属性及时间
  7.    * 例如：document.cookie = 'name=xiaohong;max-age=1000'
  8.    * 注意：只能逐条设置
  9.    * @param {*} key 属性名
  10.    * @param {*} value 属性值
  11.    * @param {*} expTime 过期时间
  12.    * @returns 
  13.    */
  14.   set: function (key, value, expTime) {
  15.     document.cookie = key + '=' + value + ';max-age=' + expTime;
  16.     //实现链式调用
  17.     return this;
  18.   },
  20.   /**
  21.    * 删除cookie属性
  22.    * 例如: document.cookie = 'name=xiaohong;max-age=-1'
  23.    * @param {*} key 被删的属性
  24.    */
  25.   delete: function (key) {
  26.     return this.set(key, '', -1);
  27.   },
  29.   /**
  30.    * 查询cookie属性
  31.    * 例如：document.cookie => 'hobby=basketball;sex=male;age=20'
  32.    * 使用：get('hobby', function(data){console.log(data)})
  33.    * @param {*} key 
  34.    * @param {*} cb 
  35.    * @returns 
  36.    */
  37.   get: function (key, cb) {
  38.     //将拿到的字符串用冒号分割成为数组
  39.     //'hobby=basketball;sex=male;age=20'
  40.     // => ['hobby=basketball','sex=male','age=20']
  41.     var CookiesArray = document.cookie.split('; ');
  43.     for (var i = 0; i < CookiesArray.length; i++) {
  44.       var CookieItem = CookiesArray[i];
  45.       //循环每一项并用等号分割
  46.       //['hobby','basketball']
  47.       //['sex','male']
  48.       //['age','20']
  49.       var CookieItemArray = CookieItem.split('=');
  51.       if (CookieItemArray[0] == key) {
  52.         cb(CookieItemArray[1]);
  53.         return this;
  54.       }
  55.     }
  56.     //如果没有cookie里面的属性报undefined
  57.     cb(undefined);
  58.     return this;
  59.   }
  60. }

请求数据

在项目中多个API请求时统一管理

  1. //api > request.js
  2. //封装get请求函数
  3. const ERR_OK = 200;
  5. //柯里化的形式固定第一个参数
  6. //http://localhost:8080/area/info?name=广州市
  7. function getData(url) {
  8.   return function (params) {
  9.     return axios.get(url, params)
  10.       .then(res => {
  11.         const {
  12.           status,
  13.           data
  14.         } = res;
  16.         if (status === ERR_OK) {
  17.           return data;
  18.         }
  19.       })
  20.       .catch(e => {});
  21.   }
  22. }
  24. export {
  25.   getData
  26. }
  1. //api > index.js
  2. import {
  3.   get
  4. } from './request';
  6. //它接收一个函数
  7. const getCityInfo = get('/area/info');
  9. export {
  10.   getCityInfo
  11. }

url参数获取

获取url地址参数并返回一个对象参数

  1. //获取url地址参数
  2. function getUrlQueryParams(queryStr) {
  3.   var result = {};
  5.   //'?name=广州市&area=tianhe'
  6.   //[?&]指的是以 ? 或 & 开头
  7.   //[]指的是 一串非 ? 和 & 的字符 一个或多个
  8.   // =
  9.   var reg = /[?&][^?&]+=[^?&]+/g,
  10.     found = queryStr.match(reg),
  11.     tem,
  12.     key,
  13.     value;
  15.   //['?name=广州市', '&area=tianhe']
  16.   //有匹配结果时
  17.   if (found) {
  18.     found.forEach((item) => {
  19.       //去除第一个字符 ? 或 &
  20.       //以 = 隔开 拿到隔开后的数组 ['name', '广州市']
  21.       tem = item.substring(1).split('=');
  22.       key = tem[0];
  23.       value = tem[1];
  24.       result[key] = value;
  25.     });
  26.   }
  28.   // console.log(result);
  29.   //{name: '广州市', area: 'tianhe'}
  30.   return result;
  31. }