成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

打造自己的JavaScript武器庫(kù)

lavor / 3561人閱讀

摘要：自己打造一把趁手的武器，高效率完成前端業(yè)務(wù)代碼。這里，筆者已經(jīng)封裝并發(fā)布了自己的武器庫(kù)，如果你對(duì)本項(xiàng)目感興趣，歡迎本項(xiàng)目。當(dāng)然你也可以在本項(xiàng)目的基礎(chǔ)上封裝自己的武器庫(kù)。這樣才能打造出你自己的武器庫(kù)，瞬間提高你的單兵作戰(zhàn)開(kāi)發(fā)能力。

自己打造一把趁手的武器，高效率完成前端業(yè)務(wù)代碼。
前言

作為戰(zhàn)斗在業(yè)務(wù)一線的前端，要想少加班，就要想辦法提高工作效率。這里提一個(gè)小點(diǎn)，我們?cè)跇I(yè)務(wù)開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)重復(fù)用到日期格式化、url參數(shù)轉(zhuǎn)對(duì)象、瀏覽器類(lèi)型判斷、節(jié)流函數(shù)等一類(lèi)函數(shù)，這些工具類(lèi)函數(shù)，基本上在每個(gè)項(xiàng)目都會(huì)用到，為避免不同項(xiàng)目多次復(fù)制粘貼的麻煩，我們可以統(tǒng)一封裝，發(fā)布到npm，以提高開(kāi)發(fā)效率。

這里，筆者已經(jīng)封裝并發(fā)布了自己的武器庫(kù) outils，如果你對(duì)本項(xiàng)目感興趣，歡迎 star 本項(xiàng)目。當(dāng)然你也可以在本項(xiàng)目的基礎(chǔ)上封裝自己的武器庫(kù)。

常用函數(shù)匯總

這里先分類(lèi)整理下，之前項(xiàng)目中多次用到的工具函數(shù)。

1.Array 1.1 arrayEqual 
/**
 * 
 * @desc 判斷兩個(gè)數(shù)組是否相等
 * @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 判斷元素是否有某個(gè)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 根據(jù)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 根據(jù)name刪除cookie
 * @param  {String} name 
 */
function removeCookie(name) {
    // 設(shè)置已過(guò)期，系統(tǒng)會(huì)立刻刪除cookie
    setCookie(name, "1", -1);
}
3.3 setCookie 
/**
 * 
 * @desc  設(shè)置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 獲取瀏覽器類(lèi)型和版本
 * @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;
    // 根據(jù)關(guān)系進(jìn)行判斷
    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 獲取操作系統(tǒng)類(lèi)型
 * @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 獲取滾動(dòng)條距頂部的距離
 */
function getScrollTop() {
    return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
}
5.2 offset 
/**
 * 
 * @desc  獲取一個(gè)元素的距離文檔(document)的位置，類(lèi)似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}時(shí)間內(nèi)，滾動(dòng)條平滑滾動(dòng)到${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 設(shè)置滾動(dòng)條距頂部的距離
 */
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 根據(jù)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 深拷貝，支持常見(jiàn)類(lèi)型
 * @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 隨機(jī)生成顏色
 * @return {String} 
 */
function randomColor() {
    return "#" + ("00000" + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}
8.2 randomNum? 
/**
 * 
 * @desc 生成指定范圍隨機(jī)數(shù)
 * @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  判斷是否為身份證號(hào)
 * @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   判斷是否為手機(jī)號(hào)
 * @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   現(xiàn)金額轉(zhuǎn)大寫(xiě)
 * @param  {Number} n 
 * @return {String}
 */
function digitUppercase(n) {
    var fraction = ["角", "分"];
    var digit = [
        "零", "壹", "貳", "叁", "肆",
        "伍", "陸", "柒", "捌", "玖"
    ];
    var unit = [
        ["元", "萬(wàn)", "億"],
        ["", "拾", "佰", "仟"]
    ];
    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}距現(xiàn)在的已過(guò)時(shí)間
 * @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 + "個(gè)月前"
    if (day) return day + "天前"
    if (hour) return hour + "小時(shí)前"
    if (min) return min + "分鐘前"
    else return "剛剛"
}
12.2 formatRemainTime 
/**
 * 
 * @desc   格式化現(xiàn)在距${endTime}的剩余時(shí)間
 * @param  {Date} endTime  
 * @return {String}
 */
function formatRemainTime(endTime) {
    var startDate = new Date(); //開(kāi)始時(shí)間
    var endDate = new Date(endTime); //結(jié)束時(shí)間
    var t = endDate.getTime() - startDate.getTime(); //時(shí)間差
    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 + "小時(shí) " + m + "分鐘 " + s + "秒";
}
13.Url 13.1 parseQueryString 
/**
 * 
 * @desc   url參數(shù)轉(zhuǎn)對(duì)象
 * @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   對(duì)象序列化
 * @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   函數(shù)節(jié)流。
 * 適用于限制`resize`和`scroll`等函數(shù)的調(diào)用頻率
 *
 * @param  {Number}    delay          0 或者更大的毫秒數(shù)。 對(duì)于事件回調(diào)，大約100或250毫秒（或更高）的延遲是最有用的。
 * @param  {Boolean}   noTrailing     可選，默認(rèn)為false。
 *                                    如果noTrailing為true，當(dāng)節(jié)流函數(shù)被調(diào)用，每過(guò)`delay`毫秒`callback`也將執(zhí)行一次。
 *                                    如果noTrailing為false或者未傳入，`callback`將在最后一次調(diào)用節(jié)流函數(shù)后再執(zhí)行一次.
 *                                    （延遲`delay`毫秒之后，節(jié)流函數(shù)沒(méi)有被調(diào)用,內(nèi)部計(jì)數(shù)器會(huì)復(fù)位）
 * @param  {Function}  callback       延遲毫秒后執(zhí)行的函數(shù)。`this`上下文和所有參數(shù)都是按原樣傳遞的，
 *                                    執(zhí)行去節(jié)流功能時(shí)，調(diào)用`callback`。
 * @param  {Boolean}   debounceMode   如果`debounceMode`為true，`clear`在`delay`ms后執(zhí)行。
 *                                    如果debounceMode是false，`callback`在`delay` ms之后執(zhí)行。
 *
 * @return {Function}  新的節(jié)流函數(shù)
 */
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 函數(shù)防抖 
 * 與throttle不同的是，debounce保證一個(gè)函數(shù)在多少毫秒內(nèi)不再被觸發(fā)，只會(huì)執(zhí)行一次，
 * 要么在第一次調(diào)用return的防抖函數(shù)時(shí)執(zhí)行，要么在延遲指定毫秒后調(diào)用。
 * @example 適用場(chǎng)景：如在線編輯的自動(dòng)存儲(chǔ)防抖。
 * @param  {Number}   delay         0或者更大的毫秒數(shù)。 對(duì)于事件回調(diào)，大約100或250毫秒（或更高）的延遲是最有用的。
 * @param  {Boolean}  atBegin       可選，默認(rèn)為false。
 *                                  如果`atBegin`為false或未傳入，回調(diào)函數(shù)則在第一次調(diào)用return的防抖函數(shù)后延遲指定毫秒調(diào)用。
                                    如果`atBegin`為true，回調(diào)函數(shù)則在第一次調(diào)用return的防抖函數(shù)時(shí)直接執(zhí)行
 * @param  {Function} callback      延遲毫秒后執(zhí)行的函數(shù)。`this`上下文和所有參數(shù)都是按原樣傳遞的，
 *                                  執(zhí)行去抖動(dòng)功能時(shí)，，調(diào)用`callback`。
 *
 * @return {Function} 新的防抖函數(shù)。
 */
var throttle = require("./throttle");
function debounce(delay, atBegin, callback) {
    return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
};
封裝

除了對(duì)上面這些常用函數(shù)進(jìn)行封裝， 最重要的是支持合理化的引入，這里我們使用webpack統(tǒng)一打包成UMD 通用模塊規(guī)范，支持webpack、RequireJS、SeaJS等模塊加載器，亦或直接通過(guò)

注意： 本倉(cāng)庫(kù)代碼會(huì)持續(xù)更新，如果你需要不同版本的增量壓縮包或源碼，請(qǐng)到 github Release 頁(yè)面下載對(duì)應(yīng)版本號(hào)的代碼。

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()

當(dāng)然，你的開(kāi)發(fā)環(huán)境有babel編譯ES6語(yǔ)法的話，也可以這樣使用：

import getOS from "outils/getOS"
// 或
import { getOS } from "outils";
總結(jié)

這里只是簡(jiǎn)單封裝，發(fā)布到npm上，省去下次復(fù)制粘貼的功夫，或者直接Goole的時(shí)間。如果筆者的庫(kù)中，沒(méi)有你常用的函數(shù)，或者你有更好的建議，歡迎來(lái)本項(xiàng)目的 Github Issues 交流，如果覺(jué)得不錯(cuò)，歡迎 star 本項(xiàng)目。

當(dāng)然，更好的建議是 fork 本項(xiàng)目，或者直接新建自己的項(xiàng)目，添加自己 想要的 、常用的 、記不住的 函數(shù)，甚至是可以抽象出來(lái)的功能，封裝成自己順手、熟悉的庫(kù)。 這樣才能打造出你自己的武器庫(kù)，瞬間提高你的單兵作戰(zhàn)（開(kāi)發(fā)）能力。

工欲善其事必先利其器。有了屬于自己的這把利器，希望加班也會(huì)變成奢望。O(∩_∩)O哈哈~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/89745.html

相關(guān)文章

  • 架構(gòu)師之路

    摘要：因?yàn)橛脩?hù)不用在第一次進(jìn)入應(yīng)用時(shí)下載所有代碼，用戶(hù)能更快的看到頁(yè)面并與之交互。譯高階函數(shù)利用和來(lái)編寫(xiě)更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的，讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來(lái)用~~~喲吼吼,喲吼吼..... 如何無(wú)痛降低 if else 面...

    NikoManiac 評(píng)論0 收藏0

  • API

    摘要：是一個(gè)極度純凈的上傳插件，通過(guò)簡(jiǎn)單調(diào)整就可以融入到任何項(xiàng)目，支持多文件上傳上傳速率動(dòng)態(tài)控制真實(shí)進(jìn)度監(jiān)控分塊生成分塊上傳校驗(yàn)秒傳暫停取消等。 跨域?qū)W習(xí)筆記 前言: 當(dāng)一個(gè)資源，向與之所在服務(wù)器不同的域或端口請(qǐng)求另一個(gè)資源時(shí)，這個(gè)HTTP請(qǐng)求，我們認(rèn)為是跨域的請(qǐng)求。出于安全考慮，瀏覽器會(huì)限制腳本發(fā)起的跨域HTTP請(qǐng)求。 那天后端讓我把token放到http請(qǐng)求頭字段里，說(shuō)是為了和RN端統(tǒng)一...

    lsxiao 評(píng)論0 收藏0

  • JavasScript重難點(diǎn)知識(shí)

    摘要：忍者級(jí)別的函數(shù)操作對(duì)于什么是匿名函數(shù)，這里就不做過(guò)多介紹了。我們需要知道的是，對(duì)于而言，匿名函數(shù)是一個(gè)很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個(gè)供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果...

    forsigner 評(píng)論0 收藏0

  • 全棧工程師的武器——MEAN

    摘要：自年發(fā)布以來(lái)，走過(guò)了漫長(zhǎng)的道路。一下子，工程師認(rèn)為自己不只是前端開(kāi)發(fā)者了。這種趨勢(shì)被稱(chēng)為全棧的或純的解決方案?？梢哉J(rèn)為它是文檔結(jié)構(gòu)的數(shù)據(jù)庫(kù)，而不是由行列表組成的數(shù)據(jù)庫(kù)。也是高度可測(cè)試的，這是很重要的。 JavaScript自1995年發(fā)布以來(lái)，走過(guò)了漫長(zhǎng)的道路。已經(jīng)有了幾個(gè)主要版本的ECMAScript規(guī)范，單頁(yè)Web應(yīng)用程序也慢慢興起，還有支持客戶(hù)端的JavaScript框架。作為一...

    chanjarster 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<