打造自己的JavaScript武器库

原文地址：https://juejin.im/post/5a091afe6fb9a044ff30f402

API文档

Array

  arrayEqual  判断两个数组是否相等

Class

  addClass  为元素添加class

  hasClass  判断元素是否有某个class

  removeClass  为元素移除class

Cookie

  getCookie  根据name读取Cookie

  removeCookie  根据name删除Cookie

  setCookie  添加Cookie

Device

  getExplore  获取浏览器类型和版本号

  getOS  获取操作系统类型

Dom

  getScrollTop  获取滚动条距顶部的距离

  offset  获取一个元素的距离文档(document)的位置，类似jQ中的offset()

  scrollTo  在${duration}时间内，滚动条平滑滚动到${to}指定位置

  setScrollTop  设置滚动条距顶部的距离

Function

  debounce  函数防抖

  throttle  函数节流

Keycode

  getKeyName  根据keycode获得键名

Object

  deepClone  深拷贝，支持常见类型

  isEmptyObject  判断Object是否为空

Random

  randomColor   随机生成颜色

  randomNum  生成指定范围随机数

Regexp

  isEmail  判断是否为邮箱地址

  isIdCard  判断是否为身份证号

  isPhoneNum  判断是否为手机号

  isUrl  判断是否为URL地址

String

  digitUppercase  现金额转大写

Support

  isSupportWebP  判断浏览器是否支持webP格式图片

Time

  formatPassTime  格式化${startTime}距现在的已过时间

  formatRemainTime  格式化现在距${endTime}的剩余时间

Url

  parseQueryString  url参数转对象

  stringfyQueryString  对象序列化

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

发布

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

作者：SlaneYang
链接：https://juejin.im/post/5a091afe6fb9a044ff30f402
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。