自己打造一把趁手的武器，高效率完成前端業務程式碼。
前言
作為戰鬥在業務一線的前端，要想少加班，就要想辦法提高工作效率。這裡提一個小點，我們在業務開發過程中，經常會重複用到日期格式化、url引數轉物件、瀏覽器型別判斷、節流函式等一類函式，這些工具類函式，基本上在每個專案都會用到，為避免不同專案多次複製貼上的麻煩，我們可以統一封裝，釋出到npm，以提高開發效率。
這裡，筆者已經封裝併發布了自己的武器庫 outils，如果你對本專案感興趣，歡迎 star 本專案。當然你也可以在本專案的基礎上封裝自己的武器庫。
常用函式彙總
這裡先分類整理下，之前專案中多次用到的工具函式。
1.Array
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * * @desc 判斷兩個陣列是否相等 * @param {Array} arr1 * @param {Array} arr2 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * * @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
|
1 2 3 4 5 6 7 8 9 10 |
/** * * @desc 判斷元素是否有某個class * @param {HTMLElement} ele * @param {String} cls * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Boolean} */ function hasClass(ele, cls) { return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className); } |
2.3 removeClass
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * * @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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * * @desc 根據name讀取cookie * @param {String} name * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 |
var setCookie = require('./setCookie'); /** * * @desc 根據name刪除cookie * @param {String} name */ function removeCookie(name) { // 設定已過期，系統會立刻刪除cookie setCookie(name, '1', -1); } |
3.3 setCookie
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * * @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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * * @desc 獲取瀏覽器型別和版本 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * * @desc 獲取作業系統型別 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 |
/** * * @desc 獲取滾動條距頂部的距離 */ function getScrollTop() { return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; } |
5.2 offset
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * * @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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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 Math.abs(diff)) { setScrollTop(getScrollTop() + diff); return; } setScrollTop(getScrollTop() + step); if (diff > 0 && getScrollTop() >= to || diff |
5.4 setScrollTop
|
1 2 3 4 5 6 7 8 |
/** * * @desc 設定滾動條距頂部的距離 */ function setScrollTop(value) { window.scrollTo(0, value); return value; } |
6.Keycode
6.1 getKeyName
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
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 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {String} */ function getKeyName(keycode) { if (keyCodeMap[keycode]) { return keyCodeMap[keycode]; } else { console.log('Unknow Key(Key Code:' + keycode + ')'); return ''; } }; |
7.Object
7.1 deepClone
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * @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 |
7.2 isEmptyObject
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * * @desc 判斷`obj`是否為空 * @param {Object} obj * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Boolean} */ function isEmptyObject(obj) { if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return false return !Object.keys(obj).length } |
8.Random
8.1 randomColor
|
1 2 3 4 5 6 7 |
/** * * @desc 隨機生成顏色 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {String} */ function randomColor() { return '#' + ('00000' + (Math.random() * 0x1000000 |
8.2 randomNum
|
1 2 3 4 5 6 7 8 9 10 |
/** * * @desc 生成指定範圍隨機數 * @param {Number} min * @param {Number} max * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Number} */ function randomNum(min, max) { return Math.floor(min + Math.random() * (max - min)); } |
9.Regexp
9.1 isEmail
|
1 2 3 4 5 6 7 8 9 |
/** * * @desc 判斷是否為郵箱地址 * @param {String} str * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Boolean} */ function isEmail(str) { return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str); } |
9.2 isIdCard
|
1 2 3 4 5 6 7 8 9 |
/** * * @desc 判斷是否為身份證號 * @param {String|Number} str * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 |
/** * * @desc 判斷是否為手機號 * @param {String|Number} str * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 |
/** * * @desc 判斷是否為URL地址 * @param {String} str * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/** * * @desc 現金額轉大寫 * @param {Number} n * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {String} */ function digitUppercase(n) { var fraction = ['角', '分']; var digit = [ '零', '壹', '貳', '叄', '肆', '伍', '陸', '柒', '捌', '玖' ]; var unit = [ ['元', '萬', '億'], ['', '拾', '佰', '仟'] ]; var head = n 0; i++) { var p = ''; for (var j = 0; j 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
|
1 2 3 4 5 6 7 8 |
/** * * @desc 判斷瀏覽器是否支援webP格式圖片 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Boolean} */ function isSupportWebP() { return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0; } |
12.Time
12.1 formatPassTime
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * @desc 格式化${startTime}距現在的已過時間 * @param {Date} startTime * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * * @desc 格式化現在距${endTime}的剩餘時間 * @param {Date} endTime * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * * @desc url引數轉物件 * @param {String} url default: window.location.href * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * * @desc 物件序列化 * @param {Object} obj * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/** * @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之後執行。 * * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * @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`。 * * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {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等模組載入器，亦或直接通過標籤引入。
但這樣，還是不能讓人滿意。因為完整引入整個庫，略顯浪費，我們不可能用到所有的函式。那麼，就支援按需引入吧
1.目錄結構說明
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
│ .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目錄中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
...... ...... // 刪除舊的全量壓縮包 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/')即可，縮短引入的路徑，也算是提高點效率。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 替換模組檔案 ...... ...... // 先刪除根目錄中之前的函式模組 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檔案）。
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * * @desc 判斷是否NaN * @param {Any} value * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Boolean} */ function isNaN(value) { return value !== value; }; modules.export = isNaN |
然後記得在src/index.js檔案中暴露isNaN函式
2.單元測試
在test檔案新建測試用例
|
1 2 3 4 5 6 7 8 |
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 ，通過標籤引入。
|
1 2 3 4 |
<script src="outils.min.js"></script> <script> var OS = outils.getOS() </script> |
注意： 本倉庫程式碼會持續更新，如果你需要不同版本的增量壓縮包或原始碼，請到 github Release 頁面下載對應版本號的程式碼。
2.Webpack、RequireJS、SeaJS等模組載入器
先使用npm安裝outils。
|
1 |
$ npm install --save-dev outils |
|
1 2 3 |
// 完整引入 const outils = require('outils') const OS = outils.getOS() |
推薦使用方法
|
1 2 3 |
// 按需引入require('outils/') const getOS = require('outils/getOS') const OS = getOS() |
當然，你的開發環境有babel編譯ES6語法的話，也可以這樣使用：
|
1 2 3 |
import getOS from 'outils/getOS' // 或 import { getOS } from "outils"; |
總結
這裡只是簡單封裝，釋出到npm上，省去下次複製貼上的功夫，或者直接Goole的時間。如果筆者的庫中，沒有你常用的函式，或者你有更好的建議，歡迎來本專案的 Github Issues 交流，如果覺得不錯，歡迎 star 本專案。
當然，更好的建議是 fork 本專案，或者直接新建自己的專案，新增自己 想要的 、常用的 、記不住的 函式，甚至是可以抽象出來的功能，封裝成自己順手、熟悉的庫。 這樣才能打造出你自己的武器庫，瞬間提高你的單兵作戰（開發）能力。
工欲善其事必先利其器。有了屬於自己的這把利器，希望加班也會變成奢望。O(∩_∩)O哈哈~