1. 首页
  2. 前端进阶
  3. JavaScript

打造自己的 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) { // 设置已过期,系统会立刻删除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}, Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/) */ 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, '":"') + '"}') }

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

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 通用模块规范,支持webpackRequireJSSeaJS等模块加载器,亦或直接通过<script>标签引入。

但这样,还是不能让人满意。因为完整引入整个库,略显浪费,我们不可能用到所有的函数。那么,就支持按需引入

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

1.目录结构说明


│ .babelrc │ .gitignore │ .travis.yml │ LICENSE │ package.json │ README.md │ setCookie.js // 拷贝到根路径的函数模块,方便按需加载 │ setScrollTop.js │ stringfyQueryString.js │ ... │ ... │ ├─min// Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/) │ 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()
                }
            })
        })
    })// Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/)
    ......
    ......

3.书写测试用例

俗话说,不写测试用例的前端不是一个好程序员。那就不能怂,就是干。

但是因为时间关系,本项目暂时通过项目中的 test.js ,启动了一个koa静态服务器,来加载mocha网页端的测试页面,让笔者书写项目时,可以在本地对函数功能进行测试。
但是后续将使用travis-ci配合Github来做持续化构建,自动发布到npm。改用karmamochapower-assert做单元测试,使用Coverage测试覆盖率。这一部分,后续更新。

这里给大家推荐一个好用的断言库 power-assert ,这个库记住assert(value, [message])一个API就基本无敌,从此再也不用担心记不住断言库的API。

本项目的所有测试用例都在test目录下,大家可以作一定参考。

更新:单元测试,已使用karmamochapower-assert,使用Coverage测试覆盖率,并集成 travis-ci 配合Github来做持续化构建,可以参考本项目的travis配置文件 .travis.ymlkarma的配置文件 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中的nameversionauthor等信息,最后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()// Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/)

推荐使用方法


// 按需引入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哈哈~

作者:
链接:https://juejin.im/post/5a091afe6fb9a044ff30f402

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:打造自己的 JavaScript 武器库

链接:https://www.javascriptc.com/2799.html

« CSS3新特性之看完考虑转行系列
CSS知识点及技巧整理»
Flutter 中文教程资源

相关推荐

QR code