JavaScript核武库

以下是个人总结，也有一些是copy大神的，现在放到一起，方便以后查阅（有不对的地方，还望大家能够提出，我会尽快加以改正）。

!!强制转`boolean`

根据真值，假值判断，返回true，false假值： 0 “” null undefined false NaN

例如：
var nu=null;
var nul="";
var str="abcd";

console.log(!!nu)     // false;
console.log(!!nul)    // false;
console.log(!!str)    // true;

+obj 强制转`Number`

将对象强制转number,如果是纯数字的“88”字符串，可转为number

var a="88";
console.log(+a)   =>88
//但是如果是混合类型的字符串，则会转为NaN
var b="1606e";
console.log(+b)  => NaN

~~ 强制取整

~~ 12.34
 12
~~ 12.88
 12

不可靠的`undefined` 可靠的`void 0`

在JavaScript中，假设我们想判断一个是否是 undefined，那么我们通常会这样写：

if(a === undefined){
  dosomething
}

//但是在javascript中，undefined是不可靠的

例如：
当undefined在函数内，并且是在局部变量是可以赋上值

function foo2(){
 var undefined=1;
 console.log(undefined)
}
foo2();  =>1;

但是当在函数内定义一个全局变量，并不能给赋上值

var undefined;
function foo2(){
undefined=1;
 console.log(undefined)
}
foo2()  // undefined
void 0或者 void (0)：

最常见的用法是通过void 0 运算来获得 undefined，表达式为 0 时的运算开销最小：
那在以后需要判断值为undefined的时候，可以直接用void 0或者void (0)

字符串也是有`length`属性的！

我们知道所有的array都是有length,属性，就算事空数组，length 是0，那么字符串有没有呢？接下来我们来验证一下：

var str="sdfsd5565s6dfsd65sd6+d5fd5";
console.log(str.length)      // 26

结果是有的，所以我们在判断类型时，不能单纯拿有没有length属性来判断是不是数组了，我们可以用下面的方法：

var obj=[1,2] ;
console.log(toString.call(obj) === '[object Array]');

生成一个随机数组(创建数组，`sort`排序)

在项目中有时候我们需要一个随机打乱的数组，那么下面我们来实现以下：
先来创建一个数组：

var arr=[];
for(var i=0;i<10;i++){
   arr.push(i)
}
console.log(arr)    //  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

接下来我们来打乱它：

arr.sort(()=>{
 return Math.random() - 0.5
})                 // [1, 0, 2, 3, 4, 6, 8, 5, 7, 9]

第二种打乱方法：

arr.sort((a,b)=>{
　　　return a>Math.random()*10;
})               //  [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]

我们以前的正常排序是这样的：

arr.sort(function(a,b){
   return b-a
});

解析：
先说正常的排序：
a,b表示数组中的任意两个元素，若return > 0 b前a后；reutrn < 0 a前b后；a=b时存在浏览器兼容，
a-b输出从小到大排序，b-a输出从大到小排序。
然后再说我们打乱的方法：
创建数组不用说，接下来就是用js的sort方法来实现，Math.random()实现一个随机0-1之间的小数然后再减去0.5，这时就会根据return比较后得到的值排，所以说就会生成不是正常从大到小或者从小到大的排序。

第二个打乱的方法同样是遵循sort的方法，将a,b传进去然后和随机数做比较，关于比较的方法不太清楚。

去除前后、前、后所有空格

这是专门为去除空格写的一套方法，适用于各种情况，所有空格,前后空格，前空格，后空格。

var strr=” 1 ad dertasdf sdfASDFDF DFG SDFG “
// type 1-所有空格 2-前后空格 3-前空格 4-后空格

function trim(str,type){
    switch (type){
        case 1:return str.replace(/\s+/g,"");
        case 2:return str.replace(/(^\s*)|(\s*$)/g, "");
        case 3:return str.replace(/(^\s*)/g, "");
        case 4:return str.replace(/(\s*$)/g, "");
        default:return str;
    }
}
console.log( trim(strr,1))      //  "1addertasdfsdfASDFDFDFGSDFG"

解析：
这个方法用的是正则的匹配格式,后面我会把正则单独拿出来总结一个系列，敬请期待！！！

\s ： 空格符，Tab,换页符，换行符
  \S ： 非\s的所有内容
  /g :  全局匹配
  ^  :  匹配在行首
  $  :  匹配在行尾
  +  ： 重复次数>0
  *  ： 重复次数>=0
  |  :  或者

replace(a,b)：方法用于在字符创中用一些字符替换另一些字符, 会传入两个值，将逗号前面的值a替换成逗号后面的值b

字母大小写切换（正则匹配，`replace`）

这个方法主要是给一些需要大小写转换提供的方法，主要有首字母大写，首字母小写，大小写转换，全部转大写和全部转小写。

type：
　　1:首字母大写
　　2：首页母小写
　　3：大小写转换
　　4：全部大写
　　5：全部小写

原始字符串：

var str="sdfwwerasfddffddeerAasdgFegqer";

function changeCase(str,type) {

   //这个函数是第三个大小写转换的方法
    function ToggleCase(str) {
        var itemText = ""
        str.split("").forEach(
                function (item) {
                 // 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次
                    if (/^([a-z]+)/.test(item)) {
                    //  如果是小写，转换成大写
                        itemText += item.toUpperCase();
                    }
                //  判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次
                    else if (/^([A-Z]+)/.test(item)) {
                   //   如果是大写，转换成小写
                        itemText += item.toLowerCase();
                    }
                    else{
                  //  如果都不符合，返回其本身
                        itemText += item;
                    }
                });
        return itemText;
    }
  //下面主要根据传入的type值来匹配各个场景
    switch (type) {
         //当匹配
        case 1:
            return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
                 //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
                return v1.toUpperCase() + v2.toLowerCase();
            });
        case 2:
            return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
                //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
                return v1.toLowerCase() + v2.toUpperCase();
            });
        case 3:
            return ToggleCase(str);
        case 4:
            return str.toUpperCase();
        case 5:
            return str.toLowerCase();
        default:
            return str;
    }

}

 console.log(changeCase(str,1)) =>SdfwwerasfddffddeerAasdgFegqer

解析：

split：用于把一个字符串分割成字符串数组
\w: 数字0-9或字母a-z及A-Z,或下划线
\W: 非\w，除以上的特殊符号等   
toUpperCase：转大写
toLowerCase：转小写
replace第二个参数可以是函数，函数的参数中，第一个是本身，第二个是正则匹配内容，第三个匹配剩下的内容

下面我们就通过小实验来验证一下：
网上有说replace是可以有4个参数的，但是我并没有验证到第四个代表的意义，前三个已经验证，第一个参数为验证本身，第二个正则匹配结果，第三为第二个匹配完剩下的值。

循环n次传入的字符串`str`为传入随意字符串，`count`为循环的次数

var str="abc";
 var number=555;

function repeatStr(str, count) {
    //声明一个空字符串，用来保存生成后的新字符串
    var text = '';
    //循环传入的count值，即循环的次数
    for (var i = 0; i < count; i++) {
       //循环一次就把字符串+到我们事先准备好的空字符串上
        text += str;
    }
    return text;
}

  console.log(repeatStr(str, 3))         // "abcabcabc"

  console.log(repeatStr(number, 3))      // "555555555"

解析：根据count循环的次数，在循环体内复制，return 返回+=后的值

查找字符串的A内容替换成B内容

let str="abacdasdfsd" function replaceAll(str,AFindText,ARepText){
   raRegExp = new RegExp(AFindText,"g");
   return str.replace(raRegExp,ARepText);
}
console.log(replaceAll(str,"a","x"))  // xbxcdxsdfsd
str：需要编辑的字符串本身
AFindText:需要替换的内容
ARepText:被替换成的内容

解析：创建正则，匹配内容，替换

检测常用格式，邮箱，手机号，名字，大写，小写,在表单验证时，我们经常会需要去验证一些内容，举例几个常用的验证

function checkType (str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'phone':
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'number':
            return /^[0-9]$/.test(str);
        case 'english':
            return /^[a-zA-Z]+$/.test(str);
        case 'chinese':
            return /^[\u4E00-\u9FA5]+$/.test(str);
        case 'lower':
            return /^[a-z]+$/.test(str);
        case 'upper':
            return /^[A-Z]+$/.test(str);
        default :
            return true;
    }
}
console.log(checkType ('hjkhjhT','lower'))   //false

解析：

checkType ('hjkhjhT','lower')'需要验证的字符串'，'匹配的格式'
email：验证邮箱
phone：验证手机号
tel：验证座机号
number：验证数字
english：验证英文字母
chinese：验证中文字
lower：验证小写
upper：验证大写

JS返回浏览器历史第一页：

JS返回浏览器历史第一页

我在浏览器控制台敲了 window.history 其实我想看看还有哪些API，他输出了以下信息，我看到length 这个属性让我眼前一亮，其他2个我不关心。

{
    length: 2,
    scrollRestoration: "auto",
    state: null
}

我尝试用length 去回退，不成功！

window.history.go(-2);

我再尝试用length去减1, 成功了，我猜应该是跟新标签页有关吧。那我不管了，我已经有答案了

window.history.go(-1);

最后代码

var historyLen = window.history;
window.history.go(-(historyLen - 1));

测试了3个浏览器，都是第一次打开浏览器测试

Chrome 会直接返回到新标签页
Safari 我这里测试是返回到百度，可能是我的设置问题
Firefox 直接关闭浏览器

作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到npm，以提高开发效率。

这里，笔者已经封装并发布了自己的武器库 outils，如果你对本项目感兴趣，欢迎 star 本项目。当然你也可以在本项目的基础上封装自己的武器库。

常用函数汇总

这里先分类整理下，之前项目中多次用到的工具函数。

1.Array

1.1 arrayEqual

/**
 * 
 * @desc 判断两个数组是否相等
 * @param {Array} arr1 
 * @param {Array} arr2 
 * @return {Boolean}
 */ function arrayEqual(arr1, arr2) {
    if (arr1 === arr2) return true;
    if (arr1.length != arr2.length) return false;
    for (var i = 0; i < arr1.length; ++i) {
        if (arr1[i] !== arr2[i]) return false;
    }
    return true;
}

2.Class

2.1 addClass

/**
 * 
 * @desc   为元素添加class
 * @param  {HTMLElement} ele 
 * @param  {String} cls 
 */ 
var hasClass = require('./hasClass');
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) {
        ele.className += ' ' + cls;
    }
}

2.2 hasClass

/**
 * 
 * @desc 判断元素是否有某个class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 * @return {Boolean}
 */ 
function hasClass(ele, cls) {
    return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}

2.3 removeClass

/**
 * 
 * @desc 为元素移除class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 */ 
var hasClass = require('./hasClass');
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

3.1 getCookie

/**
 * 
 * @desc 根据name读取cookie
 * @param  {String} name 
 * @return {String}
 */ 
function getCookie(name) {
    var arr = document.cookie.replace(/\s/g, "").split(';');
    for (var i = 0; i < arr.length; i++) {
        var tempArr = arr[i].split('=');
        if (tempArr[0] == name) {
            return decodeURIComponent(tempArr[1]);
        }
    }
    return '';
}

3.2 removeCookie

var setCookie = require('./setCookie');
/**
 * 
 * @desc 根据name删除cookie
 * @param  {String} name 
 */
 function removeCookie(name) {
    // 设置已过期，系统会立刻删除cookie
    setCookie(name, '1', -1);
}

3.3 setCookie

/**
 * 
 * @desc  设置Cookie
 * @param {String} name 
 * @param {String} value 
 * @param {Number} days 
 */ 
function setCookie(name, value, days) {
    var date = new Date();
    date.setDate(date.getDate() + days);
    document.cookie = name + '=' + value + ';expires=' + date;
}

4.Device

4.1 getExplore

/**
 * 
 * @desc 获取浏览器类型和版本
 * @return {String} 
 */ 
function getExplore() {
    var sys = {},
        ua = navigator.userAgent.toLowerCase(),
        s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
        (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
        (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
        (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
        (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
        (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
        (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
    // 根据关系进行判断 if (sys.ie) return ('IE: ' + sys.ie)
    if (sys.edge) return ('EDGE: ' + sys.edge)
    if (sys.firefox) return ('Firefox: ' + sys.firefox)
    if (sys.chrome) return ('Chrome: ' + sys.chrome)
    if (sys.opera) return ('Opera: ' + sys.opera)
    if (sys.safari) return ('Safari: ' + sys.safari)
    return 'Unkonwn'
}

4.2 getOS

/**
 * 
 * @desc 获取操作系统类型
 * @return {String} 
 */ 
function getOS() {
    var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
    var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
    var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';

    if (/mac/i.test(appVersion)) return 'MacOSX' if (/win/i.test(appVersion)) return 'windows' if (/linux/i.test(appVersion)) return 'linux' if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) 'ios' if (/android/i.test(userAgent)) return 'android' if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
}

5.Dom

5.1 getScrollTop

/**
 * 
 * @desc 获取滚动条距顶部的距离
 */ 
function getScrollTop() {
    return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
}

5.2 offset

/**
 * 
 * @desc  获取一个元素的距离文档(document)的位置，类似jQ中的offset()
 * @param {HTMLElement} ele 
 * @returns { {left: number, top: number} }
 */ 
function offset(ele) {
    var pos = {
        left: 0,
        top: 0
    };
    while (ele) {
        pos.left += ele.offsetLeft;
        pos.top += ele.offsetTop;
        ele = ele.offsetParent;
    };
    return pos;
}

5.3 scrollTo

var getScrollTop = require('./getScrollTop');
var setScrollTop = require('./setScrollTop');
var requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
/**
 * 
 * @desc  在${duration}时间内，滚动条平滑滚动到${to}指定位置
 * @param {Number} to 
 * @param {Number} duration 
 */ 
function scrollTo(to, duration) {
    if (duration < 0) {
        setScrollTop(to);
        return
    }
    var diff = to - getScrollTop();
    if (diff === 0) return var step = diff / duration * 10;
    requestAnimationFrame(
        function () {
            if (Math.abs(step) > Math.abs(diff)) {
                setScrollTop(getScrollTop() + diff);
                return;
            }
            setScrollTop(getScrollTop() + step);
            if (diff > 0 && getScrollTop() >= to || diff < 0 && getScrollTop() <= to) {
                return;
            }
            scrollTo(to, duration - 16);
        });
}

5.4 setScrollTop

/**
 * 
 * @desc 设置滚动条距顶部的距离
 */ 
function setScrollTop(value) {
    window.scrollTo(0, value);
    return value;
}

6.Keycode

6.1 getKeyName

var keyCodeMap = {
    8: 'Backspace',
    9: 'Tab',
    13: 'Enter',
    16: 'Shift',
    17: 'Ctrl',
    18: 'Alt',
    19: 'Pause',
    20: 'Caps Lock',
    27: 'Escape',
    32: 'Space',
    33: 'Page Up',
    34: 'Page Down',
    35: 'End',
    36: 'Home',
    37: 'Left',
    38: 'Up',
    39: 'Right',
    40: 'Down',
    42: 'Print Screen',
    45: 'Insert',
    46: 'Delete',

    48: '0',
    49: '1',
    50: '2',
    51: '3',
    52: '4',
    53: '5',
    54: '6',
    55: '7',
    56: '8',
    57: '9',

    65: 'A',
    66: 'B',
    67: 'C',
    68: 'D',
    69: 'E',
    70: 'F',
    71: 'G',
    72: 'H',
    73: 'I',
    74: 'J',
    75: 'K',
    76: 'L',
    77: 'M',
    78: 'N',
    79: 'O',
    80: 'P',
    81: 'Q',
    82: 'R',
    83: 'S',
    84: 'T',
    85: 'U',
    86: 'V',
    87: 'W',
    88: 'X',
    89: 'Y',
    90: 'Z',

    91: 'Windows',
    93: 'Right Click',

    96: 'Numpad 0',
    97: 'Numpad 1',
    98: 'Numpad 2',
    99: 'Numpad 3',
    100: 'Numpad 4',
    101: 'Numpad 5',
    102: 'Numpad 6',
    103: 'Numpad 7',
    104: 'Numpad 8',
    105: 'Numpad 9',
    106: 'Numpad *',
    107: 'Numpad +',
    109: 'Numpad -',
    110: 'Numpad .',
    111: 'Numpad /',

    112: 'F1',
    113: 'F2',
    114: 'F3',
    115: 'F4',
    116: 'F5',
    117: 'F6',
    118: 'F7',
    119: 'F8',
    120: 'F9',
    121: 'F10',
    122: 'F11',
    123: 'F12',

    144: 'Num Lock',
    145: 'Scroll Lock',
    182: 'My Computer',
    183: 'My Calculator',
    186: ';',
    187: '=',
    188: ',',
    189: '-',
    190: '.',
    191: '/',
    192: '`',
    219: '[',
    220: '\\',
    221: ']',
    222: '\''
};
/**
 * @desc 根据keycode获得键名
 * @param  {Number} keycode 
 * @return {String}
 */ 
function getKeyName(keycode) {
    if (keyCodeMap[keycode]) {
        return keyCodeMap[keycode];
    } else {
        console.log('Unknow Key(Key Code:' + keycode + ')');
        return '';
    }
};

7.Object

7.1 deepClone

/**
 * @desc 深拷贝，支持常见类型
 * @param {Any} values
 */ 
function deepClone(values) {
    var copy;

    // Handle the 3 simple types, and null or undefined if (null == values || "object" != typeof values) return values;

    // Handle Date if (values instanceof Date) {
        copy = new Date();
        copy.setTime(values.getTime());
        return copy;
    }

    // Handle Array if (values instanceof Array) {
        copy = [];
        for (var i = 0, len = values.length; i < len; i++) {
            copy[i] = deepClone(values[i]);
        }
        return copy;
    }

    // Handle Object if (values instanceof Object) {
        copy = {};
        for (var attr in values) {
            if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy values! Its type isn't supported.");
}

7.2 isEmptyObject

/**
 * 
 * @desc   判断`obj`是否为空
 * @param  {Object} obj
 * @return {Boolean}
 */ 
function isEmptyObject(obj) {
    if (!obj || typeof obj !== 'object' || Array.isArray(obj))
        return false return !Object.keys(obj).length
}

8.Random

8.1 randomColor

/**
 * 
 * @desc 随机生成颜色
 * @return {String} 
 */ 
function randomColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}

8.2 randomNum

/**
 * 
 * @desc 生成指定范围随机数
 * @param  {Number} min 
 * @param  {Number} max 
 * @return {Number} 
 */ 
function randomNum(min, max) {
    return Math.floor(min + Math.random() * (max - min));
}

9.Regexp

9.1 isEmail

/**
 * 
 * @desc   判断是否为邮箱地址
 * @param  {String}  str
 * @return {Boolean} 
 */ 
function isEmail(str) {
    return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
}

9.2 isIdCard

/**
 * 
 * @desc  判断是否为身份证号
 * @param  {String|Number} str 
 * @return {Boolean}
 */ 
function isIdCard(str) {
    return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str)
}

9.3 isPhoneNum

/**
 * 
 * @desc   判断是否为手机号
 * @param  {String|Number} str 
 * @return {Boolean} 
 */
 function isPhoneNum(str) {
    return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
}

9.4 isUrl

/**
 * 
 * @desc   判断是否为URL地址
 * @param  {String} str 
 * @return {Boolean}
 */ 
function isUrl(str) {
    return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(str);
}

10.String

10.1 digitUppercase

/**
 * 
 * @desc   现金额转大写
 * @param  {Number} n 
 * @return {String}
 */
 function digitUppercase(n) {
    var fraction = ['角', '分'];
    var digit = [
        '零', '壹', '贰', '叁', '肆',
        '伍', '陆', '柒', '捌', '玖'
    ];
    var unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
    ];
    var head = n < 0 ? '欠' : '';
    n = Math.abs(n);
    var s = '';
    for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
};

11.Support

11.1 isSupportWebP

/**
 * 
 * @desc 判断浏览器是否支持webP格式图片
 * @return {Boolean} 
 */ 
function isSupportWebP() {
    return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
}

12.Time

12.1 formatPassTime

/**
 * @desc   格式化${startTime}距现在的已过时间
 * @param  {Date} startTime 
 * @return {String}
 */ 
function formatPassTime(startTime) {
    var currentTime = Date.parse(new Date()),
        time = currentTime - startTime,
        day = parseInt(time / (1000 * 60 * 60 * 24)),
        hour = parseInt(time / (1000 * 60 * 60)),
        min = parseInt(time / (1000 * 60)),
        month = parseInt(day / 30),
        year = parseInt(month / 12);
    if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'
}

12.2 formatRemainTime

/**
 * 
 * @desc   格式化现在距${endTime}的剩余时间
 * @param  {Date} endTime  
 * @return {String}
 */ function formatRemainTime(endTime) {
    var startDate = new Date(); //开始时间 var endDate = new Date(endTime); //结束时间 var t = endDate.getTime() - startDate.getTime(); //时间差 var d = 0,
        h = 0,
        m = 0,
        s = 0;
    if (t >= 0) {
        d = Math.floor(t / 1000 / 3600 / 24);
        h = Math.floor(t / 1000 / 60 / 60 % 24);
        m = Math.floor(t / 1000 / 60 % 60);
        s = Math.floor(t / 1000 % 60);
    }
    return d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
}

13.Url

13.1 parseQueryString

/**
 * 
 * @desc   url参数转对象
 * @param  {String} url  default: window.location.href
 * @return {Object} 
 */ 
function parseQueryString(url) {
    url = url == null ? window.location.href : url
    var search = url.substring(url.lastIndexOf('?') + 1)
    if (!search) {
        return {}
    }
    return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

13.2 stringfyQueryString

/**
 * 
 * @desc   对象序列化
 * @param  {Object} obj 
 * @return {String}
 */ function stringfyQueryString(obj) {
    if (!obj) return '';
    var pairs = [];

    for (var key in obj) {
        var value = obj[key];

        if (value instanceof Array) {
            for (var i = 0; i < value.length; ++i) {
                pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
            }
            continue;
        }

        pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }

    return pairs.join('&');
}

14.Function

14.1 throttle

/**
 * @desc   函数节流。
 * 适用于限制`resize`和`scroll`等函数的调用频率
 *
 * @param  {Number}    delay          0 或者更大的毫秒数。 对于事件回调，大约100或250毫秒（或更高）的延迟是最有用的。
 * @param  {Boolean}   noTrailing     可选，默认为false。
 *                                    如果noTrailing为true，当节流函数被调用，每过`delay`毫秒`callback`也将执行一次。
 *                                    如果noTrailing为false或者未传入，`callback`将在最后一次调用节流函数后再执行一次.
 *                                    （延迟`delay`毫秒之后，节流函数没有被调用,内部计数器会复位）
 * @param  {Function}  callback       延迟毫秒后执行的函数。`this`上下文和所有参数都是按原样传递的，
 *                                    执行去节流功能时，调用`callback`。
 * @param  {Boolean}   debounceMode   如果`debounceMode`为true，`clear`在`delay`ms后执行。
 *                                    如果debounceMode是false，`callback`在`delay` ms之后执行。
 *
 * @return {Function}  新的节流函数
 */ function throttle(delay, noTrailing, callback, debounceMode) {

    // After wrapper has stopped being called, this timeout ensures that // `callback` is executed at the proper times in `throttle` and `end` // debounce modes. var timeoutID;

    // Keep track of the last time `callback` was executed. var lastExec = 0;

    // `noTrailing` defaults to falsy. if (typeof noTrailing !== 'boolean') {
        debounceMode = callback;
        callback = noTrailing;
        noTrailing = undefined;
    }

    // The `wrapper` function encapsulates all of the throttling / debouncing // functionality and when executed will limit the rate at which `callback` // is executed. function wrapper() {

        var self = this;
        var elapsed = Number(new Date()) - lastExec;
        var args = arguments;

        // Execute `callback` and update the `lastExec` timestamp. function exec() {
            lastExec = Number(new Date());
            callback.apply(self, args);
        }

        // If `debounceMode` is true (at begin) this is used to clear the flag // to allow future `callback` executions. function clear() {
            timeoutID = undefined;
        }

        if (debounceMode && !timeoutID) {
            // Since `wrapper` is being called for the first time and // `debounceMode` is true (at begin), execute `callback`.
            exec();
        }

        // Clear any existing timeout. if (timeoutID) {
            clearTimeout(timeoutID);
        }

        if (debounceMode === undefined && elapsed > delay) {
            // In throttle mode, if `delay` time has been exceeded, execute // `callback`.
            exec();

        } else if (noTrailing !== true) {
            // In trailing throttle mode, since `delay` time has not been // exceeded, schedule `callback` to execute `delay` ms after most // recent execution. // // If `debounceMode` is true (at begin), schedule `clear` to execute // after `delay` ms. // // If `debounceMode` is false (at end), schedule `callback` to // execute after `delay` ms.
            timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
        }

    }

    // Return the wrapper function. return wrapper;

};

14.2 debounce

/**
 * @desc 函数防抖 
 * 与throttle不同的是，debounce保证一个函数在多少毫秒内不再被触发，只会执行一次，
 * 要么在第一次调用return的防抖函数时执行，要么在延迟指定毫秒后调用。
 * @example 适用场景：如在线编辑的自动存储防抖。
 * @param  {Number}   delay         0或者更大的毫秒数。 对于事件回调，大约100或250毫秒（或更高）的延迟是最有用的。
 * @param  {Boolean}  atBegin       可选，默认为false。
 *                                  如果`atBegin`为false或未传入，回调函数则在第一次调用return的防抖函数后延迟指定毫秒调用。
                                    如果`atBegin`为true，回调函数则在第一次调用return的防抖函数时直接执行
 * @param  {Function} callback      延迟毫秒后执行的函数。`this`上下文和所有参数都是按原样传递的，
 *                                  执行去抖动功能时，，调用`callback`。
 *
 * @return {Function} 新的防抖函数。
 */ 
var throttle = require('./throttle');
function debounce(delay, atBegin, callback) {
    return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
};

封装

除了对上面这些常用函数进行封装，最重要的是支持合理化的引入，这里我们使用webpack统一打包成UMD 通用模块规范，支持webpack、RequireJS、SeaJS等模块加载器，亦或直接通过<script>标签引入。

但这样，还是不能让人满意。因为完整引入整个库，略显浪费，我们不可能用到所有的函数。那么，就支持按需引入吧

1.目录结构说明

│  .babelrc
│  .gitignore
│  .travis.yml
│  LICENSE
│  package.json
│  README.md
│  setCookie.js  // 拷贝到根路径的函数模块，方便按需加载
│  setScrollTop.js
│  stringfyQueryString.js
│   ...
│   ...
│  
├─min
│      outils.min.js  // 所有函数统一打包生成的全量压缩包
│      
├─script  // 本项目开发脚本目录
│      build.js  // 打包构建脚本
│      test.js  // 测试脚本
│      webpack.conf.js  // webpack打包配置文件
│      
├─src // 源码目录
│  │  index.js  // webpack入口文件
│  │  
│  ├─array
│  │      
│  ├─class
│  │      
│  ├─cookie
│  │      
│  ├─device
│  │      
│  ├─dom
│  │      
│  ├─keycode
│  │      
│  ├─object
│  │      
│  ├─random
│  │      
│  ├─regexp
│  │      
│  ├─string
│  │      
│  ├─support
│  │      
│  ├─time
│  │      
│  └─url
│          
└─test // 测试用例目录
    │  array.test.js
    │  class.test.js
    │  cookie.test.js
    │  device.test.js
    │  dom.test.js
    │  index.html
    │  keycode.test.js
    │  object.test.js
    │  random.test.js
    │  regexp.test.js
    │  string.test.js
    │  support.test.js
    │  time.test.js
    │  url.test.js
    │  
    └─_lib // 测试所用到的第三方库
            mocha.css
            mocha.js
            power-assert.js

2.构建脚本

这里主要说明一下项目中 build.js 的构建过程
第一步，构建全量压缩包，先删除min目录中之前的outils.min.js，后通过webpack打包并保存新的压缩包至min目录中：

......
 ......
 // 删除旧的全量压缩包
 rm(path.resolve(rootPath, 'min', `${pkg.name}.min.js`), err => {
     if (err) throw (err)
     webpack(config, function (err, stats) {
         if (err) throw (err)
         building.stop()
         process.stdout.write(stats.toString({
             colors: true,
             modules: false,
             children: false,
             chunks: false,
             chunkModules: false
         }) + '\n\n')
         resolve()
         console.log(chalk.cyan('  Build complete.\n'))
     })
 })
 ......
 ......

第二步，拷贝函数模块至根目录，先删除根目录中之前的函数模块，后拷贝src下面一层目录的所有js文件至根目录。这么做的目的是，拷贝到根路径，在引入的时候，直接require('outils/<方法名>')即可，缩短引入的路径，也算是提高点效率。

// 替换模块文件
    ......
    ......
    // 先删除根目录中之前的函数模块
    rm('*.js', err => {
        if (err) throw (err)
        let folderList = fs.readdirSync(path.resolve(rootPath, 'src'))
        folderList.forEach((item, index) => {
            // 拷贝`src`下面一层目录的所有`js`文件至根目录
            copy(`src/${item}/*.js`, rootPath, function (err, files) {
                if (err) throw err;
                if (index === folderList.length - 1) {
                    console.log(chalk.cyan('  Copy complete.\n'))
                    copying.stop()
                }
            })
        })
    })
    ......
    ......

3.书写测试用例

俗话说，不写测试用例的前端不是一个好程序员。那就不能怂，就是干。

但是因为时间关系，本项目暂时通过项目中的 test.js ，启动了一个koa静态服务器，来加载mocha网页端的测试页面，让笔者书写项目时，可以在本地对函数功能进行测试。
但是后续将使用travis-ci配合Github来做持续化构建，自动发布到npm。改用karma，mocha，power-assert做单元测试，使用Coverage测试覆盖率。这一部分，后续更新。

这里给大家推荐一个好用的断言库 power-assert ，这个库记住assert(value, [message])一个API就基本无敌，从此再也不用担心记不住断言库的API。

本项目的所有测试用例都在test目录下，大家可以作一定参考。

更新：单元测试，已使用karma，mocha，power-assert，使用Coverage测试覆盖率，并集成 travis-ci 配合Github来做持续化构建，可以参考本项目的travis配置文件 .travis.yml 和karma的配置文件 karma.conf.js 。

发布

首先放到Github托管一下，当然你也可以直接fork本项目，然后再加入你自己的函数。
以笔者项目，举个栗子:

1.添加自己的函数

在src目录下，新建分类目录或者选择一个分类，在子文件夹中添加函数模块文件（建议一个小功能保存为一个JS文件）。

/**
 * 
 * @desc   判断是否NaN
 * @param  {Any} value 
 * @return {Boolean}
 */ 
function isNaN(value) {    
    return value !== value;
};

modules.export = isNaN

然后记得在src/index.js文件中暴露isNaN函数

2.单元测试

在test文件新建测试用例

describe('#isNaN()', function () {
    it(`outils.isNaN(NaN) should return true`, function () {
        assert(outils.isNaN(NaN))
    })
    it(`outils.isNaN('value') should return false`, function () {
        assert.notEqual(outils.isNaN(NaN))
    })
})

然后记得在test/index.html中引入之前创建的测试用例脚本。

3.测试并打包

执行npm run test，看所有的测试用例是否通过。如果没有问题，执行npm run build构建，之后提交到个人的 github 仓库即可。

4.发布到npm

在 www.npmjs.com 注册账号，修改本地package.json中的name、version、author等信息，最后npm publish就大功告成了。
注意：向npm发包，要把镜像源切到 www.npmjs.com ，使用cnpm等第三方镜像源会报错。

使用

1.浏览器

直接下载min目录下的 outils.min.js ，通过<script>标签引入。

<script src="outils.min.js"></script> <script> var OS = outils.getOS()
  </script>

注意：本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到 github Release 页面下载对应版本号的代码。

2.Webpack、RequireJS、SeaJS等模块加载器

先使用npm安装outils。

$ npm install --save-dev outils
// 完整引入 const outils = require('outils')
const OS = outils.getOS()
推荐使用方法 
// 按需引入require('outils/<方法名>') const getOS = require('outils/getOS')
const OS = getOS()

当然，你的开发环境有babel编译ES6语法的话，也可以这样使用：

import getOS from 'outils/getOS' // 或 import { getOS } from "outils";

总结

这里只是简单封装，发布到npm上，省去下次复制粘贴的功夫，或者直接Goole的时间。如果笔者的库中，没有你常用的函数，或者你有更好的建议，欢迎来本项目的 Github Issues 交流，如果觉得不错，欢迎 star 本项目。

当然，更好的建议是 fork 本项目，或者直接新建自己的项目，添加自己想要的、常用的、记不住的函数，甚至是可以抽象出来的功能，封装成自己顺手、熟悉的库。这样才能打造出你自己的武器库，瞬间提高你的单兵作战（开发）能力。

libraries ：https://github.com/wuxianqiang/libraries

仿ECMAScript5中Object.create()函数

function inherit(obj) {
            if (obj === null) throw TypeError();
            if (Object.create) return Object.create(obj);
            var t = typeof obj;
            if (t !== "object" && t !== "function") throw TypeError();
            function Fn() {};
            Fn.prototype = obj;
            return new Fn();
        }

仿ECMAScript5中String.trim()函数

String.prototype.mytrim = function () {
            String.prototype.trim || function () {
                if (!this) return this; //空字符串不做处理
                return this.replace(/^\s+|\s+$/g, "") //使用正则表达式经行空格替换
            }
        }

仿ECMAScript5中Array.reduce()函数

var reduce = Array.prototype.reduce ? function (ary, fn, initial) {
            if (arguments.length > 2) { //如果reduce()方法存在的话
                return ary.reduce(fn, initial); //如果传入了一个初始值
            } else {
                return ary.reduce(fn); //否则初始值
            }
        } : function (ary, fn, initial) { //以特定的初始值开始，否则第一个值取自ary
            var i = 0,
                len = ary.length,
                accumulator;
            if (arguments.length > 2) {
                accumulator = initial;
            } else { //找到数组中第一个已经定义的索引
                if (len == 0) throw TypeError();
                while (i < len) {
                    if (i in ary) {
                        accumulator = ary[i++];
                        break;
                    } else {
                        i++;
                    }
                }
                if (i == len) throw TypeError();
            }
            while (i < len) { //对于数组中剩下的元素依次调用fn
                if (i in ary) {
                    accumulator = fn.call(undefined, accumulator, ary[i], i, ary)
                }
                i++;
            }
            return accumulator;
        }

!!强制转boolean

+obj 强制转Number

~~ 强制取整

不可靠的undefined 可靠的void 0

字符串也是有length属性的！

生成一个随机数组(创建数组，sort排序)

去除前后、前、后 所有空格

字母大小写切换（正则匹配，replace）

循环n次传入的字符串str为传入随意字符串，count为循环的次数

查找字符串的A内容替换成B内容

检测常用格式，邮箱，手机号，名字，大写，小写,在表单验证时，我们经常会需要去验证一些内容，举例几个常用的验证

这里先分类整理下，之前项目中多次用到的工具函数。

1.Array

1.1 arrayEqual

2.Class

2.1 addClass

3.Cookie

3.1 getCookie

4.Device

4.1 getExplore

5.Dom

5.1 getScrollTop

5.3 scrollTo

5.4 setScrollTop

6.Keycode

6.1 getKeyName

7.Object

7.1 deepClone

7.2 isEmptyObject

8.Random

8.1 randomColor

8.2 randomNum

9.Regexp

9.1 isEmail

9.2 isIdCard

9.3 isPhoneNum

9.4 isUrl

10.String

10.1 digitUppercase

11.Support

11.1 isSupportWebP

12.Time

12.1 formatPassTime

12.2 formatRemainTime

13.Url

13.1 parseQueryString

13.2 stringfyQueryString

14.Function

14.1 throttle

14.2 debounce

libraries ：https://github.com/wuxianqiang/libraries

目录

仿ECMAScript5中Object.create()函数

仿ECMAScript5中String.trim()函数

仿ECMAScript5中Array.reduce()函数

在数组中查找所有出现的元素方法

数据类型检测，特殊情况特殊处理

仿ECMAScript5中Object.keys()函数

仿Math.max方法（不定实参函数）

仿ECMAScript5中Function.bind()函数

仿ECMAScript5中Array.map()函数

数组去重

冒泡排序

仿String.match()方法实现

返回元素的第n层祖先元素

返回元素的第n个兄弟元素

返回元素的第n个子代元素

表格的行排序

生成目录表

从URL解析参数

获取纯文本的元素内容

手写一个JSONP实现

插入节点

使用innerHTML实现outerHTML属性

倒序排列子节点

查询窗口滚动条的位置

查询窗口的视口尺寸

返回函数的名字

原生JS实现CSS动画1

原生JS实现CSS动画2