打造自己的JavaScript武器库（转）

作者： slaneyang

https://segmentfault.com/a/1190000011966867

前言

作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、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.cookie

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

工欲善其事必先利其器。有了属于自己的这把利器，希望加班也会变成奢望。o(∩_∩)o哈哈~