js 工具函数

Darkgel 发布于2019-08-26 11:49 / 2478人阅读

摘要：获取中传参的值判断变量的数据类型深度克隆对象或数组多个对象或数组嵌套节流函数生成随机字符串判断对象是否为空判断是否有该改增加生成随机整数打乱数组顺序，洗牌算法深拷贝数组判断是否为纯粹的对象，由或者创建的不是挂在原型上的没有原型对象的对象通

1. 获取url中传参的值

function getParam (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r=window.location.search.substr(1).replace(new RegExp(/(amp;)/g),"").match(reg);
    if (r != null) {
        return r[2];
    }
    return null;
};

2. 判断变量的数据类型

function typeOf(obj) {
    const toString = Object.prototype.toString;
    const map = {
    "[object Boolean]"  : "boolean",
    "[object Number]"   : "number",
    "[object String]"   : "string",
    "[object Function]" : "function",
    "[object Array]"    : "array",
    "[object Date]"     : "date",
    "[object RegExp]"   : "regExp",
    "[object Undefined]": "undefined",
    "[object Null]"     : "null",
    "[object Object]"   : "object"
    };
    return map[toString.call(obj)];
},

3. 深度克隆对象或数组,多个对象或数组嵌套

      deepCopy(data) {
        const t = this.typeOf(data);
        let o;

        if (t === "array") {
          o = [];
        } else if ( t === "object") {
          o = {};
        } else {
          return data;
        }

        if (t === "array") {
          for (let i = 0; i < data.length; i++) {
            o.push(this.deepCopy(data[i]));
          }
        } else if ( t === "object") {
          for (let i in data) {
            o[i] = this.deepCopy(data[i]);
          }
        }
        return o;
      },

4. 节流函数

debounce(func, delay) {

    let timer;

    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }

    timer = window.setTimeout(() => {
        func.apply(this, args);
    }, delay);
    }

},

5. 生成随机字符串

function randomStr (len) {
  len = len || 32;
  var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  var maxPos = chars.length;
  var pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
};

6. 判断对象是否为空

function isEmptyObject (obj) {
    var name;
    for (name in obj) {
        return false;
    }

    return true;
},

7. 判断是否有该class

export function hasClass(el, className){
    let reg = new RegExp("(^|S)"+className+"(s|$)");
    return reg.test(el.className);
}

8. 改dom增加class

export function addClass(el, className){

    if(hasClass(el, className)){
        return;
    }

    let newClass=el.className.split(" ");
    newClass.push(className);
    el.className=newClass.join(" ");
}

9. 生成随机整数

function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max - min + 1) + min);

}

10. 打乱数组顺序，洗牌算法

function shuffle(arr) {

    let _arr = arr.slice();        //深拷贝数组
    for (let i = 0; i<_arr.length; i++) {
        let j = getRandomInt(0, i);
        let t = _arr[i];
        _arr[i] = _arr[j];
        _arr[j] = t;
    }

    return _arr;

}

11. 判断是否为纯粹的对象，由 new Object 或者 {} 创建的

    function isPlainObject ( obj ) {
        var proto, Ctor;
        var toString = Object.prototype.toString;
        var getProto = Object.getPrototypeOf;  // 不是挂在原型上的
        var hasOwn = Object.prototype.hasOwnProperty;
        var fnToString = hasOwn.toString;
        var ObjectFunctionString = fnToString.call(Object);
        
        if ( !obj || toString.call( obj ) !== "[object Object]" ) {
            return false;
        }

        proto = getProto( obj );
        
        // 没有原型对象的对象 (`Object.create( null )`)
        if ( !proto ) {
            return true;
        }
        
        // 通过 new Object 出来的对象
        Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
        return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
    }

12. 移动端多次点击事件

var times = 0; // 记录点击次数
var timer;
const CLICK_TIME = 5；  // 比如连续点击5此就触发
document.body.onclick = function () {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    if (times >= CLICK_TIME) {
        // do something
    }
    times++;
   timer = setTimeout(function () {
        times = 0;
   }, 200)
}

---

const REWARD_TICKET = 100
function getRandomArray(count) {
  let arr = [];
  let remainTicket = 0;
  for (let i = 1; i < count; i++) {
    if (i === 1) {
      remainTicket = REWARD_TICKET;
    } else {
      remainTicket = REWARD_TICKET - arr.reduce((prev, curr) => {
        return prev + curr;
      });
    }
    if (remainTicket < 11) {
      arr.push(remainTicket);
      break;
    }
    const randomNumber = parseInt(Math.random() * remainTicket, 10);
    arr.push(randomNumber > 10 ? randomNumber : 10);
  }

  // make sure every number >= 10
  if (arr[arr.length - 1] < 10) {
    const cut = arr.splice(arr.length - 2, 2);
    arr.push(cut[0] + cut[1]);
  }
  return arr;
}

混合云专线服务 js工具函数工具函数前端工具函数工具函数封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107651.html

【前端构建】RequireJS及其优化工具

摘要：介绍一款模块加载工具的入门，并且重点介绍其优化工具。发布目录项目源代码工具目录，例如构建工具等。另外，前端代码发布前都会进行压缩，使文件足够小。原来是因为里了，所以优化工具把也合并进来了。而优化工具要用好，要多尝试他们的配置选项。前端变化太快，如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具：RequireJS的入门，并且重点介绍其优化工具。一、RequireJS简介...

Loong_T 2019-08-19 17:59 评论0 收藏0
前端面试题（3）现代技术

摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。什么是单页面应用(SPA)？单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页目标：旨在用为用户提供了更接近本地...

EasonTyler 2019-08-26 11:58 评论0 收藏0
前端面试题（3）现代技术

摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。什么是单页面应用(SPA)？单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页目标：旨在用为用户提供了更接近本地...

AaronYuan 2019-08-05 14:02 评论0 收藏0
前端面试题（3）现代技术

摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。什么是单页面应用(SPA)？单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页目标：旨在用为用户提供了更接近本地...

trigkit4 2019-08-02 10:37 评论0 收藏0
前端周刊第57期：《战争与和平版》的 CSS-IN-JS 黑历史

摘要：以战争与和平为蓝本回顾了历史，也给出了非常赞的观察视角，程序员应该务实，而不是教条，更重要的是保持好奇心。初版于年前发布的，作者重写整个仓库从到之后，最近发布了版本，新版最大变化是升级到。 showImg(https://segmentfault.com/img/remote/1460000009584813); 不知道大家是否注意到，社区中出现的 CSS 尤其是 CSS-IN-JS...

zhangqh 2019-08-20 16:53 评论0 收藏0
微信小程序开发三宗罪和解决方案

摘要：微信小程序开发第一宗罪无法调用包虽然微信小程序开发工具打包时实现了函数加载依赖，但并不是完整的依赖管理。微信小程序开发第三宗罪无法重用组件其实微信小程序开发是并非完全不能重用组件，比如语法中支持和。注意本文章对应版本已经过时，请查阅最新版文档 https://github.com/maichong/l... QQ交流群 282140496 在微信公布小程序的文档和开发工具后，...

894974231 2019-08-05 10:12 评论0 收藏0