威尼斯国际线上娱乐想提高工作效率?必少了不它

作为优秀的,战斗在业务一线的前端攻城狮,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到npm,以提高开发效率。

前几天和大家分享了三种提高工作效率的方法,包括“一、上班时间不聊闲篇儿”、“二、集中时间回复邮件和微信”以及“三、午休时间选择恰当的方式休息大脑”。今天承接上一篇,再和大家分享三个比较好用的方法,但都需要一定的自律和持之以恒,并不是说看过之后就能使自己的工作效率嗖嗖提高,关键是付诸于行动。

威尼斯国际线上娱乐 1

深圳的快生活节奏,和认真工作,让平时在办公室里的上班族很快就感觉疲劳。

/**
 *
 * @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;
 }
/**
 * 
 * @desc 判断元素是否有某个class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 * @return {Boolean}
 */
function hasClass(ele, cls) {
    return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}
/**
 * 
 * @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 '';
}
/**
 * 
 * @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;
}

/**
 * 
 * @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'
}

/**
 * 
 * @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'
}

/**
 * 
 * @desc 获取滚动条距顶部的距离
 */
function getScrollTop() {
    return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
}

/**
 * 
 * @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;
}

/**
 * 
 * @desc 设置滚动条距顶部的距离
 */
function setScrollTop(value) {
    window.scrollTo(0, value);
    return value;
}

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 '';
    }
};

/**
 * @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.");
}

/**
 * 
 * @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
}

/**
 * 
 * @desc 随机生成颜色
 * @return {String} 
 */
function randomColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}

/**
 * 
 * @desc 生成指定范围随机数
 * @param  {Number} min 
 * @param  {Number} max 
 * @return {Number} 
 */
function randomNum(min, max) {
    return Math.floor(min + Math.random() * (max - min));
}

/**
 * 
 * @desc   判断是否为邮箱地址
 * @param  {String}  str
 * @return {Boolean} 
 */
function isEmail(str) {
    return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
}

/**
 * 
 * @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)
}

/**
 * 
 * @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)
}

/**
 * 
 * @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);
}

/**
 * 
 * @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(/^整$/, '零元整');
};

/**
 * 
 * @desc 判断浏览器是否支持webP格式图片
 * @return {Boolean} 
 */
function isSupportWebP() {
    return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
}

/**
 * @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 '刚刚'
}

/**
 * 
 * @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 + "秒";
}

/**
 * 
 * @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, '":"') + '"}')
}

/**
 * @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;

};

/**
 * @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);
};

常用函数汇总

四、预留10分钟备用时间

平时做 PPT 不知道大家是 PPT 中直接做,还是先在 word 中策划文案?

如果在办公室装修设计的时候能做一些小小的改动,那么可以给正在认真工作中的同事们带来不一样的放松体验。

办公室装修风格是工作中的点睛之笔:

威尼斯国际线上娱乐 2

威尼斯国际线上娱乐 3

                                           

一个温馨的休息区就可以让你在午间休息的时候好好充电,消却上午的困乏,用满满的精神去应对下午的工作挑战。

威尼斯国际线上娱乐 4

更新办公室概念,体现人性化,温情化

威尼斯国际线上娱乐 5

稍个性一点的装饰,其实根本不会削弱公司的专业感,适度的变化其实还会让人看到企业的创新能力。

威尼斯国际线上娱乐 6

威尼斯国际线上娱乐 7

想不出问题的时候就这样坐在沙发上,望着远处,说不定灵感下一秒就来了。

威尼斯国际线上娱乐 8

威尼斯国际线上娱乐 9

设计是一种有温度的东西,办公空间的休息区其实有很大的发挥空间,只要稍微想一想,就能打造一个有趣的空间。无论是用餐,休息,还是聊天,亦或者是讨论工作,都会是一件乐事。

欲了解更多相关深圳办公室装修设计的知识请登录
深圳装修设计www.szshangtai.cn  办公室设计www.szshangtai.com
或拨打400-088-0848

这里先分类整理下,之前项目中多次用到的工具函数。

如果有外出开会或者与客户会面的计划,面对北京shi一样的交通状况,一定要提前一天了解行车路线,为避免堵车等突发状况,还需要早出发至少10分钟。我一直都有把手表和手机时间调快的习惯,不仅仅拥有了一种走在时间前面的感觉,而且最大的好处是,和别人的约会、参加重要会议、赶火车飞机等等,几乎没有迟到过。十分钟的备用时间,一方面可以调整一下状态,如果是和重要的人会面,好的状态比着急忙慌的气喘吁吁好太多了;另一方面,你的提前到达能够给别人一种受到重视的感觉,谈判也会有个顺利的开端。

又或者是领导直接扔给你一个 word 让你规定时间内做成 PPT 格式?

1.Array

身边不少事业风生水起、学术德高望重的前辈们,都有着独特的时间管理习惯,无一例外在“守时”这一点上具有极高的默契和相似度。任务管理的混乱、重要事情的遗忘、做事情毫无章法,是不少初入职场者的通病。“守时”是做好时间管理的基础要素,提前做好时间规划和任务管理安排,看似浪费了行动的时间,但所谓磨刀不误砍柴工,最终你会发现节省了更多慌乱、无序浪费掉的时间。

遇到这种情况你是如何应对呢

1.1 arrayEqual

五、提高会议效率(会前与会后)

从 word 中一条一条的的 复制粘贴「 Ctrl + C / V 」到 PPT 中?

/** * * @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

如果你是主持会议的人,或者团队的leader,需要在会议前简单的列出会议提纲,e-mail给团队的小伙伴们,每个人对会议的主旨达成共识,并提前有所准备,才能提高会议的效率。

告别加班

2.1 addClass

如果你是团队成员或者参会者,那么就要想清楚你想通过参加会议获得什么?如果只是想把自己的人放在会议室,然后眼睛看手机、耳朵一进一出、手刷刷划手机屏幕,心飘在外天空,那还不如人也别来,至少还能干些别的有意义的事情。

老司机带你走捷径一起飞︿( ̄︶ ̄)︿

/** * * @desc 为元素添加class * @param {HTMLElement} ele * @param {String} cls */var hasClass = require('./hasClass');function addClass { if (!hasClass) { ele.className += ' ' + cls; }}

关于准备,可能也需要分情况来讨论,主要要素首先是你的角色,然后是你的责任,最后是你的任务。太多的无效会议都是因为参会人员没有做好会前准备,到了会场才发现几个人面面相觑,没有想法、不知道说什么、说了也毫无逻辑可言,是最常见的无效会议表现。

让我们将一份长篇 word 一键转成分页分段有层次的 PPT !

2.2 hasClass

会议后做好总结和工作行动计划,才算是“出席”了会议。最常见的方法一是绘制思维导图,二是写心得体会梳理思路。有时间的话另外开文章给大家讲解这两种总结方法。总之,好的总结,不仅是检验自己收获的好方法,也是尊重别人所创造出的知识和花掉的时间的高度尊重。

1/ 将 word 中的「发送到 Microsoft PowerPoint 」调出


首先将「发送到 Microsoft PowerPoint 」选项手动调出到快速访问工具栏

威尼斯国际线上娱乐 10

点击 Word【文件 →【选项 →【快速访问工具栏 →
【不在功能区的命令】,找到「发送到 Microsoft PowerPoint
」点击「添加」到快速快速访问工具栏

威尼斯国际线上娱乐 11

然后就可以在「快速访问工具栏」中直接调用

威尼斯国际线上娱乐 12

/** * * @desc 判断元素是否有某个class * @param {HTMLElement} ele * @param {String} cls * @return {Boolean} */function hasClass { return (new RegExp' + cls + '.test(ele.className);}

六、听书

2/ 在 word 中设置大纲层级发送到PPT


在 word
中对文本进行分级简化,以明确需要在何处将文本拆分为新的幻灯片页。

威尼斯国际线上娱乐 13

2.3 removeClass

“暗时间”、“碎片化时间”的使用攻略,一度成为各界的关注焦点。但我觉得不需要前篇一律地强调等车的时候看电子书、地铁上听英语等等,你需要开发出适合自己生活习惯的方法。对于我来说,在移动的交通工具上看文字会晕车,而且一整天工作离不开电脑下班后能远离电脑就绝不会靠近它,所以我常用的碎片化时间使用方法就是听有声书,现在各种听书app功能都比较齐全,自行下载一个即可。一个人走路的时候、上下班路上、做家务做饭的时候,完全可以通过听有声书来“阅读”你一直想看的书,相当于我走路的时候,也读了书,何乐而不为?

① 打开「视图」中的「大纲视图」

威尼斯国际线上娱乐 14

/** * * @desc 为元素移除class * @param {HTMLElement} ele * @param {String} cls */var hasClass = require('./hasClass');function removeClass { if (hasClass) { var reg = new RegExp' + cls + '; ele.className = ele.className.replace; }}

工作不是生活的全部。我一直觉得:工作不是生活的全部,努力工作是为了更好的生活,更好的生活需要一份做的开心且舒心的工作来拓宽视野,实现自我成长。

② 设置文本层级

威尼斯国际线上娱乐 15

【注】

1.「 1 级」会将文本拆分为新的幻灯片,有点像 word 中的分页符。

2.只有设置了层级的文字,点击「发送到 Microsoft PowerPoint 」后才会出现在
PPT 中。

3.Cookie

③ 设置好格式和层级后,点击「发送到 Microsoft PowerPoint 」

威尼斯国际线上娱乐 16

3.1 getCookie

④ 完成收工

威尼斯国际线上娱乐 17

原本一整页的文字现在自动的分成了一页页的 PPT 啦~


/** * * @desc 根据name读取cookie * @param {String} name * @return {String} */function getCookie { 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 '';}

iSlide 官网地址:https://www.islide.cc/

3.2 removeCookie

var setCookie = require('./setCookie');/** * * @desc 根据name删除cookie * @param {String} name */function removeCookie { // 设置已过期,系统会立刻删除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; 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: like gecko/)) ? sys.ie = s[1]: (s = ua.match(/msie /)) ? sys.ie = s[1] : (s = ua.match(/edge\//)) ? sys.edge = s[1] : (s = ua.match(/firefox\//)) ? sys.firefox = s[1] : (s = ua.match(/(?:opera|opr)./)) ? sys.opera = s[1] : (s = ua.match(/chrome\//)) ? sys.chrome = s[1] : (s = ua.match(/version\/.*safari/)) ? sys.safari = s[1] : 0; // 根据关系进行判断 if  return ('IE: ' + sys.ie) if  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 获取一个元素的距离文档的位置,类似jQ中的offset() * @param {HTMLElement} ele * @returns { {left: number, top: number} } */function offset { var pos = { left: 0, top: 0 }; while  { 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  { window.setTimeout(callback, 1000 / 60); };})();/** * * @desc 在${duration}时间内,滚动条平滑滚动到${to}指定位置 * @param {Number} to * @param {Number} duration */function scrollTo(to, duration) { if (duration < 0) { setScrollTop; return } var diff = to - getScrollTop(); if (diff === 0) return var step = diff / duration * 10; requestAnimationFrame( function () { if (Math.abs > Math.abs { setScrollTop(getScrollTop; return; } setScrollTop(getScrollTop; if (diff > 0 && getScrollTop() >= to || diff < 0 && getScrollTop() <= to) { return; } scrollTo(to, duration - 16); });}

5.4 setScrollTop

/** * * @desc 设置滚动条距顶部的距离 */function setScrollTop { window.scrollTo; 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 { 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 { 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 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 { if (!obj || typeof obj !== 'object' || Array.isArray return false return !Object.keys.length}

8.Random

8.1 randomColor

/** * * @desc 随机生成颜色 * @return {String} */function randomColor() { return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString.slice;}

8.2 randomNum

/** * * @desc 生成指定范围随机数 * @param {Number} min * @param {Number} max * @return {Number} */function randomNum { return Math.floor(min + Math.random() * (max - min));}

9.Regexp

9.1 isEmail

/** * * @desc 判断是否为邮箱地址 * @param {String} str * @return {Boolean} */function isEmail { return /\w+*@\w+*\.\w+*/.test;}

9.2 isIdCard

/** * * @desc 判断是否为身份证号 * @param {String|Number} str * @return {Boolean} */function isIdCard { return /^(^[1-9]\d{7}|(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}|(([0|1|2]\d)|3[0-1])|\d{3}[Xx])$)$/.test}

9.3 isPhoneNum

/** * * @desc 判断是否为手机号 * @param {String|Number} str * @return {Boolean} */function isPhoneNum { return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test}

9.4 isUrl

/** * * @desc 判断是否为手机号 * @param {String|Number} str * @return {Boolean} */function isPhoneNum { return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test}

9.4 isUrl

/** * * @desc 判断是否为URL地址 * @param {String} str * @return {Boolean} */function isUrl { return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test;}

10.String

10.1 digitUppercase

/** * * @desc 现金额转大写 * @param {Number} n * @return {String} */function digitUppercase { var fraction = ['角', '分']; var digit = [ '零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖' ]; var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟'] ]; var head = n < 0 ? '欠' : ''; n = Math.abs; var s = ''; for (var i = 0; i < fraction.length; i++) { s += (digit[Math.floor(n * 10 * Math.pow % 10] + fraction[i]).replace; } s = s || '整'; n = Math.floor; 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; } 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.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, year = parseInt(month / 12); if  return year + "年前" if  return month + "个月前" if  return day + "天前" if  return hour + "小时前" if  return min + "分钟前" else return '刚刚'}

12.2 formatRemainTime

/** * * @desc 格式化现在距${endTime}的剩余时间 * @param {Date} endTime * @return {String} */function formatRemainTime { var startDate = new Date(); //开始时间 var endDate = new Date; //结束时间 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 == null ? window.location.href : url var search = url.substring(url.lastIndexOf if  { return {} } return JSON.parse('{"' + decodeURIComponent.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')}

13.2 stringfyQueryString

/** * * @desc 对象序列化 * @param {Object} obj * @return {String} */function stringfyQueryString { if  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); } continue; } pairs.push(encodeURIComponent + '=' + encodeURIComponent); } 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  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 , 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 , schedule `clear` to execute // after `delay` ms. // // If `debounceMode` is false , 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 

这里主要说明一下项目中[build.js
的构建过程第一步,构建全量压缩包,先删除min目录中之前的outils.min.js,后通过webpack打包并保存新的压缩包至min目录中:

...... ...... // 删除旧的全量压缩包 rm(path.resolve(rootPath, 'min', `${pkg.name}.min.js`), err => { if  throw  webpack(config, function (err, stats) { if  throw  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  throw  let folderList = fs.readdirSync(path.resolve(rootPath, 'src')) folderList.forEach((item, index) => { // 拷贝`src`下面一层目录的所有`js`文件至根目录 copy(`src/${item}/*.js`, rootPath, function (err, files) { if  throw err; if (index === folderList.length - 1) { console.log(chalk.cyan(' Copy complete.\n')) copying.stop }) ...... ......

这里推荐一下我的学习交流群:731771211,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。希望能帮助你更了解前端,学习前端

相关文章