打造自己的JavaScript武器库(转)
作者: slaneyang
https://segmentfault.com/a/1190000011966867
前言
作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化
、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哈哈~