这里先分类整理下，之前项目中多次用到的工具函数。
1.Array
|
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}
*/
{
;
;
{
;
}
;
}
|
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
*/
;
{
{
;
}
}
|
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}
*/
{
;
}
|
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
*/
;
{
{
;
;
}
}
|
3.Cookie
3.1 getCookie
|
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}
*/
{
;
{
;
{
;
}
}
;
}
|
3.2 removeCookie
|
1
2
3
4
5
6
7
8
9
10
|
;
/**
*
* @desc 根据name删除cookie
* @param {String} name
*/
{
// 设置已过期，系统会立刻删除cookie
;
}
|
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
*/
{
;
;
;
}
|
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}
*/
{
,
,
;
:
:
:
:
:
:
;
// 根据关系进行判断
)
)
)
)
)
)
'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}
*/
{
;
;
;
'MacOSX'
'windows'
'linux'
'ios'
'android'
'windowsPhone'
}
|
5.Dom
5.1 getScrollTop
|
1
2
3
4
5
6
7
|
/**
*
* @desc 获取滚动条距顶部的距离
*/
{
;
}
|
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} }
*/
{
{
,
0
;
{
;
;
;
;
;
}
|
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
|
;
;
{
||
||
||
{
;
;
;
/**
*
* @desc 在${duration}时间内，滚动条平滑滚动到${to}指定位置
* @param {Number} to
* @param {Number} duration
*/
{
{
;
;
}
;
diff
|
5.4 setScrollTop
|
1
2
3
4
5
6
7
8
|
/**
*
* @desc 设置滚动条距顶部的距离
*/
{
;
;
}
|
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
|
{
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
'\''
;
/**
* @desc 根据keycode获得键名
* @param {Number} keycode
* <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {String}
*/
{
{
;
{
;
;
}
;
|
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
*/
{
;
// Handle the 3 simple types, and null or undefined
;
// Handle Date
{
;
;
;
}
// Handle Array
{
;
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}
*/
{
)
false
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}
*/
{
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}
*/
{
;
}
|
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}
*/
{
;
}
|
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}
*/
{
)
}
|
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}
*/
{
)
}
|
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}
*/
{
#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/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}
*/
{
;
[
,
'玖'
;
[
,
]
;
{
;
{
;
;
}
;
}
)
)
;
;
|
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}
*/
{
;
}
|
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}
*/
{
,
,
,
,
,
,
;
'刚刚'
}
|
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}
*/
{
//开始时间
//结束时间
//时间差
,
,
,
;
{
;
;
;
;
}
;
}
|
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}
*/
{
url
)
{
}
}
)
}
|
13.2 stringfyQueryString
|
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}
*/
{
;
;
{
;
{
{
;
}
;
}
;
}
;
}
|
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} 新的节流函数
*/
{
// After wrapper has stopped being called, this timeout ensures that
// `callback` is executed at the proper times in `throttle` and `end`
// debounce modes.
;
// Keep track of the last time `callback` was executed.
;
// `noTrailing` defaults to falsy.
{
;
;
;
}
// The `wrapper` function encapsulates all of the throttling / debouncing
// functionality and when executed will limit the rate at which `callback`
// is executed.
{
;
;
;
// Execute `callback` and update the `lastExec` timestamp.
{
;
;
}
// If `debounceMode` is true (at begin) this is used to clear the flag
// to allow future `callback` executions.
{
;
}
{
// Since `wrapper` is being called for the first time and
// `debounceMode` is true (at begin), execute `callback`.
;
}
// Clear any existing timeout.
{
;
}
{
// In throttle mode, if `delay` time has been exceeded, execute
// `callback`.
;
{
// 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.
;
}
}
// Return the wrapper function.
;
;
|
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} 新的防抖函数。
*/
;
{
;
;
|
封装
除了对上面这些常用函数进行封装， 最重要的是支持合理化的引入，这里我们使用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
yml
LICENSE
json
md
// 拷贝到根路径的函数模块，方便按需加载
js
js
.
.
min
// 所有函数统一打包生成的全量压缩包
// 本项目开发脚本目录
// 打包构建脚本
// 测试脚本
// webpack打包配置文件
// 源码目录
// webpack入口文件
array
class
cookie
device
dom
keycode
object
random
regexp
string
support
time
url
// 测试用例目录
js
js
js
js
js
html
js
js
js
js
js
js
js
js
// 测试所用到的第三方库
css
js
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
|
.
.
// 删除旧的全量压缩包
{
)
{
)
)
{
,
,
,
,
false
)
)
)
)
)
.
.
|
第二步，拷贝函数模块至根目录，先删除根目录中之前的函数模块，后拷贝src下面一层目录的所有js文件至根目录。这么做的目的是，拷贝到根路径，在引入的时候，直接require('outils/')即可，缩短引入的路径，也算是提高点效率。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 替换模块文件
.
.
// 先删除根目录中之前的函数模块
{
)
)
{
// 拷贝`src`下面一层目录的所有`js`文件至根目录
{
;
{
)
)
}
)
)
)
.
.
|
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}
*/
;
;
isNaN
|
然后记得在src/index.js文件中暴露isNaN函数
2.单元测试
在test文件新建测试用例
|
1
2
3
4
5
6
7
8
|
{
{
)
)
{
)
)
)
|
然后记得在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 ，通过标签引入。
|
1
2
3
4
|
</script>
<script>
)
</script>
|
注意： 本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到 github Release 页面下载对应版本号的代码。
2.Webpack、RequireJS、SeaJS等模块加载器
先使用npm安装outils。
|
1
|
outils
|
|
1
2
3
|
// 完整引入
)
)
|
推荐使用方法
|
1
2
3
|
// 按需引入require('outils/')
)
)
|
当然，你的开发环境有babel编译ES6语法的话，也可以这样使用：
|
1
2
3
|
'outils/getOS'
// 或
;
|