自己打造一把趁手的武器，高效率完成前端業務程式碼。

前言

作為戰鬥在業務一線的前端，要想少加班，就要想辦法提高工作效率。這裡提一個小點，我們在業務開發過程中，經常會重複用到日期格式化、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}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$)|(^[1-9]d{5}[1-9]d{3}((0d)|(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}([-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
            }) + `

`)
            resolve()
            console.log(chalk.cyan(`  Build complete.
`))
        })
    })
    ......
    ......複製程式碼

第二步，拷貝函式模組至根目錄，先刪除根目錄中之前的函式模組，後拷貝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.
`))
                    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哈哈~