常用函数汇总

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

1.Array

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/**

*

* @desc 判断两个数组是否相等

* @param {Array} arr1

* @param {Array} arr2

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function arrayEqual(arr1, arr2) {

if (arr1 === arr2) return true;

if (arr1.length != arr2.length) return false;

for (var i = 0; i < arr1.length; ++i) {

if (arr1[i] !== arr2[i]) return false;

}

return true;

}

2.Class

2.1 addClass

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/**

*

* @desc   为元素添加class

* @param  {HTMLElement} ele

* @param  {String} cls

*/

var hasClass = require(‘./hasClass‘);

function addClass(ele, cls) {

if (!hasClass(ele, cls)) {

ele.className += ‘ ‘ + cls;

}

}

2.2 hasClass

1

2

3

4

5

6

7

8

9

10

/**

*

* @desc 判断元素是否有某个class

* @param {HTMLElement} ele

* @param {String} cls

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function hasClass(ele, cls) {

return (new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘)).test(ele.className);

}

2.3 removeClass

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/**

*

* @desc 为元素移除class

* @param {HTMLElement} ele

* @param {String} cls

*/

var hasClass = require(‘./hasClass‘);

function removeClass(ele, cls) {

if (hasClass(ele, cls)) {

var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘);

ele.className = ele.className.replace(reg, ‘ ‘);

}

}

3.Cookie

3.1 getCookie

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/**

*

* @desc 根据name读取cookie

* @param  {String} name

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function getCookie(name) {

var arr = document.cookie.replace(/\s/g, "").split(‘;‘);

for (var i = 0; i < arr.length; i++) {

var tempArr = arr[i].split(‘=‘);

if (tempArr[0] == name) {

return decodeURIComponent(tempArr[1]);

}

}

return ‘‘;

}

3.2 removeCookie

1

2

3

4

5

6

7

8

9

10

var setCookie = require(‘./setCookie‘);

/**

*

* @desc 根据name删除cookie

* @param  {String} name

*/

function removeCookie(name) {

// 设置已过期，系统会立刻删除cookie

setCookie(name, ‘1‘, -1);

}

3.3 setCookie

1

2

3

4

5

6

7

8

9

10

11

12

/**

*

* @desc  设置Cookie

* @param {String} name

* @param {String} value

* @param {Number} days

*/

function setCookie(name, value, days) {

var date = new Date();

date.setDate(date.getDate() + days);

document.cookie = name + ‘=‘ + value + ‘;expires=‘ + date;

}

4.Device

4.1 getExplore

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/**

*

* @desc 获取浏览器类型和版本

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function getExplore() {

var sys = {},

ua = navigator.userAgent.toLowerCase(),

s;

(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:

(s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :

(s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :

(s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :

(s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :

(s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :

(s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;

// 根据关系进行判断

if (sys.ie) return (‘IE: ‘ + sys.ie)

if (sys.edge) return (‘EDGE: ‘ + sys.edge)

if (sys.firefox) return (‘Firefox: ‘ + sys.firefox)

if (sys.chrome) return (‘Chrome: ‘ + sys.chrome)

if (sys.opera) return (‘Opera: ‘ + sys.opera)

if (sys.safari) return (‘Safari: ‘ + sys.safari)

return ‘Unkonwn‘

}

4.2 getOS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/**

*

* @desc 获取操作系统类型

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {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

1

2

3

4

5

6

7

/**

*

* @desc 获取滚动条距顶部的距离

*/

function getScrollTop() {

return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

}

5.2 offset

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/**

*

* @desc  获取一个元素的距离文档(document)的位置，类似jQ中的offset()

* @param {HTMLElement} ele

* @returns { {left: number, top: number} }

*/

function offset(ele) {

var pos = {

left: 0,

top: 0

};

while (ele) {

pos.left += ele.offsetLeft;

pos.top += ele.offsetTop;

ele = ele.offsetParent;

};

return pos;

}

5.3 scrollTo

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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  Math.abs(diff)) {

setScrollTop(getScrollTop() + diff);

return;

}

setScrollTop(getScrollTop() + step);

if (diff > 0 && getScrollTop() >= to || diff

5.4 setScrollTop

1

2

3

4

5

6

7

8

/**

*

* @desc 设置滚动条距顶部的距离

*/

function setScrollTop(value) {

window.scrollTo(0, value);

return value;

}

6.Keycode

6.1 getKeyName

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

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

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function getKeyName(keycode) {

if (keyCodeMap[keycode]) {

return keyCodeMap[keycode];

} else {

console.log(‘Unknow Key(Key Code:‘ + keycode + ‘)‘);

return ‘‘;

}

};

7.Object

7.1 deepClone

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/**

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

7.2 isEmptyObject

1

2

3

4

5

6

7

8

9

10

11

/**

*

* @desc   判断`obj`是否为空

* @param  {Object} obj

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isEmptyObject(obj) {

if (!obj || typeof obj !== ‘object‘ || Array.isArray(obj))

return false

return !Object.keys(obj).length

}

8.Random

8.1 randomColor

1

2

3

4

5

6

7

/**

*

* @desc 随机生成颜色

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function randomColor() {

return ‘#‘ + (‘00000‘ + (Math.random() * 0x1000000

8.2 randomNum

1

2

3

4

5

6

7

8

9

10

/**

*

* @desc 生成指定范围随机数

* @param  {Number} min

* @param  {Number} max

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Number}

*/

function randomNum(min, max) {

return Math.floor(min + Math.random() * (max - min));

}

9.Regexp

9.1 isEmail

1

2

3

4

5

6

7

8

9

/**

*

* @desc   判断是否为邮箱地址

* @param  {String}  str

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isEmail(str) {

return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);

}

9.2 isIdCard

1

2

3

4

5

6

7

8

9

/**

*

* @desc  判断是否为身份证号

* @param  {String|Number} str

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isIdCard(str) {

return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str)

}

9.3 isPhoneNum

1

2

3

4

5

6

7

8

9

/**

*

* @desc   判断是否为手机号

* @param  {String|Number} str

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isPhoneNum(str) {

return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)

}

9.4 isUrl

1

2

3

4

5

6

7

8

9

/**

*

* @desc   判断是否为URL地址

* @param  {String} str

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isUrl(str) {

return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([[email protected]:%_\+.~#?&//=]*)/i.test(str);

}

10.String

10.1 digitUppercase

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

/**

*

* @desc   现金额转大写

* @param  {Number} n

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function digitUppercase(n) {

var fraction = [‘角‘, ‘分‘];

var digit = [

‘零‘, ‘壹‘, ‘贰‘, ‘叁‘, ‘肆‘,

‘伍‘, ‘陆‘, ‘柒‘, ‘捌‘, ‘玖‘

];

var unit = [

[‘元‘, ‘万‘, ‘亿‘],

[‘‘, ‘拾‘, ‘佰‘, ‘仟‘]

];

var head = n  0; i++) {

var p = ‘‘;

for (var j = 0; j  0; j++) {

p = digit[n % 10] + unit[1][j] + p;

n = Math.floor(n / 10);

}

s = p.replace(/(零.)*零$/, ‘‘).replace(/^$/, ‘零‘) + unit[0][i] + s;

}

return head + s.replace(/(零.)*零元/, ‘元‘)

.replace(/(零.)+/g, ‘零‘)

.replace(/^整$/, ‘零元整‘);

};

11.Support

11.1 isSupportWebP

1

2

3

4

5

6

7

8

/**

*

* @desc 判断浏览器是否支持webP格式图片

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isSupportWebP() {

return !![].map && document.createElement(‘canvas‘).toDataURL(‘image/webp‘).indexOf(‘data:image/webp‘) == 0;

}

12.Time

12.1 formatPassTime

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/**

* @desc   格式化${startTime}距现在的已过时间

* @param  {Date} startTime

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function formatPassTime(startTime) {

var currentTime = Date.parse(new Date()),

time = currentTime - startTime,

day = parseInt(time / (1000 * 60 * 60 * 24)),

hour = parseInt(time / (1000 * 60 * 60)),

min = parseInt(time / (1000 * 60)),

month = parseInt(day / 30),

year = parseInt(month / 12);

if (year) return year + "年前"

if (month) return month + "个月前"

if (day) return day + "天前"

if (hour) return hour + "小时前"

if (min) return min + "分钟前"

else return ‘刚刚‘

}

12.2 formatRemainTime

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

/**

*

* @desc   格式化现在距${endTime}的剩余时间

* @param  {Date} endTime

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function formatRemainTime(endTime) {

var startDate = new Date(); //开始时间

var endDate = new Date(endTime); //结束时间

var t = endDate.getTime() - startDate.getTime(); //时间差

var d = 0,

h = 0,

m = 0,

s = 0;

if (t >= 0) {

d = Math.floor(t / 1000 / 3600 / 24);

h = Math.floor(t / 1000 / 60 / 60 % 24);

m = Math.floor(t / 1000 / 60 % 60);

s = Math.floor(t / 1000 % 60);

}

return d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";

}

13.Url

13.1 parseQueryString

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/**

*

* @desc   url参数转对象

* @param  {String} url  default: window.location.href

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Object}

*/

function parseQueryString(url) {

url = url == null ? window.location.href : url

var search = url.substring(url.lastIndexOf(‘?‘) + 1)

if (!search) {

return {}

}

return JSON.parse(‘{"‘ + decodeURIComponent(search).replace(/"/g, ‘\\"‘).replace(/&/g, ‘","‘).replace(/=/g, ‘":"‘) + ‘"}‘)

}

13.2 stringfyQueryString

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/**

*

* @desc   对象序列化

* @param  {Object} obj

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {String}

*/

function stringfyQueryString(obj) {

if (!obj) return ‘‘;

var pairs = [];

for (var key in obj) {

var value = obj[key];

if (value instanceof Array) {

for (var i = 0; i < value.length; ++i) {

pairs.push(encodeURIComponent(key + ‘[‘ + i + ‘]‘) + ‘=‘ + encodeURIComponent(value[i]));

}

continue;

}

pairs.push(encodeURIComponent(key) + ‘=‘ + encodeURIComponent(obj[key]));

}

return pairs.join(‘&‘);

}

14.Function

14.1 throttle

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

/**

* @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之后执行。

*

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Function}  新的节流函数

*/

function throttle(delay, noTrailing, callback, debounceMode) {

// After wrapper has stopped being called, this timeout ensures that

// `callback` is executed at the proper times in `throttle` and `end`

// debounce modes.

var timeoutID;

// Keep track of the last time `callback` was executed.

var lastExec = 0;

// `noTrailing` defaults to falsy.

if (typeof noTrailing !== ‘boolean‘) {

debounceMode = callback;

callback = noTrailing;

noTrailing = undefined;

}

// The `wrapper` function encapsulates all of the throttling / debouncing

// functionality and when executed will limit the rate at which `callback`

// is executed.

function wrapper() {

var self = this;

var elapsed = Number(new Date()) - lastExec;

var args = arguments;

// Execute `callback` and update the `lastExec` timestamp.

function exec() {

lastExec = Number(new Date());

callback.apply(self, args);

}

// If `debounceMode` is true (at begin) this is used to clear the flag

// to allow future `callback` executions.

function clear() {

timeoutID = undefined;

}

if (debounceMode && !timeoutID) {

// Since `wrapper` is being called for the first time and

// `debounceMode` is true (at begin), execute `callback`.

exec();

}

// Clear any existing timeout.

if (timeoutID) {

clearTimeout(timeoutID);

}

if (debounceMode === undefined && elapsed > delay) {

// In throttle mode, if `delay` time has been exceeded, execute

// `callback`.

exec();

} else if (noTrailing !== true) {

// In trailing throttle mode, since `delay` time has not been

// exceeded, schedule `callback` to execute `delay` ms after most

// recent execution.

//

// If `debounceMode` is true (at begin), schedule `clear` to execute

// after `delay` ms.

//

// If `debounceMode` is false (at end), schedule `callback` to

// execute after `delay` ms.

timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);

}

}

// Return the wrapper function.

return wrapper;

};

14.2 debounce

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/**

* @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`。

*

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Function} 新的防抖函数。

*/

var throttle = require(‘./throttle‘);

function debounce(delay, atBegin, callback) {

return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);

};

封装

除了对上面这些常用函数进行封装， 最重要的是支持合理化的引入，这里我们使用webpack统一打包成UMD 通用模块规范，支持webpack、RequireJS、SeaJS等模块加载器，亦或直接通过标签引入。

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

1.目录结构说明

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

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

2.构建脚本

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

......

......

// 删除旧的全量压缩包

rm(path.resolve(rootPath, ‘min‘, `${pkg.name}.min.js`), err => {

if (err) throw (err)

webpack(config, function (err, stats) {

if (err) throw (err)

building.stop()

process.stdout.write(stats.toString({

colors: true,

modules: false,

children: false,

chunks: false,

chunkModules: false

}) + ‘\n\n‘)

resolve()

console.log(chalk.cyan(‘  Build complete.\n‘))

})

})

......

......

第二步，拷贝函数模块至根目录，先删除根目录中之前的函数模块，后拷贝src下面一层目录的所有js文件至根目录。这么做的目的是，拷贝到根路径，在引入的时候，直接require(‘outils/‘)即可，缩短引入的路径，也算是提高点效率。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

// 替换模块文件

......

......

// 先删除根目录中之前的函数模块

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

}

})

})

})

......

......

3.书写测试用例

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

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

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

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

更新：单元测试，已使用karma，mocha，power-assert，使用Coverage测试覆盖率，并集成travis-ci配合Github来做持续化构建，可以参考本项目的travis配置文件.travis.yml和karma的配置文件karma.conf.js。

发布

首先放到Github托管一下，当然你也可以直接fork本项目，然后再加入你自己的函数。
以笔者项目，举个栗子:

1.添加自己的函数

在src目录下，新建分类目录或者选择一个分类，在子文件夹中添加函数模块文件（建议一个小功能保存为一个JS文件）。

1

2

3

4

5

6

7

8

9

10

11

/**

*

* @desc   判断是否NaN

* @param  {Any} value

* <a href=‘http://www.jobbole.com/members/wx1409399284‘>@return</a> {Boolean}

*/

function isNaN(value) {

return value !== value;

};

modules.export = isNaN

然后记得在src/index.js文件中暴露isNaN函数

2.单元测试

在test文件新建测试用例

1

2

3

4

5

6

7

8

describe(‘#isNaN()‘, function () {

it(`outils.isNaN(NaN) should return true`, function () {

assert(outils.isNaN(NaN))

})

it(`outils.isNaN(‘value‘) should return false`, function () {

assert.notEqual(outils.isNaN(NaN))

})

})

然后记得在test/index.html中引入之前创建的测试用例脚本。

3.测试并打包

执行npm run test，看所有的测试用例是否通过。如果没有问题，执行npm run build构建，之后提交到个人的 github 仓库即可。

4.发布到npm

在www.npmjs.com注册账号，修改本地package.json中的name、version、author等信息，最后npm publish就大功告成了。
注意：向npm发包，要把镜像源切到www.npmjs.com，使用cnpm等第三方镜像源会报错。

使用

1.浏览器

直接下载min目录下的outils.min.js，通过标签引入。

JavaScript

1

2

3

4

<script src="outils.min.js"></script>

<script>

var OS = outils.getOS()

</script>

注意： 本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到github Release页面下载对应版本号的代码。

2.Webpack、RequireJS、SeaJS等模块加载器

先使用npm安装outils。

1

$ npm install --save-dev outils

1

2

3

// 完整引入

const outils = require(‘outils‘)

const OS = outils.getOS()

推荐使用方法

1

2

3

// 按需引入require(‘outils/‘)

const getOS = require(‘outils/getOS‘)

const OS = getOS()

当然，你的开发环境有babel编译ES6语法的话，也可以这样使用：

1

2

3

import getOS from ‘outils/getOS‘

// 或

import { getOS } from "outils";

原文地址：https://www.cnblogs.com/faithZZZ/p/8309498.html

时间： 2024-10-07 04:40:24

常用函数汇总的相关文章

非常实用的PHP常用函数汇总

这篇文章主要介绍了非常实用的PHP常用函数,汇总了加密解密.字符串操作.文件操作.SQL注入等函数的实例与用法说明,在PHP项目开发中非常具有实用价值,需要的朋友可以参考下 本文实例总结了一些在php应用开发中常用到的函数,这些函数有字符操作,文件操作及其它的一些操作了,分享给大家供大家参考.具体如下: 1.PHP加密解密 PHP加密和解密函数可以用来加密一些有用的字符串存放在数据库里,并且通过可逆解密字符串,该函数使用了base64和MD5加密和解密. 复制代码 代码如下: function

PHP常用函数汇总

非常实用的PHP常用函数汇总:http://www.jb51.net/article/58610.htm PHP开发过程中常用函数收藏:http://www.jb51.net/article/21415.htm 非常实用的PHP常用函数汇总:http://www.jb51.net/article/58610.htm PHP常用函数总结(180多个):http://www.jb51.net/article/101179.htm 操作数据库的:http://www.jb51.net/article/

JavaScript之Array常用函数汇总

[20141121]JavaScript之Array常用功能汇总 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table

(转载)虚幻引擎3--UDK常用函数汇总--比较详细解释了一些类中的函数（有用，星月自己备注）

转自:http://www.mamicode.com/info-detail-590692.html foreach [用来遍历游戏中的数据,使用方法如下] local StaticMeshActor myActor; foreach AllActors(class'StaticMeshActor',myActor) { if(myActor.Tag == 'Box') { myActorSize.X = 1; myActorSize.Y = myActor.DrawScale3D.Y; myA

UDK常用函数汇总

转自:http://www.unrealchina.org/forum.php?mod=viewthread&tid=672&extra=page%3D1 foreach [用来遍历游戏中的数据,使用方法如下] local StaticMeshActor myActor; foreach AllActors(class'StaticMeshActor',myActor) { if(myActor.Tag == 'Box') { myActorSize.X = 1; myActorSize.

TensorFlow 常用函数汇总

本文介绍了tensorflow的常用函数,源自网上整理. TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CPU 还是 GPU, TensorFlow 能自动检测.如果检测到 GPU, TensorFlow 会尽可能地利用找到的第一个 GPU 来执行操作.并行计算能让代价大的算法计算加速执行,TensorFlow也在实现上对复杂操作进行了有效的改进.大部分核相关的操作都是设备相关的实现,比如GPU. 下面是一些

oracle常用函数汇总

一.运算符算术运算符:+ - * / 可以在select 语句中使用连接运算符:|| select deptno|| dname from dept; 比较运算符:> >= = != < <= like between is null in逻辑运算符:not and or 集合运算符: intersect ,union, union all, minus 要求:对应集合的列数和数据类型相同 查询中不能包含long 列 列的标签是第一个集合的标签 使用order by时,必须使用位置

javascript中常用函数汇总

js中函数很多,在实际项目开发中,函数的应用可以很大程度上简化我们的代码,所以在此记下开发中js中常用的函数,增强记忆. 1.isNaN(X):函数用于检查其参数是否是非数字值. 如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true.如果 x 是其他值,则返回 false.(是非数字值则为true,是数字则返回false) isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字.当然也可以用

PHP 字符串常用函数汇总

php中的函数很多,字符串函数也非常多,下面总结几个常用到的字符串函数.记录下来为以后翻阅. 1.字符串组合/连接 a>implode()  将一个一维数组的值转化为字符串 b>join()  别名 implode() 2.字符串分割 a>explode()  将字符串按照指定的分隔符组合成一个数组.数组中的值均是字符串的子串. b>str_split()  将字符串按照指定的长度组合成数组元素. 3.字符串截取 a>substr()  按照指定的位置和长度返回字符串的子串.