打造自己的JavaScript武器库

喜欢ヅ旅行 2022-06-05 03:44 429阅读 0赞

## 原文地址：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][outils]，如果你对本项目感兴趣，欢迎[ star ][outils]本项目。当然你也可以在本项目的基础上封装自己的武器库。

# 常用函数汇总 #

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

## 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 ###

### 5.4 setScrollTop ###

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

## 6.Keycode ##

### 6.1 getKeyName ###

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

这里给大家推荐一个好用的断言库[ power-assert ][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 ][www.npmjs.com]注册账号，修改本地`package.json`中的`name`、`version`、`author`等信息，最后`npm publish`就大功告成了。  
注意：向`npm`发包，要把镜像源切到[ www.npmjs.com ][www.npmjs.com]，使用`cnpm`等第三方镜像源会报错。

# 使用 #

### 1.浏览器 ###

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

注意： 本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到[ github Release ][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 ][Github Issues]交流，如果觉得不错，欢迎[ star ][outils]本项目。

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

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

[arrayEqual]: https://github.com/proYang/outils/blob/master/src/array/arrayEqual.js
[addClass]: https://github.com/proYang/outils/blob/master/src/class/addClass.js
[hasClass]: https://github.com/proYang/outils/blob/master/src/class/hasClass.js
[removeClass]: https://github.com/proYang/outils/blob/master/src/class/removeClass.js
[getCookie]: https://github.com/proYang/outils/blob/master/src/cookie/getCookie.js
[removeCookie]: https://github.com/proYang/outils/blob/master/src/cookie/removeCookie.js
[setCookie]: https://github.com/proYang/outils/blob/master/src/cookie/setCookie.js
[getExplore]: https://github.com/proYang/outils/blob/master/src/device/getExplore.js
[getOS]: https://github.com/proYang/outils/blob/master/src/device/getOS.js
[getScrollTop]: https://github.com/proYang/outils/blob/master/src/dom/getScrollTop.js
[offset]: https://github.com/proYang/outils/blob/master/src/dom/offset.js
[scrollTo]: https://github.com/proYang/outils/blob/master/src/dom/scrollTo.js
[setScrollTop]: https://github.com/proYang/outils/blob/master/src/dom/setScrollTop.js
[debounce]: https://github.com/proYang/outils/blob/master/src/function/debounce.js
[throttle]: https://github.com/proYang/outils/blob/master/src/function/throttle.js
[getKeyName]: https://github.com/proYang/outils/blob/master/src/keycode/getKeyName.js
[deepClone]: https://github.com/proYang/outils/blob/master/src/object/deepClone.js
[isEmptyObject]: https://github.com/proYang/outils/blob/master/src/object/isEmptyObject.js
[randomColor]: https://github.com/proYang/outils/blob/master/src/random/randomColor.js
[randomNum]: https://github.com/proYang/outils/blob/master/src/random/randomNum.js
[isEmail]: https://github.com/proYang/outils/blob/master/src/regexp/isEmail.js
[isIdCard]: https://github.com/proYang/outils/blob/master/src/regexp/isIdCard.js
[isPhoneNum]: https://github.com/proYang/outils/blob/master/src/regexp/isPhoneNum.js
[isUrl]: https://github.com/proYang/outils/blob/master/src/regexp/isUrl.js
[digitUppercase]: https://github.com/proYang/outils/blob/master/src/string/digitUppercase.js
[isSupportWebP]: https://github.com/proYang/outils/blob/master/src/support/isSupportWebP.js
[formatPassTime]: https://github.com/proYang/outils/blob/master/src/time/formatPassTime.js
[formatRemainTime]: https://github.com/proYang/outils/blob/master/src/time/formatRemainTime.js
[parseQueryString]: https://github.com/proYang/outils/blob/master/src/url/parseQueryString.js
[stringfyQueryString]: https://github.com/proYang/outils/blob/master/src/url/stringfyQueryString.js
[outils]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils
[build.js]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils%2Fblob%2Fmaster%2Fscript%2Fbuild.js
[test.js]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils%2Fblob%2Fmaster%2Fscript%2Ftest.js
[power-assert]: https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpower-assert
[fork]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils%2F
[www.npmjs.com]: https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2F
[outils.min.js]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils%2Fblob%2Fmaster%2Fmin%2Foutils.min.js
[github Release]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils%2Freleases
[Github Issues]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FproYang%2Foutils%2Fissues