您的位置:时时app平台注册网站 > web前端 > JavaScript 函数库

JavaScript 函数库

2019-11-03 16:32

7.Object

8.Random

9.1 isEmail

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

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;

};

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

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

2.Class

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";

原文:https://github.com/proYang/outils

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

前言

用交战争在工作一线的前端,要想少加班,将在想方法加强工效。这里提一个小点,我们在事情支出进度中,经常会重新利用日期格式化url参数转对象浏览器类型判断节流函数等风度翩翩类函数,那么些工具类函数,基本上在每一种门类都会用到,为幸免区别门类再三复制粘贴的分神,大家能够统风流浪漫封装,发表到npm,以加强花费功用。

那边,小编曾经封装并发表了温馨的兵器库 outils,即便你对本项目感兴趣,迎接 star 本项目。当然你也能够在本项目标根底上包裹自个儿的武器库。

3.测量检验并封装

执行npm run test,看有着的测量试验用例是还是不是由此。倘若寻常,实行npm run build构建,之后提交到村办的 github 仓库就能够。

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

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

13.Url

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

2.营造脚本

此间首要说贝拉米(Bellamy卡塔尔(Aptamil卡塔 尔(阿拉伯语:قطر‎下种类中 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
            })   'nn')
            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()
                }
            })
        })
    })
    ......
    ......

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

3.测验并打包

执行npm run test,看有着的测量试验用例是不是经过。如果没失常,实践npm run build营造,之后提交到村办的 github 饭店就能够。

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

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

8.Random

3.2 removeCookie

var setCookie = require('./setCookie');
/**
 * 
 * @desc 根据name删除cookie
 * @param  {String} name 
 */
function removeCookie(name) {
    // 设置已过期,系统会立刻删除cookie
    setCookie(name, '1', -1);
}

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;

};

11.1 isSupportWebP

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

8.Random

5.1 getScrollTop

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

使用

封装

除开对地方那几个常用函数进行李包裹装, 最首要的是扶植合理化的引进,这里大家运用webpack集合打包成UMD 通用模块规范,帮忙webpackRequireJSSeaJS等模块加载器,亦或直接通过<script>标签引进。

但这么,依旧不可能令人满足。因为全体引进整个库,略显浪费,大家不容许用到具备的函数。那么,就支持按需引进

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

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

1.Array

14.Function

2.Class

3.测验并打包

执行npm run test,看有着的测量检验用例是还是不是通过。如果没不平常,试行npm run build构建,之后提交到个人的 github 货仓就能够。

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

协和创造一把趁手的武器,高功效达成前端业务代码。

9.1 isEmail

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

5.Dom

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, '":"')   '"}')
}

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

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

1.浏览器

直白下载min目录下的 outils.min.js ,通过<script>标签引进。

  <script src="outils.min.js"></script>
  <script>
      var OS = outils.getOS()
  </script>

细心: 本旅馆代码会四处立异,假设你供给不一样版本的增量压缩包或源码,请到 github Release 页面下载对应版本号的代码。

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
}

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
            })   'nn')
            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()
                }
            })
        })
    })
    ......
    ......

2.营造脚本

此处主要说爱他美(Aptamil卡塔尔国下项目中 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
            })   'nn')
            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()
                }
            })
        })
    })
    ......
    ......

12.Time

10.String

常用函数汇总

此地先分类收拾下,从前项目中反复使用的工具函数。

10.String

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

5.Dom

1.加多自己的函数

src目录下,新建分类目录只怕选拔一个分拣,在子文件夹中增添函数模块文件(提出叁个小效能保存为三个JS文件卡塔尔国。

/**
 * 
 * @desc   判断是否NaN
 * @param  {Any} value 
 * @return {Boolean}
 */
function isNaN(value) {    
    return value !== value;
};

modules.export = isNaN

然后记得在src/index.js文本中图穷匕见isNaN函数

9.Regexp

13.Url

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

3.Cookie

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

常用函数汇总

那边先分类收拾下,在此以前项目中频仍应用的工具函数。

7.Object

11.1 isSupportWebP

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

11.Support

9.Regexp

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

4.发布到npm

在 www.npmjs.com 注册账号,校正本地package.json中的nameversionauthor等信息,最后npm publish就水到渠成了。
注意:向npm发包,要把镜像源切到 www.npmjs.com ,使用cnpm品级三方镜像源会报错。

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

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`中引入之前创建的测试用例脚本。

7.Object

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

14.Function

3.2 removeCookie

var setCookie = require('./setCookie');
/**
 * 
 * @desc 根据name删除cookie
 * @param  {String} name 
 */
function removeCookie(name) {
    // 设置已过期,系统会立刻删除cookie
    setCookie(name, '1', -1);
}

6.Keycode

5.1 getScrollTop

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

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, '":"')   '"}')
}

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

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

8.2 randomNum

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

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

作者: SlaneYang

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   "秒";
}

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   "秒";
}

8.2 randomNum 

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

8.1 randomColor

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

11.Support

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

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

14.Function

使用

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

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

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

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.2 randomNum 

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

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, '":"')   '"}')
}

11.1 isSupportWebP

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

总结

此地只是轻巧包装,发布到npm上,省去下一次复制粘贴的素养,可能直接Goole的流年。借使小编的库中,未有你常用的函数,或然您有越来越好的提议,招待来本项目标 Github Issues 交换,固然以为不错,接待 star 本项目。

理当如此,更加好的建议是 fork 本项目,恐怕间接新建本身的门类,增添自身 想要的 、常用的 、记不住的 函数,以致是能够抽象出来的固守,封装成本身顺手、熟识的库。 那样技术营造出你和煦的军械库,弹指间加强你的单兵作战(开荒卡塔 尔(阿拉伯语:قطر‎本事。

工欲善其事磨刀不误砍柴工。有了归属自身的这把利器,希望加班也会成为奢望。O(∩_∩)O哈哈~

(作者有三个前端学习沟通QQ群:328058344 倘诺您在念书前端的历程中遇见什么样难点,迎接来自身的QQ群提问,群里天天还恐怕会更新一些读书财富。禁绝闲谈,非喜勿进。)

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

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.1 getScrollTop

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

常用函数汇总

那边先分类收拾下,此前项目中数次接收的工具函数。

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

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

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

发布

率先松开Github托管一下,当然你也能够一贯fork本项目,然后再步入你协和的函数。
以小编项目,举个栗子:

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

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

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.yml 和karma的配置文件 karma.conf.js 。

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 

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

6.Keycode

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

总结

此间只是轻易包装,发布到npm上,省去下一次复制粘贴的造诣,或然直接Goole的时刻。假设小编的库中,未有您常用的函数,恐怕你有更加好的提出,招待来本项指标 Github Issues 交换,假如以为不错,接待 star 本项目。

当然,更加好的提出是 fork 本项目,或许直接新建自身的品种,增添本身 想要的 、常用的 、记不住的 函数,以至是能够抽象出来的意义,封装成自身顺手、熟练的库。 那样工夫塑造出你自身的军器库,眨眼之间间加强你的单兵应战(开拓卡塔尔本领。

工欲善其事必先利其器。有了归于自个儿的那把利器,希望加班也会成为奢望。O(∩_∩)O哈哈~

 

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

1.增添本身的函数

src目录下,新建分类目录恐怕接受一个分拣,在子文件夹中加多函数模块文件(提出三个小功能保存为叁个JS文件卡塔尔国。

/**
 * 
 * @desc   判断是否NaN
 * @param  {Any} value 
 * @return {Boolean}
 */
function isNaN(value) {    
    return value !== value;
};

modules.export = isNaN

下一场记得在src/index.js文本中东窗事发isNaN函数

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 

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

8.1 randomColor

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

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

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

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

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('&');
}

5.4 setScrollTop

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

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
}

1.浏览器

直接下载min目录下的 outils.min.js ,通过<script>标签引进。

  <script src="outils.min.js"></script>
  <script>
      var OS = outils.getOS()
  </script>

潜心: 本旅舍代码会软磨硬泡更新,借令你须要分化版本的增量压缩包或源码,请到 github Release 页面下载对应版本号的代码。

3.Cookie

发布

先是放手Github托管一下,当然你也得以直接fork本项目,然后再插手你协和的函数。
以小编项目,举个栗子:

4.Device

1.浏览器

一向下载min目录下的 outils.min.js ,通过<script>标签引进。

  <script src="outils.min.js"></script>
  <script>
      var OS = outils.getOS()
  </script>

注意: 本酒店代码会不停立异,若是您须求不相同版本的增量压缩包或源码,请到 github Release 页面下载对应版本号的代码。

10.String

11.Support

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

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

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.yml 和karma的安插文件 karma.conf.js 。

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

前言

用作大战在专门的工作一线的前端,要想少加班,将要想艺术加强工效。这里提七个小点,大家在事情支出进度中,平时会另行利用日期格式化url参数转对象浏览器类型判断节流函数等生龙活虎类函数,那些工具类函数,基本上在各类项目都会用到,为制止分裂门类屡屡复制粘贴的劳累,大家能够统生龙活虎封装,公布到npm,以增长费用效能。

这里,小编曾经封装并揭破了本人的兵戈库 outils,假如您对本项目感兴趣,迎接 star 本项目。当然你也能够在本项指标底蕴上包裹本人的火器库。

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

封装

除开对地方那一个常用函数进行包装, 最重大的是支撑合理化的引进,这里大家利用webpack统风度翩翩打包成UMD 通用模块标准,扶持webpackRequireJSSeaJS等模块加载器,亦或直接通过<script>标签引进。

但这么,仍然不可能令人满足。因为完全引进整个库,略显浪费,大家不容许用到具备的函数。那么,就援助按需引进

图片 1

8.1 randomColor

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

1.加多自身的函数

src目录下,新建分类目录大概采纳叁个分类,在子文件夹中加多函数模块文件(建议三个小成效保存为一个JS文件卡塔 尔(阿拉伯语:قطر‎。

/**
 * 
 * @desc   判断是否NaN
 * @param  {Any} value 
 * @return {Boolean}
 */
function isNaN(value) {    
    return value !== value;
};

modules.export = isNaN

然后记得在src/index.js文件中东窗事发isNaN函数

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

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

4.Device

1.Array

9.Regexp

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

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.yml 和karma的配置文件 karma.conf.js 。

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";

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('&');
}

4.Device

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.单元测量试验

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`中引入之前创建的测试用例脚本。

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;

};

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

2.Class

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

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

9.1 isEmail

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

封装

除此而外对地点这几个常用函数举行包装, 最根本的是支撑合物理和化学的引进,这里大家接纳webpack集合打包成UMD 通用模块标准,协助webpackRequireJSSeaJS等模块加载器,亦或直接通过<script>标签引进。

但如此,依旧不可能令人看中。因为全体引进整个库,略显浪费,我们不可能用到全体的函数。那么,就支持按需引进

5.4 setScrollTop

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

12.Time

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('&');
}

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   "秒";
}

使用

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

发布

率先放手Github托管一下,当然你也足以一贯fork本项目,然后再参与你协和的函数。
以作者项目,举个栗子:

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

12.Time

4.发布到npm

在 www.npmjs.com 注册账号,改善本地package.json中的nameversionauthor等信息,最后npm publish就水到渠成了。 
注意:向npm发包,要把镜像源切到 www.npmjs.com ,使用cnpm等级三方镜像源会报错。

1.Array

5.4 setScrollTop

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

13.Url

3.2 removeCookie

var setCookie = require('./setCookie');
/**
 * 
 * @desc 根据name删除cookie
 * @param  {String} name 
 */
function removeCookie(name) {
    // 设置已过期,系统会立刻删除cookie
    setCookie(name, '1', -1);
}

6.Keycode

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.Cookie

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";

5.Dom

4.发布到npm

在 www.npmjs.com 注册账号,改善本地package.json中的nameversionauthor等信息,最后npm publish就水到渠成了。 
注意:向npm发包,要把镜像源切到 www.npmjs.com ,使用cnpm品级三方镜像源会报错。

本文由时时app平台注册网站发布于web前端,转载请注明出处:JavaScript 函数库

关键词: