前言
作为战斗在业务一线的前端, 要想少加班, 就要想办法提高工作效率. 这里提一个小点, 我们在业务开发过程中, 经常会重复用到日期格式化, url 参数转对象, 浏览器类型判断, 节流函数等一类函数, 这些工具类函数, 基本上在每个项目都会用到, 为避免不同项目多次复制粘贴的麻烦, 我们可以统一封装, 发布到 npm, 以提高开发效率.
这里, 笔者已经封装并发布了自己的武器库 outils, 如果你对本项目感兴趣, 欢迎 star 本项目. 当然你也可以在本项目的基础上封装自己的武器库.
常用函数汇总
这里先分类整理下, 之前项目中多次用到的工具函数.
- 1.Array
- 1.1 arrayEqual
- /**
- *
- * @desc 判断两个数组是否相等
- * @param {Array} arr1
- * @param {Array} arr2
- * @return {Boolean}
- */
- function arrayEqual(arr1, arr2) {
- if (arr1 === arr2) return true;
- if (arr1.length != arr2.length) return false;
- for (var i = 0; i <arr1.length; ++i) {
- if (arr1[i] !== arr2[i]) return false;
- }
- return true;
- }
- 2.Class
- 2.1 addClass
- /**
- *
- * @desc 为元素添加 class
- * @param {HTMLElement} ele
- * @param {String} cls
- */
- var hasClass = require('./hasClass');
- function addClass(ele, cls) {
- if (!hasClass(ele, cls)) {
- ele.className += ' ' + cls;
- }
- }
- 2.2 hasClass
- /**
- *
- * @desc 判断元素是否有某个 class
- * @param {HTMLElement} ele
- * @param {String} cls
- * @return {Boolean}
- */
- function hasClass(ele, cls) {
- return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
- }
- 2.3 removeClass
- /**
- *
- * @desc 为元素移除 class
- * @param {HTMLElement} ele
- * @param {String} cls
- */
- var hasClass = require('./hasClass');
- function removeClass(ele, cls) {
- if (hasClass(ele, cls)) {
- var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
- ele.className = ele.className.replace(reg, ' ');
- }
- }
- 3.Cookie
- 3.1 getCookie
- /**
- *
- * @desc 根据 name 读取 cookie
- * @param {String} name
- * @return {String}
- */
- function getCookie(name) {
- var arr = document.cookie.replace(/\s/g, "").split(';');
- for (var i = 0; i < arr.length; i++) {
- var tempArr = arr[i].split('=');
- if (tempArr[0] == name) {
- return decodeURIComponent(tempArr[1]);
- }
- }
- return '';
- }
- 3.2 removeCookie
- var setCookie = require('./setCookie');
- /**
- *
- * @desc 根据 name 删除 cookie
- * @param {String} name
- */
- function removeCookie(name) {
- // 设置已过期, 系统会立刻删除 cookie
- setCookie(name, '1', -1);
- }
- 3.3 setCookie
- /**
- *
- * @desc 设置 Cookie
- * @param {String} name
- * @param {String} value
- * @param {Number} days
- */
- function setCookie(name, value, days) {
- var date = new Date();
- date.setDate(date.getDate() + days);
- document.cookie = name + '=' + value + ';expires=' + date;
- }
- 4.Device
- 4.1 getExplore
- /**
- *
- * @desc 获取浏览器类型和版本
- * @return {String}
- */
- function getExplore() {
- var sys = {},
- ua = navigator.userAgent.toLowerCase(),
- s;
- (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
- (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
- (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
- (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
- (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
- (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
- (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
- // 根据关系进行判断
- if (sys.ie) return ('IE:' + sys.ie)
- if (sys.edge) return ('EDGE:' + sys.edge)
- if (sys.firefox) return ('Firefox:' + sys.firefox)
- if (sys.chrome) return ('Chrome:' + sys.chrome)
- if (sys.opera) return ('Opera:' + sys.opera)
- if (sys.safari) return ('Safari:' + sys.safari)
- return 'Unkonwn'
- }
- 4.2 getOS
- /**
- *
- * @desc 获取操作系统类型
- * @return {String}
- */
- function getOS() {
- var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
- var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
- var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';
- if (/mac/i.test(appVersion)) return 'MacOSX'
- if (/win/i.test(appVersion)) return 'windows'
- if (/linux/i.test(appVersion)) return 'linux'
- if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) 'ios'
- if (/android/i.test(userAgent)) return 'android'
- if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
- }
- 5.Dom
- 5.1 getScrollTop
- /**
- *
- * @desc 获取滚动条距顶部的距离
- */
- function getScrollTop() {
- return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
- }
- 5.2 offset
- /**
- *
- * @desc 获取一个元素的距离文档 (document) 的位置, 类似 jQ 中的 offset()
- * @param {HTMLElement} ele
- * @returns { {left: number, top: number} }
- */
- function offset(ele) {
- var pos = {
- left: 0,
- top: 0
- };
- while (ele) {
- pos.left += ele.offsetLeft;
- pos.top += ele.offsetTop;
- ele = ele.offsetParent;
- };
- return pos;
- }
- 5.3 scrollTo
- var getScrollTop = require('./getScrollTop');
- var setScrollTop = require('./setScrollTop');
- var requestAnimFrame = (function () {
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- function (callback) {
- window.setTimeout(callback, 1000 / 60);
- };
- })();
- /**
- *
- * @desc 在 ${duration}时间内, 滚动条平滑滚动到 ${to}指定位置
- * @param {Number} to
- * @param {Number} duration
- */
- function scrollTo(to, duration) {
- if (duration < 0) {
- setScrollTop(to);
- return
- }
- var diff = to - getScrollTop();
- if (diff === 0) return
- var step = diff / duration * 10;
- requestAnimationFrame(
- function () {
- if (Math.abs(step)> Math.abs(diff)) {
- setScrollTop(getScrollTop() + diff);
- return;
- }
- setScrollTop(getScrollTop() + step);
- if (diff> 0 && getScrollTop()>= to || diff <0 && getScrollTop() <= to) {
- return;
- }
- scrollTo(to, duration - 16);
- });
- }
- 5.4 setScrollTop
- /**
- *
- * @desc 设置滚动条距顶部的距离
- */
- function setScrollTop(value) {
- window.scrollTo(0, value);
- return value;
- }
- 6.Keycode
- 6.1 getKeyName
- var keyCodeMap = {
- 8: 'Backspace',
- 9: 'Tab',
- 13: 'Enter',
- 16: 'Shift',
- 17: 'Ctrl',
- 18: 'Alt',
- 19: 'Pause',
- 20: 'Caps Lock',
- 27: 'Escape',
- 32: 'Space',
- 33: 'Page Up',
- 34: 'Page Down',
- 35: 'End',
- 36: 'Home',
- 37: 'Left',
- 38: 'Up',
- 39: 'Right',
- 40: 'Down',
- 42: 'Print Screen',
- 45: 'Insert',
- 46: 'Delete',
- 48: '0',
- 49: '1',
- 50: '2',
- 51: '3',
- 52: '4',
- 53: '5',
- 54: '6',
- 55: '7',
- 56: '8',
- 57: '9',
- 65: 'A',
- 66: 'B',
- 67: 'C',
- 68: 'D',
- 69: 'E',
- 70: 'F',
- 71: 'G',
- 72: 'H',
- 73: 'I',
- 74: 'J',
- 75: 'K',
- 76: 'L',
- 77: 'M',
- 78: 'N',
- 79: 'O',
- 80: 'P',
- 81: 'Q',
- 82: 'R',
- 83: 'S',
- 84: 'T',
- 85: 'U',
- 86: 'V',
- 87: 'W',
- 88: 'X',
- 89: 'Y',
- 90: 'Z',
- 91: 'Windows',
- 93: 'Right Click',
- 96: 'Numpad 0',
- 97: 'Numpad 1',
- 98: 'Numpad 2',
- 99: 'Numpad 3',
- 100: 'Numpad 4',
- 101: 'Numpad 5',
- 102: 'Numpad 6',
- 103: 'Numpad 7',
- 104: 'Numpad 8',
- 105: 'Numpad 9',
- 106: 'Numpad *',
- 107: 'Numpad +',
- 109: 'Numpad -',
- 110: 'Numpad .',
- 111: 'Numpad /',
- 112: 'F1',
- 113: 'F2',
- 114: 'F3',
- 115: 'F4',
- 116: 'F5',
- 117: 'F6',
- 118: 'F7',
- 119: 'F8',
- 120: 'F9',
- 121: 'F10',
- 122: 'F11',
- 123: 'F12',
- 144: 'Num Lock',
- 145: 'Scroll Lock',
- 182: 'My Computer',
- 183: 'My Calculator',
- 186: ';',
- 187: '=',
- 188: ',',
- 189: '-',
- 190: '.',
- 191: '/',
- 192: '`',
- 219: '[',
- 220: '\\',
- 221: ']',
- 222: '\''
- };
- /**
- * @desc 根据 keycode 获得键名
- * @param {Number} keycode
- * @return {String}
- */
- function getKeyName(keycode) {
- if (keyCodeMap[keycode]) {
- return keyCodeMap[keycode];
- } else {
- console.log('Unknow Key(Key Code:' + keycode + ')');
- return '';
- }
- };
- 7.Object
- 7.1 deepClone
- /**
- * @desc 深拷贝, 支持常见类型
- * @param {Any} values
- */
- function deepClone(values) {
- var copy;
- // Handle the 3 simple types, and null or undefined
- if (null == values || "object" != typeof values) return values;
- // Handle Date
- if (values instanceof Date) {
- copy = new Date();
- copy.setTime(values.getTime());
- return copy;
- }
- // Handle Array
- if (values instanceof Array) {
- copy = [];
- for (var i = 0, len = values.length; i < len; i++) {
- copy[i] = deepClone(values[i]);
- }
- return copy;
- }
- // Handle Object
- if (values instanceof Object) {
- copy = {};
- for (var attr in values) {
- if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
- }
- return copy;
- }
- throw new Error("Unable to copy values! Its type isn't supported.");
- }
- 7.2 isEmptyObject
- /**
- *
- * @desc 判断 `obj` 是否为空
- * @param {Object} obj
- * @return {Boolean}
- */
- function isEmptyObject(obj) {
- if (!obj || typeof obj !== 'object' || Array.isArray(obj))
- return false
- return !Object.keys(obj).length
- }
- 8.Random
- 8.1 randomColor
- /**
- *
- * @desc 随机生成颜色
- * @return {String}
- */
- function randomColor() {
- return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
- }
- 8.2 randomNum
- /**
- *
- * @desc 生成指定范围随机数
- * @param {Number} min
- * @param {Number} max
- * @return {Number}
- */
- function randomNum(min, max) {
- return Math.floor(min + Math.random() * (max - min));
- }
- 9.Regexp
- 9.1 isEmail
- /**
- *
- * @desc 判断是否为邮箱地址
- * @param {String} str
- * @return {Boolean}
- */
- function isEmail(str) {
- return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
- }
- 9.2 isIdCard
- /**
- *
- * @desc 判断是否为身份证号
- * @param {String|Number} str
- * @return {Boolean}
- */
- function isIdCard(str) {
- return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str)
- }
- 9.3 isPhoneNum
- /**
- *
- * @desc 判断是否为手机号
- * @param {String|Number} str
- * @return {Boolean}
- */
- function isPhoneNum(str) {
- return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
- }
- 9.4 isUrl
- /**
- *
- * @desc 判断是否为 URL 地址
- * @param {String} str
- * @return {Boolean}
- */
- function isUrl(str) {
- return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(str);
- }
- 10.String
- 10.1 digitUppercase
- /**
- *
- * @desc 现金额转大写
- * @param {Number} n
- * @return {String}
- */
- function digitUppercase(n) {
- var fraction = ['角', '分'];
- var digit = [
- '零', '壹', '贰', '叁', '肆',
- '伍', '陆', '柒', '捌', '玖'
- ];
- var unit = [
- ['元', '万', '亿'],
- ['','拾','佰','仟']
- ];
- var head = n < 0 ? '欠' : '';
- n = Math.abs(n);
- var s = '';
- for (var i = 0; i < fraction.length; i++) {
- s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/ 零./, '');
- }
- s = s || '整';
- n = Math.floor(n);
- for (var i = 0; i < unit[0].length && n> 0; i++) {
- var p = '';
- for (var j = 0; j <unit[1].length && n> 0; j++) {
- p = digit[n % 10] + unit[1][j] + p;
- n = Math.floor(n / 10);
- }
s = p.replace(/(零.)* 零 $/, '').replace(/^$/,'零') + unit[0][i] + s;
}
return head + s.replace(/(零.)* 零元 /, '元')
- .replace(/(零.)+/g, '零')
- .replace(/^ 整 $/, '零元整');
- };
- 11.Support
- 11.1 isSupportWebP
- /**
- *
- * @desc 判断浏览器是否支持 webP 格式图片
- * @return {Boolean}
- */
- function isSupportWebP() {
- return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
- }
- 12.Time
- 12.1 formatPassTime
- /**
- * @desc 格式化 ${startTime}距现在的已过时间
- * @param {Date} startTime
- * @return {String}
- */
- function formatPassTime(startTime) {
- var currentTime = Date.parse(new Date()),
- time = currentTime - startTime,
- day = parseInt(time / (1000 * 60 * 60 * 24)),
- hour = parseInt(time / (1000 * 60 * 60)),
- min = parseInt(time / (1000 * 60)),
- month = parseInt(day / 30),
- year = parseInt(month / 12);
- if (year) return year + "年前"
- if (month) return month + "个月前"
- if (day) return day + "天前"
- if (hour) return hour + "小时前"
- if (min) return min + "分钟前"
- else return '刚刚'
- }
- 12.2 formatRemainTime
- /**
- *
- * @desc 格式化现在距 ${endTime}的剩余时间
- * @param {Date} endTime
- * @return {String}
- */
- function formatRemainTime(endTime) {
- var startDate = new Date(); // 开始时间
- var endDate = new Date(endTime); // 结束时间
- var t = endDate.getTime() - startDate.getTime(); // 时间差
- var d = 0,
- h = 0,
- m = 0,
- s = 0;
- if (t>= 0) {
- d = Math.floor(t / 1000 / 3600 / 24);
- h = Math.floor(t / 1000 / 60 / 60 % 24);
- m = Math.floor(t / 1000 / 60 % 60);
- s = Math.floor(t / 1000 % 60);
- }
- return d + "天" + h + "小时" + m + "分钟" + s + "秒";
- }
- 13.Url
- 13.1 parseQueryString
- /**
- *
- * @desc url 参数转对象
- * @param {String} url default: window.location.href
- * @return {Object}
- */
- function parseQueryString(url) {
- url = url == null ? window.location.href : url
- var search = url.substring(url.lastIndexOf('?') + 1)
- if (!search) {
- return {}
- }
- return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"') +'"}')
- }
- 13.2 stringfyQueryString
- /**
- *
- * @desc 对象序列化
- * @param {Object} obj
- * @return {String}
- */
- function stringfyQueryString(obj) {
- if (!obj) return '';
- var pairs = [];
- for (var key in obj) {
- var value = obj[key];
- if (value instanceof Array) {
- for (var i = 0; i <value.length; ++i) {
- pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
- }
- continue;
- }
- pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
- }
- return pairs.join('&');
- }
- 14.Function
- 14.1 throttle
- /**
- * @desc 函数节流.
- * 适用于限制 `resize` 和 `scroll` 等函数的调用频率
- *
- * @param {Number} delay 0 或者更大的毫秒数. 对于事件回调, 大约 100 或 250 毫秒 (或更高) 的延迟是最有用的.
- * @param {Boolean} noTrailing 可选, 默认为 false.
- * 如果 noTrailing 为 true, 当节流函数被调用, 每过 `delay` 毫秒 `callback` 也将执行一次.
- * 如果 noTrailing 为 false 或者未传入,`callback` 将在最后一次调用节流函数后再执行一次.
- * (延迟 `delay` 毫秒之后, 节流函数没有被调用, 内部计数器会复位)
- * @param {Function} callback 延迟毫秒后执行的函数.`this` 上下文和所有参数都是按原样传递的,
- * 执行去节流功能时, 调用 `callback`.
- * @param {Boolean} debounceMode 如果 `debounceMode` 为 true,`clear` 在 `delay`ms 后执行.
- * 如果 debounceMode 是 false,`callback` 在 `delay` ms 之后执行.
- *
- * @return {Function} 新的节流函数
- */
- function throttle(delay, noTrailing, callback, debounceMode) {
- // After wrapper has stopped being called, this timeout ensures that
- // `callback` is executed at the proper times in `throttle` and `end`
- // debounce modes.
- var timeoutID;
- // Keep track of the last time `callback` was executed.
- var lastExec = 0;
- // `noTrailing` defaults to falsy.
- if (typeof noTrailing !== 'boolean') {
- debounceMode = callback;
- callback = noTrailing;
- noTrailing = undefined;
- }
- // The `wrapper` function encapsulates all of the throttling / debouncing
- // functionality and when executed will limit the rate at which `callback`
- // is executed.
- function wrapper() {
- var self = this;
- var elapsed = Number(new Date()) - lastExec;
- var args = arguments;
- // Execute `callback` and update the `lastExec` timestamp.
- function exec() {
- lastExec = Number(new Date());
- callback.apply(self, args);
- }
- // If `debounceMode` is true (at begin) this is used to clear the flag
- // to allow future `callback` executions.
- function clear() {
- timeoutID = undefined;
- }
- if (debounceMode && !timeoutID) {
- // Since `wrapper` is being called for the first time and
- // `debounceMode` is true (at begin), execute `callback`.
- exec();
- }
- // Clear any existing timeout.
- if (timeoutID) {
- clearTimeout(timeoutID);
- }
- if (debounceMode === undefined && elapsed> delay) {
- // In throttle mode, if `delay` time has been exceeded, execute
- // `callback`.
- exec();
- } else if (noTrailing !== true) {
- // In trailing throttle mode, since `delay` time has not been
- // exceeded, schedule `callback` to execute `delay` ms after most
- // recent execution.
- //
- // If `debounceMode` is true (at begin), schedule `clear` to execute
- // after `delay` ms.
- //
- // If `debounceMode` is false (at end), schedule `callback` to
- // execute after `delay` ms.
- timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
- }
- }
- // Return the wrapper function.
- return wrapper;
- };
- 14.2 debounce
- /**
- * @desc 函数防抖
- * 与 throttle 不同的是, debounce 保证一个函数在多少毫秒内不再被触发, 只会执行一次,
- * 要么在第一次调用 return 的防抖函数时执行, 要么在延迟指定毫秒后调用.
- * @example 适用场景: 如在线编辑的自动存储防抖.
- * @param {Number} delay 0 或者更大的毫秒数. 对于事件回调, 大约 100 或 250 毫秒 (或更高) 的延迟是最有用的.
- * @param {Boolean} atBegin 可选, 默认为 false.
- * 如果 `atBegin` 为 false 或未传入, 回调函数则在第一次调用 return 的防抖函数后延迟指定毫秒调用.
- 如果 `atBegin` 为 true, 回调函数则在第一次调用 return 的防抖函数时直接执行
- * @param {Function} callback 延迟毫秒后执行的函数.`this` 上下文和所有参数都是按原样传递的,
- * 执行去抖动功能时,, 调用 `callback`.
- *
- * @return {Function} 新的防抖函数.
- */
- var throttle = require('./throttle');
- function debounce(delay, atBegin, callback) {
- return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
- };
封装
除了对上面这些常用函数进行封装, 最重要的是支持合理化的引入, 这里我们使用 webpack 统一打包成 UMD 通用模块规范, 支持 webpack,RequireJS,SeaJS 等模块加载器, 亦或直接通过 < script > 标签引入.
但这样, 还是不能让人满意. 因为完整引入整个库, 略显浪费, 我们不可能用到所有的函数. 那么, 就支持按需引入吧
1. 目录结构说明
- .babelrc
- .gitignore
- .travis.yml
- LICENSE
- package.json
- README.md
- setCookie.js // 拷贝到根路径的函数模块, 方便按需加载
- setScrollTop.js
- stringfyQueryString.js
- ...
- ...
- min
- outils.min.js // 所有函数统一打包生成的全量压缩包
- script // 本项目开发脚本目录
- build.js // 打包构建脚本
- test.js // 测试脚本
- webpack.conf.js // webpack 打包配置文件
- src // 源码目录
- index.js // webpack 入口文件
- array
- class
- cookie
- device
- dom
- keycode
- object
- random
- regexp
- string
- support
- time
- url
- test // 测试用例目录
- array.test.js
- class.test.js
- cookie.test.js
- device.test.js
- dom.test.js
- index.html
- keycode.test.js
- object.test.js
- random.test.js
- regexp.test.js
- string.test.js
- support.test.js
- time.test.js
- url.test.js
- _lib // 测试所用到的第三方库
- mocha.css
- mocha.js
- power-assert.js
2. 构建脚本
这里主要说明一下项目中 build.js 的构建过程第一步, 构建全量压缩包, 先删除 min 目录中之前的 outils.min.js, 后通过 webpack 打包并保存新的压缩包至 min 目录中:
- ......
- ......
- // 删除旧的全量压缩包
- rm(path.resolve(rootPath, 'min', `${pkg.name}.min.js`), err => {
- if (err) throw (err)
- webpack(config, function (err, stats) {
- if (err) throw (err)
- building.stop()
- process.stdout.write(stats.toString({
- colors: true,
- modules: false,
- children: false,
- chunks: false,
- chunkModules: false
- }) + '\n\n')
- resolve()
- console.log(chalk.cyan('Build complete.\n'))
- })
- })
- ......
- ......
第二步, 拷贝函数模块至根目录, 先删除根目录中之前的函数模块, 后拷贝 src 下面一层目录的所有 js 文件至根目录. 这么做的目的是, 拷贝到根路径, 在引入的时候, 直接 require('outils/<方法名>')即可, 缩短引入的路径, 也算是提高点效率.
- // 替换模块文件
- ......
- ......
- // 先删除根目录中之前的函数模块
- rm('*.js', err => {
- if (err) throw (err)
- let folderList = fs.readdirSync(path.resolve(rootPath, 'src'))
- folderList.forEach((item, index) => {
- // 拷贝 `src` 下面一层目录的所有 `js` 文件至根目录
- copy(`src/${item}/*.js`, rootPath, function (err, files) {
- if (err) throw err;
- if (index === folderList.length - 1) {
- console.log(chalk.cyan('Copy complete.\n'))
- copying.stop()
- }
- })
- })
- })
- ......
- ......
3. 书写测试用例
俗话说, 不写测试用例的前端不是一个好程序员. 那就不能怂, 就是干.
但是因为时间关系, 本项目暂时通过项目中的 test.js , 启动了一个 koa 静态服务器, 来加载 mocha 网页端的测试页面, 让笔者书写项目时, 可以在本地对函数功能进行测试. 但是后续将使用 travis-ci 配合 Github 来做持续化构建, 自动发布到 npm. 改用 karma,mocha,power-assert 做单元测试, 使用 Coverage 测试覆盖率. 这一部分, 后续更新.
这里给大家推荐一个好用的断言库 power-assert , 这个库记住 assert(value, [message])一个 API 就基本无敌, 从此再也不用担心记不住断言库的 API.
本项目的所有测试用例都在 test 目录下, 大家可以作一定参考.
更新: 单元测试, 已使用 karma,mocha,power-assert, 使用 Coverage 测试覆盖率, 并集成 travis-ci 配合 Github 来做持续化构建, 可以参考本项目的 travis 配置文件 .travis.yml 和 karma 的配置文件 karma.conf.js .
发布
首先放到 Github 托管一下, 当然你也可以直接 fork 本项目, 然后再加入你自己的函数. 以笔者项目, 举个栗子:
1. 添加自己的函数
在 src 目录下, 新建分类目录或者选择一个分类, 在子文件夹中添加函数模块文件(建议一个小功能保存为一个 JS 文件).
- /**
- *
- * @desc 判断是否 NaN
- * @param {Any} value
- * @return {Boolean}
- */
- function isNaN(value) {
- return value !== value;
- };
- modules.export = isNaN
然后记得在 src/index.js 文件中暴露 isNaN 函数
2. 单元测试
在 test 文件新建测试用例
- describe('#isNaN()', function () {
- it(`outils.isNaN(NaN) should return true`, function () {
- assert(outils.isNaN(NaN))
- })
- it(`outils.isNaN('value') should return false`, function () {
- assert.notEqual(outils.isNaN(NaN))
- })
- })
然后记得在 test/index.html 中引入之前创建的测试用例脚本.
3. 测试并打包
执行 npm run test, 看所有的测试用例是否通过. 如果没有问题, 执行 npm run build 构建, 之后提交到个人的 github 仓库即可.
4. 发布到 npm
在 www.npmjs.com 注册账号, 修改本地 package.json 中的 name,version,author 等信息, 最后 npm publish 就大功告成了. 注意: 向 npm 发包, 要把镜像源切到 www.npmjs.com , 使用 cnpm 等第三方镜像源会报错.
使用
1. 浏览器
直接下载 min 目录下的 outils.min.js , 通过 < script > 标签引入.
- <script src="outils.min.js"></script>
- <script>
- var OS = outils.getOS()
- </script>
注意: 本仓库代码会持续更新, 如果你需要不同版本的增量压缩包或源码, 请到 github Release 页面下载对应版本号的代码.
2.Webpack,RequireJS,SeaJS 等模块加载器
先使用 npm 安装 outils.
- $ npm install --save-dev outils
- // 完整引入
- const outils = require('outils')
- const OS = outils.getOS()
推荐使用方法
- // 按需引入 require('outils/<方法名>')
- const getOS = require('outils/getOS')
- const OS = getOS()
当然, 你的开发环境有 babel 编译 ES6 语法的话, 也可以这样使用:
- import getOS from 'outils/getOS'
- // 或
- import { getOS } from "outils";
总结
这里只是简单封装, 发布到 npm 上, 省去下次复制粘贴的功夫, 或者直接 Goole 的时间. 如果笔者的库中, 没有你常用的函数, 或者你有更好的建议, 欢迎来本项目的 Github Issues 交流, 如果觉得不错, 欢迎 star 本项目.
当然, 更好的建议是 fork 本项目, 或者直接新建自己的项目, 添加自己 想要的 , 常用的 , 记不住的 函数, 甚至是可以抽象出来的功能, 封装成自己顺手, 熟悉的库. 这样才能打造出你自己的武器库, 瞬间提高你的单兵作战 (开发) 能力.
工欲善其事必先利其器. 有了属于自己的这把利器, 希望加班也会变成奢望. O(_)O 哈哈~
来源: http://www.bubuko.com/infodetail-2748330.html