摘要:自己打造一把趁手的武器,高效率完成前端業務代碼。這里,筆者已經封裝并發布了自己的武器庫,如果你對本項目感興趣,歡迎本項目。當然你也可以在本項目的基礎上封裝自己的武器庫。這樣才能打造出你自己的武器庫,瞬間提高你的單兵作戰開發能力。
前言自己打造一把趁手的武器,高效率完成前端業務代碼。
作為戰斗在業務一線的前端,要想少加班,就要想辦法提高工作效率。這里提一個小點,我們在業務開發過程中,經常會重復用到日期格式化、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}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$)|(^[1-9]d{5}[1-9]d{3}((0d)|(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}([-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等模塊加載器,亦或直接通過標簽引入。
但這樣,還是不能讓人滿意。因為完整引入整個庫,略顯浪費,我們不可能用到所有的函數。那么,就支持按需引入吧
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.js2.構建腳本
這里主要說明一下項目中 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 }) + " ") resolve() console.log(chalk.cyan(" Build complete. ")) }) }) ...... ......
第二步,拷貝函數模塊至根目錄,先刪除根目錄中之前的函數模塊,后拷貝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. ")) 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本項目,然后再加入你自己的函數。
以筆者項目,舉個栗子:
在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中引入之前創建的測試用例腳本。
執行npm run test,看所有的測試用例是否通過。如果沒有問題,執行npm run build構建,之后提交到個人的 github 倉庫即可。
4.發布到npm在 www.npmjs.com 注冊賬號,修改本地package.json中的name、version、author等信息,最后npm publish就大功告成了。
注意:向npm發包,要把鏡像源切到 www.npmjs.com ,使用cnpm等第三方鏡像源會報錯。
直接下載min目錄下的 outils.min.js ,通過標簽引入。
注意: 本倉庫代碼會持續更新,如果你需要不同版本的增量壓縮包或源碼,請到 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://specialneedsforspecialkids.com/yun/89745.html
摘要:因為用戶不用在第一次進入應用時下載所有代碼,用戶能更快的看到頁面并與之交互。譯高階函數利用和來編寫更易維護的代碼高階函數可以幫助你增強你的,讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
摘要:忍者級別的函數操作對于什么是匿名函數,這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸 遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制,如果...
摘要:自年發布以來,走過了漫長的道路。一下子,工程師認為自己不只是前端開發者了。這種趨勢被稱為全棧的或純的解決方案。可以認為它是文檔結構的數據庫,而不是由行列表組成的數據庫。也是高度可測試的,這是很重要的。 JavaScript自1995年發布以來,走過了漫長的道路。已經有了幾個主要版本的ECMAScript規范,單頁Web應用程序也慢慢興起,還有支持客戶端的JavaScript框架。作為一...
閱讀 839·2021-10-25 09:48
閱讀 615·2021-08-23 09:45
閱讀 2508·2019-08-30 15:53
閱讀 1765·2019-08-30 12:45
閱讀 604·2019-08-29 17:21
閱讀 3419·2019-08-27 10:56
閱讀 2555·2019-08-26 13:48
閱讀 704·2019-08-26 12:24