cody-utils 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/dist/cody-utils.min.js +30 -30
- package/package.json +8 -2
- package/.history/package_20200212101131.json +0 -19
- package/.history/package_20250527165758.json +0 -19
- package/.history/package_20250527165800.json +0 -19
- package/.history/package_20250527165806.json +0 -19
- package/.history/package_20250527165810.json +0 -19
- package/.history/package_20250527165815.json +0 -19
- package/.history/package_20250527165817.json +0 -19
- package/.history/package_20250527165826.json +0 -19
- package/.history/package_20250527165829.json +0 -19
- package/.history/package_20250527165835.json +0 -19
- package/.history/package_20250527170050.json +0 -19
- package/.history/package_20250527170051.json +0 -19
- package/.history/webpack.config_20200212101131.js +0 -23
- package/.history/webpack.config_20250527165622.js +0 -23
- package/.history/webpack.config_20250527165631.js +0 -23
- package/.history/webpack.config_20250527165643.js +0 -23
- package/.history/webpack.config_20250527165647.js +0 -23
- package/test/01_call_apply_bind.html +0 -47
- package/test/02_throttle_debounce.html +0 -54
- package/test/02_/345/207/275/346/225/260/351/230/262/346/212/226/344/270/216/350/212/202/346/265/201.jpg +0 -0
- package/test/03_array_declare.html +0 -51
- package/test/04_array_unique.html +0 -32
- package/test/05_array_concat_slice.html +0 -28
- package/test/06_array_flatten.html +0 -23
- package/test/07_array_compact_chunk.html +0 -25
- package/test/08_array_difference_merge.html +0 -22
- package/test/09_array_pull_pullAll.html +0 -27
- package/test/10_array_drop_dropRight.html +0 -32
- package/test/11_new_instanceof.html +0 -47
- package/test/12_object_merge.html +0 -34
- package/test/13_deepClone.html +0 -42
- package/test/13_shallowClone.html +0 -27
- package/test/13_/346/265/213/350/257/225/351/201/215/345/216/206/345/257/271/350/261/241/346/225/210/347/216/207.html +0 -38
- package/test/13_/346/265/213/350/257/225/351/201/215/345/216/206/346/225/260/347/273/204/346/225/210/347/216/207.html +0 -60
- package/test/14_string.html +0 -21
- package/test/15_/346/211/213/345/206/231/347/273/247/346/211/277.html +0 -53
- package/test/16_/346/211/213/345/206/231/344/272/213/344/273/266/346/200/273/347/272/277.html +0 -32
- package/test/17_/346/211/213/345/206/231/346/266/210/346/201/257/350/256/242/351/230/205/344/270/216/345/217/221/345/270/203.html +0 -48
- package/test/18_/346/211/213/345/206/231Promise.html +0 -49
- package/test/19_/346/211/213/345/206/231ajax/350/257/267/346/261/202/345/207/275/346/225/260.html +0 -102
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/01_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/346/225/260/347/273/204//346/225/260/347/273/204/345/270/270/350/247/201/346/223/215/344/275/2341.html +0 -48
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/01_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/346/225/260/347/273/204//346/225/260/347/273/204/345/270/270/350/247/201/346/223/215/344/275/2342.html +0 -74
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/01_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/346/225/260/347/273/204//346/225/260/347/273/204/345/270/270/350/247/201/346/223/215/344/275/2343.html +0 -53
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/01_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/346/225/260/347/273/204//346/225/260/347/273/204/345/270/270/350/247/201/346/223/215/344/275/2344.html +0 -54
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/02_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/346/240/210//346/240/210_/345/272/224/347/224/250_/345/215/201/350/277/233/345/210/266/350/275/254/344/272/214/350/277/233/345/210/266.html +0 -41
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/02_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/346/240/210//346/240/210_/346/265/213/350/257/225.html +0 -29
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/03_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/351/230/237/345/210/227//344/274/230/345/205/210/347/272/247/351/230/237/345/210/227_/346/265/213/350/257/225.html +0 -29
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/03_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/351/230/237/345/210/227//351/230/237/345/210/227_/345/272/224/347/224/250_/345/207/273/351/274/223/344/274/240/350/212/261.html +0 -38
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/03_/345/237/272/346/234/254/346/225/260/346/215/256/347/273/223/346/236/204_/351/230/237/345/210/227//351/230/237/345/210/227_/346/265/213/350/257/225.html +0 -33
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/04_/346/225/260/346/215/256/347/273/223/346/236/204_/351/223/276/350/241/250//345/217/214/345/220/221/351/223/276/350/241/250_/346/265/213/350/257/225.html +0 -55
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/04_/346/225/260/346/215/256/347/273/223/346/236/204_/351/223/276/350/241/250//351/223/276/350/241/250_/346/265/213/350/257/225.html +0 -52
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/05_/346/225/260/346/215/256/347/273/223/346/236/204_/346/240/221//344/272/214/345/217/211/346/220/234/347/264/242/346/240/221_/346/265/213/350/257/225.html +0 -48
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/06_/346/225/260/346/215/256/347/273/223/346/236/204_/351/233/206/345/220/210//351/233/206/345/220/210_/346/265/213/350/257/225.html +0 -50
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/07_/346/216/222/345/272/217/347/256/227/346/263/225/3/347/247/215/345/237/272/346/234/254/346/216/222/345/272/217_/346/265/213/350/257/225.html +0 -19
- package/test/20_/346/225/260/346/215/256/347/273/223/346/236/204/344/270/216/347/256/227/346/263/225/07_/346/216/222/345/272/217/347/256/227/346/263/225//351/253/230/347/272/247/346/216/222/345/272/217_/346/265/213/350/257/225.html +0 -19
- package/test/README.md +0 -207
- package/test/db.json +0 -54
- package/webpack.config.js +0 -23
- package//350/207/252/345/256/232/344/271/211npm/345/267/245/345/205/267/345/272/223.md +0 -91
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "atgucodyigu-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "xfzhang",
|
5
|
-
"description": "尚硅谷大前端自定义工具函数库",
|
6
|
-
"keywords": ["atguigu", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/atguigu-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "xfzhang",
|
5
|
-
"description": "尚硅谷大前端自定义工具函数库",
|
6
|
-
"keywords": ["atguigu", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/atguigu-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "xfzhang",
|
5
|
-
"description": "尚硅谷大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/atguigu-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "xfzhang",
|
5
|
-
"description": "尚硅谷大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/cody-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "xfzhang",
|
5
|
-
"description": "大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/cody-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "yu",
|
5
|
-
"description": "大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/cody-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "cody",
|
5
|
-
"description": "大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/cody-utils.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "cody",
|
5
|
-
"description": "大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/cody-utils.minjs",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "cody-utils",
|
3
|
-
"version": "1.0.1",
|
4
|
-
"author": "cody",
|
5
|
-
"description": "大前端自定义工具函数库",
|
6
|
-
"keywords": ["cody", "utils", "array", "object", "function", "promise", "axios", "数据结构", "算法"],
|
7
|
-
"main": "dist/cody-utils.min.js",
|
8
|
-
"license": "MIT",
|
9
|
-
"scripts": {
|
10
|
-
"build": "webpack --watch"
|
11
|
-
},
|
12
|
-
"devDependencies": {
|
13
|
-
"webpack": "^4.41.5",
|
14
|
-
"webpack-cli": "^3.3.10"
|
15
|
-
},
|
16
|
-
"dependencies": {
|
17
|
-
"lodash": "^4.17.15"
|
18
|
-
}
|
19
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
const path = require('path')
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
mode: 'development',
|
5
|
-
mode: 'production',
|
6
|
-
// entry: './src/index.js',
|
7
|
-
|
8
|
-
output: {
|
9
|
-
path: path.resolve(__dirname, 'dist'),
|
10
|
-
// filename: 'atguigu-utils.js',
|
11
|
-
filename: 'atguigu-utils.min.js',
|
12
|
-
libraryTarget: 'umd', // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
|
13
|
-
library: 'aUtils' // 向外暴露的对象的名称
|
14
|
-
},
|
15
|
-
externals: {
|
16
|
-
lodash: {
|
17
|
-
commonjs: 'lodash',
|
18
|
-
commonjs2: 'lodash',
|
19
|
-
amd: 'lodash',
|
20
|
-
root: '_' // 页面引入的全局变量
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
const path = require('path')
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
mode: 'development',
|
5
|
-
mode: 'production',
|
6
|
-
// entry: './src/index.js',
|
7
|
-
|
8
|
-
output: {
|
9
|
-
path: path.resolve(__dirname, 'dist'),
|
10
|
-
// filename: 'atguigu-utils.js',
|
11
|
-
filename: 'atguigu-utils.min.js',
|
12
|
-
libraryTarget: 'umd', // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
|
13
|
-
library: 'cUtils' // 向外暴露的对象的名称
|
14
|
-
},
|
15
|
-
externals: {
|
16
|
-
lodash: {
|
17
|
-
commonjs: 'lodash',
|
18
|
-
commonjs2: 'lodash',
|
19
|
-
amd: 'lodash',
|
20
|
-
root: '_' // 页面引入的全局变量
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
const path = require('path')
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
mode: 'development',
|
5
|
-
mode: 'production',
|
6
|
-
// entry: './src/index.js',
|
7
|
-
|
8
|
-
output: {
|
9
|
-
path: path.resolve(__dirname, 'dist'),
|
10
|
-
// filename: 'atguigu-utils.js',
|
11
|
-
filename: 'cody-utils.min.js',
|
12
|
-
libraryTarget: 'umd', // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
|
13
|
-
library: 'cUtils' // 向外暴露的对象的名称
|
14
|
-
},
|
15
|
-
externals: {
|
16
|
-
lodash: {
|
17
|
-
commonjs: 'lodash',
|
18
|
-
commonjs2: 'lodash',
|
19
|
-
amd: 'lodash',
|
20
|
-
root: '_' // 页面引入的全局变量
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
const path = require('path')
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
mode: 'development',
|
5
|
-
// mode: 'production',
|
6
|
-
// entry: './src/index.js',
|
7
|
-
|
8
|
-
output: {
|
9
|
-
path: path.resolve(__dirname, 'dist'),
|
10
|
-
// filename: 'atguigu-utils.js',
|
11
|
-
filename: 'cody-utils.min.js',
|
12
|
-
libraryTarget: 'umd', // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
|
13
|
-
library: 'cUtils' // 向外暴露的对象的名称
|
14
|
-
},
|
15
|
-
externals: {
|
16
|
-
lodash: {
|
17
|
-
commonjs: 'lodash',
|
18
|
-
commonjs2: 'lodash',
|
19
|
-
amd: 'lodash',
|
20
|
-
root: '_' // 页面引入的全局变量
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
const path = require('path')
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
mode: 'development',
|
5
|
-
// mode: 'production',
|
6
|
-
entry: './src/index.js',
|
7
|
-
|
8
|
-
output: {
|
9
|
-
path: path.resolve(__dirname, 'dist'),
|
10
|
-
// filename: 'atguigu-utils.js',
|
11
|
-
filename: 'cody-utils.min.js',
|
12
|
-
libraryTarget: 'umd', // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
|
13
|
-
library: 'cUtils' // 向外暴露的对象的名称
|
14
|
-
},
|
15
|
-
externals: {
|
16
|
-
lodash: {
|
17
|
-
commonjs: 'lodash',
|
18
|
-
commonjs2: 'lodash',
|
19
|
-
amd: 'lodash',
|
20
|
-
root: '_' // 页面引入的全局变量
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>函数的call/apply/bind()</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
|
11
|
-
<!--
|
12
|
-
1. 区别call()/apply()/bind()
|
13
|
-
call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值
|
14
|
-
bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值
|
15
|
-
注意: 如果obj是null/undefined, this为window
|
16
|
-
2. 应用
|
17
|
-
call()/bind()应用: 根据伪数组生成真数组
|
18
|
-
bind(): react中组件的自定义方法 / vue中的事件回调函数内部
|
19
|
-
3. 自定义call()/apply()
|
20
|
-
1). 给obj添加一个临时方法, 方法名任意, 值为当前函数
|
21
|
-
2). 通过obj调用这个临时方法, 并将接收的参数传入
|
22
|
-
3). 删除obj上的这个临时方法属性
|
23
|
-
4. 自定义实现bind()
|
24
|
-
1). 返回一个新函数
|
25
|
-
2). 在新函数内部通过原函数对象的call方法来执行原函数
|
26
|
-
指定this为obj
|
27
|
-
指定参数为bind调用的参数和后面新函数调用的参数
|
28
|
-
-->
|
29
|
-
|
30
|
-
<script src="../dist/atguigu-utils.js"></script>
|
31
|
-
<script>
|
32
|
-
function fn(a, b) {
|
33
|
-
console.log(a, b, this)
|
34
|
-
}
|
35
|
-
|
36
|
-
const obj = {m: 1}
|
37
|
-
|
38
|
-
aUtils.call(fn, obj, 2, 3) // 相当于执行了obj.fn(2, 3)
|
39
|
-
aUtils.apply(fn, obj, [2, 3])
|
40
|
-
aUtils.call(fn, undefined, 2, 3)
|
41
|
-
|
42
|
-
aUtils.bind(fn, obj)(2, 3)
|
43
|
-
aUtils.bind(fn, obj, 4)(2, 3)
|
44
|
-
aUtils.bind(fn, undefined, 4)(2, 3)
|
45
|
-
</script>
|
46
|
-
</body>
|
47
|
-
</html>
|
@@ -1,54 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>函数节流与防抖</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
|
11
|
-
<button id="throttle">测试函数节流</button>
|
12
|
-
<button id="debounce">测试函数防抖</button>
|
13
|
-
|
14
|
-
<!--
|
15
|
-
1. 事件频繁触发可能造成的问题?
|
16
|
-
1). 一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题
|
17
|
-
2). 如果向后台发送请求,频繁触发,对服务器造成不必要的压力
|
18
|
-
|
19
|
-
2. 如何限制事件处理函数频繁调用
|
20
|
-
1). 函数节流
|
21
|
-
2). 函数防抖
|
22
|
-
|
23
|
-
3. 函数节流(throttle)
|
24
|
-
1). 理解:
|
25
|
-
在函数需要频繁触发时: 函数执行一次后,只有大于设定的执行周期后才会执行第二次
|
26
|
-
适合多次事件按时间做平均分配触发
|
27
|
-
2). 场景:
|
28
|
-
窗口调整(resize)
|
29
|
-
页面滚动(scroll)
|
30
|
-
DOM 元素的拖拽功能实现(mousemove)
|
31
|
-
抢购疯狂点击(click)
|
32
|
-
|
33
|
-
4. 函数防抖(debounce)
|
34
|
-
1). 理解:
|
35
|
-
在函数需要频繁触发时: 在规定时间内,只让最后一次生效,前面的不生效。
|
36
|
-
适合多次事件一次响应的情况
|
37
|
-
2). 场景:
|
38
|
-
输入框实时搜索联想(keyup/input)
|
39
|
-
-->
|
40
|
-
|
41
|
-
<script src="../dist/atguigu-utils.js"></script>
|
42
|
-
<script>
|
43
|
-
/* 处理点击事件的回调函数 */
|
44
|
-
function handleClick(event) { // 处理事件的回调
|
45
|
-
console.log('处理点击事件', this, event)
|
46
|
-
}
|
47
|
-
|
48
|
-
// document.getElementById('throttle').onclick = handleClick
|
49
|
-
document.getElementById('throttle').onclick = aUtils.throttle(handleClick, 2000)
|
50
|
-
document.getElementById('debounce').onclick = aUtils.debounce(handleClick, 2000)
|
51
|
-
</script>
|
52
|
-
|
53
|
-
</body>
|
54
|
-
</html>
|
Binary file
|
@@ -1,51 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>数组声明式方法</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<script src="../dist/atguigu-utils.js"></script>
|
11
|
-
<script>
|
12
|
-
/*
|
13
|
-
自定义实现一组数组声明式方法
|
14
|
-
1). map()
|
15
|
-
2). reduce()
|
16
|
-
3). filter()
|
17
|
-
4). find()
|
18
|
-
5). findIndex()
|
19
|
-
6). every()
|
20
|
-
7). some()
|
21
|
-
*/
|
22
|
-
/*
|
23
|
-
需求:
|
24
|
-
1. 产生一个每个元素都比原来大10的新数组
|
25
|
-
2. 得到所有奇数的和
|
26
|
-
3. 得到值大于8且下标是偶数位的元素组成的数组
|
27
|
-
4. 找出一个值大于8且下标是偶数位的元素
|
28
|
-
5. 找出一个值大于8且下标是偶数位的元素的下标
|
29
|
-
6. 判断下标为偶数的元素是否都为奇数
|
30
|
-
7. 判断是否有下标为偶数的元素值为奇数
|
31
|
-
*/
|
32
|
-
|
33
|
-
const arr = [1, 3, 6, 9, 15, 19, 16]
|
34
|
-
|
35
|
-
console.log(aUtils.map(arr, (item, index) => item + 10))
|
36
|
-
console.log(aUtils.reduce(arr, (preTotal, item, index) => {
|
37
|
-
return preTotal + (item%2===1 ? item : 0)
|
38
|
-
}, 0))
|
39
|
-
console.log(aUtils.filter(arr, (item, index) => item>8 && index%2===0))
|
40
|
-
console.log(aUtils.find(arr, (item, index) => item>8 && index%2===0))
|
41
|
-
console.log(aUtils.findIndex(arr, (item, index) => item>8 && index%2===0))
|
42
|
-
console.log(aUtils.every(arr, (item, index) => index%2===1 || item%2===1))
|
43
|
-
console.log(aUtils.some(arr, (item, index) => index%2===1 || item%2===1))
|
44
|
-
aUtils.test()
|
45
|
-
</script>
|
46
|
-
|
47
|
-
<script>
|
48
|
-
|
49
|
-
</script>
|
50
|
-
</body>
|
51
|
-
</html>
|
@@ -1,32 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
|
4
|
-
<head>
|
5
|
-
<meta charset="UTF-8">
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
8
|
-
<title>数组去重</title>
|
9
|
-
</head>
|
10
|
-
|
11
|
-
<body>
|
12
|
-
<!--
|
13
|
-
1). 理解:
|
14
|
-
创建一个不重复的数组副本, 只有首次出现的元素才会被保留
|
15
|
-
如: uniq([2, 3, 2, 7, 6, 7]) ==> [2, 3, 7, 6]
|
16
|
-
2). 实现:
|
17
|
-
方法1: 利用forEach()和indexOf()
|
18
|
-
说明: 本质是双重遍历, 效率差些
|
19
|
-
方法2: 利用forEach() + 对象容器
|
20
|
-
说明: 只需一重遍历, 效率高些
|
21
|
-
方法3: 利用ES6语法: from + Set 或者 ... + Set
|
22
|
-
说明: 编码简洁
|
23
|
-
-->
|
24
|
-
<script src="../dist/atguigu-utils.js"></script>
|
25
|
-
<script>
|
26
|
-
console.log(aUtils.unique1([2, 3, 2, 7, 6, 7]))
|
27
|
-
console.log(aUtils.unique2([2, 3, 2, 7, 6, 7]))
|
28
|
-
console.log(aUtils.unique3([2, 3, 2, 7, 6, 7]))
|
29
|
-
</script>
|
30
|
-
</body>
|
31
|
-
|
32
|
-
</html>
|
@@ -1,28 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>数组合并与切片</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
|
11
|
-
<script src="../dist/atguigu-utils.js"></script>
|
12
|
-
<script>
|
13
|
-
/*
|
14
|
-
1. concat()
|
15
|
-
语法: var newArray = concat(oldArr, value1[, value2[, ...[, valueN]]])
|
16
|
-
功能: 将n个数组或值与当前数组合并生成一个新数组
|
17
|
-
2. slice()
|
18
|
-
语法: var newArray = slice(oldArr, [begin[, end]])
|
19
|
-
功能: 返回一个由 begin 和 end 决定的原数组的浅拷贝, 原始数组不会被改变
|
20
|
-
*/
|
21
|
-
console.log(aUtils.concat([1, 2], [3, 4], 6)) // [1, 2, 3, 4, 6]
|
22
|
-
|
23
|
-
console.log(aUtils.slice([1, 3, 5, 7, 9])) // [1, 3, 5, 7, 9]
|
24
|
-
console.log(aUtils.slice([1, 3, 5, 7, 9], 1, 3)) // [3, 5]
|
25
|
-
console.log(aUtils.slice([1, 3, 5, 7, 9], 1, 10)) // [3, 5, 7, 9]
|
26
|
-
</script>
|
27
|
-
</body>
|
28
|
-
</html>
|
@@ -1,23 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>数组扁平化</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<!--
|
11
|
-
数组扁平化: 取出嵌套数组(多维)中的所有元素放到一个新数组(一维)中
|
12
|
-
如: [1, [3, [2, 4]]] ==> [1, 3, 2, 4]
|
13
|
-
-->
|
14
|
-
<script src="../dist/atguigu-utils.js"></script>
|
15
|
-
<script>
|
16
|
-
// [1] ---> [1, 3, 2, 4]
|
17
|
-
// [3, [2, 4]] --> [3] --> [3, 2, 4]
|
18
|
-
// [2, 4] --> [2, 4]
|
19
|
-
console.log(aUtils.flatten1([1, [3, [2, 4]]]))
|
20
|
-
console.log(aUtils.flatten2([1, [3, [2, 4]]]))
|
21
|
-
</script>
|
22
|
-
</body>
|
23
|
-
</html>
|
@@ -1,25 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>数组取真与数组分块</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<!--
|
11
|
-
1). compact(array): 返回数组中所有真值元素组成的新数组
|
12
|
-
2). chunk(array, size): 将数组拆分成多个 size 长度的区块,每个区块组成小数组,整体组成一个二维数组
|
13
|
-
-->
|
14
|
-
<script src="../node_modules/lodash/lodash.js"></script>
|
15
|
-
<!-- <script src="../dist/atguigu-utils.js"></script> -->
|
16
|
-
<script src="../dist/atguigu-utils.min.js"></script>
|
17
|
-
<script>
|
18
|
-
console.log(aUtils.compact([0, 1, false, true, '', 'abc'])) // [1, true, 'abc']
|
19
|
-
console.log(aUtils.chunk([1, 2, 3, 4, 5, 6, 7], 3)) // [[1,2,3], [4,5,6],[7]]
|
20
|
-
console.log(aUtils.chunk([1, 2, 3, 4, 5, 6, 7]))// [[1],[2],[3],[4],[5],[6],[7]]
|
21
|
-
console.log(aUtils.chunk([1, 2, 3, 4, 5, 6, 7], 8))// [[1, 2, 3, 4, 5, 6, 7]]
|
22
|
-
console.log(aUtils.chunk2([1, 2, 3, 4, 5, 6, 7], 8))// [[1, 2, 3, 4, 5, 6, 7]]
|
23
|
-
</script>
|
24
|
-
</body>
|
25
|
-
</html>
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>difference和merge</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<!--
|
11
|
-
1. difference(arr1, arr2): 得到当前数组中所有不在arr中的元素组成的数组(不改变原数组)
|
12
|
-
如: difference([1,3,5,7], [5, 8]) ==> [1, 3, 7]
|
13
|
-
2. merge(arr1, arr2): 将arr2与arr1的元素进行合并组成一个新的数组(不改变原数组)
|
14
|
-
如: merge([1,3,5,7,5], [1, 5, 8]) ==> [1, 3, 5, 7, 5, 8]
|
15
|
-
-->
|
16
|
-
<script src="../dist/atguigu-utils.js"></script>
|
17
|
-
<script>
|
18
|
-
console.log(aUtils.difference([1,3,5,7], [5, 8]))
|
19
|
-
console.log(aUtils.mergeArray([1,3,5,7,5], [1, 5, 8]))
|
20
|
-
</script>
|
21
|
-
</body>
|
22
|
-
</html>
|
@@ -1,27 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>pull与pullAll</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<!--
|
11
|
-
1. pull(array, ...values):
|
12
|
-
删除数组中与value相同的元素, 返回所有删除元素的数组
|
13
|
-
说明: 数组发生了改变
|
14
|
-
如: pull([1,3,5,3,7], 2, 7, 3, 7) ===> 数组变为[1, 5], 返回值为[3,3,7]
|
15
|
-
2. pullAll(array, values):
|
16
|
-
功能与pull一致, 只是参数变为数组
|
17
|
-
如: pullAll([1,3,5,3,7], [2, 7, 3, 7]) ===> 数组变为[1, 5], 返回值为[3,3,7]
|
18
|
-
-->
|
19
|
-
<script src="../dist/atguigu-utils.js"></script>
|
20
|
-
<script>
|
21
|
-
var arr = [1,3,5,3,7]
|
22
|
-
console.log(aUtils.pull(arr, 2, 7, 3, 7), arr)
|
23
|
-
var arr2 = [1,3,5,3,7]
|
24
|
-
console.log(aUtils.pullAll(arr2, [2, 7, 3, 7]), arr2)
|
25
|
-
</script>
|
26
|
-
</body>
|
27
|
-
</html>
|
@@ -1,32 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7
|
-
<title>drop与dropRight</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<!--
|
11
|
-
1. drop(array, count):
|
12
|
-
得到数组过滤掉左边count个后剩余元素组成的数组
|
13
|
-
说明: 不改变当前数组, count默认是1
|
14
|
-
如: drop([1,3,5,7], 2) ===> [5, 7]
|
15
|
-
2. dropRight(array, count):
|
16
|
-
得到数组过滤掉右边count个后剩余元素组成的数组
|
17
|
-
说明: 不改变数组, count默认是1
|
18
|
-
如: dropRight([1,3,5,7], 2) ===> [1, 3]
|
19
|
-
-->
|
20
|
-
<script src="../dist/atguigu-utils.js"></script>
|
21
|
-
<script>
|
22
|
-
console.log(aUtils.drop([1,3,5,7], 2))
|
23
|
-
console.log(aUtils.drop([1,3,5,7], 4))
|
24
|
-
console.log(aUtils.drop([1,3,5,7]))
|
25
|
-
|
26
|
-
console.log(aUtils.dropRight([1,3,5,7], 2))
|
27
|
-
console.log(aUtils.dropRight([1,3,5,7], 4))
|
28
|
-
console.log(aUtils.dropRight([1,3,5,7]))
|
29
|
-
|
30
|
-
</script>
|
31
|
-
</body>
|
32
|
-
</html>
|