JavaScript武器库
JavaScript武器库
前言
作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化
、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) {// 设置已过期,系统会立刻删除cookiesetCookie(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 : urlvar 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.cssmocha.jspower-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 本项目,或者直接新建自己的项目,添加自己 想要的 、常用的 、记不住的 函数,甚至是可以抽象出来的功能,封装成自己顺手、熟悉的库。 这样才能打造出你自己的武器库,瞬间提高你的单兵作战(开发)能力。
JavaScript武器库相关推荐
- 打造自己的 JavaScript 武器库
作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点,我们在业务开发过程中,经常会重复用到 日期格式化. url参数转对象. 浏览器类型判断. 节流函数等一类函数,这些工具类函 ...
- 打造自己的JavaScript武器库
原文地址:https://juejin.im/post/5a091afe6fb9a044ff30f402 API文档 Array arrayEqual 判断两个数组是否相等 Class ad ...
- 这些年掘金上的优质前端文章,篇篇经典,一次打包带走!
前言:近日发现掘金上有所有的热门文章的排行榜,但是仅仅只是排行,不利于收藏查阅.于是乎我就把热门文章全部爬下来了(站长看到别打我啊?),相信这些获得高赞文章质量不会差,爬完做了分类后不敢私藏,和大家一 ...
- 2017下半年掘金日报优质文章合集:前端篇
在掘金微信群里的小伙伴应该都有看每日小报吧!这是小饼每天为大家精选的优质掘金文章(大家都很爱学习,我已经跟不上了QAQ..)小饼已经被N位群友连续几周催着出小报合集了,2017年马上就要结束了,拖延症 ...
- 2017下半年优质文章合集:前端篇
2017年马上就要结束了,拖延症绝不拖到明年!这就给大家整理出来--2017下半年优质小报合集. CSS/页面布局 border属性的多方位应用和实现自适应三角形 BEM实战之扒一扒淘票票页面 一劳永 ...
- 【JavaScript】武器库
自己打造一把趁手的武器,高效率完成前端业务代码. 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化.url参数转对象. ...
- JavaScript 为什么能活到现在?
JavaScript能发展到现在的程度已经经历不少的坎坷,早产带来的某些缺陷是永久性的,因此浏览器才有禁用JavaScript的选项.甚至在jQuery时代有人问出这样的问题,jQuery与JavaS ...
- 【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
- 【JavaScript总结】JavaScript语法基础:JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
最新文章
- 【全网首发】京东AI三大NLP项目实战
- [密码学] 消息认证码构造方法
- 文本分类入门(番外篇)特征选择与特征权重计算的区别
- iOS开发之自定义弹出的键盘
- jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。
- 软件工程2017第二次作业
- c语言入门程序下载,简单实用——C语言入门程序练习
- [转]Mysql explain用法和性能分析
- Node.js ES6 模块化的基本语法-默认导出 与 默认导入
- 最受互联网争抢的web前端工程师
- Java集合--LinkedList
- 十步教你成为数据科学家!
- 11个优秀PHP开发框架-专门为开发人员准备
- Linux 内核经典面试题
- python手写字体程序,Python3生成手写体数字方法
- ThinkPHP6敏捷后台开发框架
- 简单的快速提取Fbank特征的方法
- flask中jinjia2模板引擎的使用详解3
- 随机误差与Allan方差的理解
- 阿里云服务器备案服务码申请流程及使用限制