-
Notifications
You must be signed in to change notification settings - Fork 0
/
项目.html
191 lines (169 loc) · 7.44 KB
/
项目.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//柯里化又称部分求值,字面意思就是不会立刻求值,而是到了需要的时候再去求值.反柯里化的作用是,当我们调用某个方法,不用考虑这个对象在被设计时,是否拥有这个方法,只要这个方法适用于它,我们就可以对这个对象使用它。
//Curry 的核心思想是把多参数传入的函数拆成单参数(或部分)函数,内部再返回调用下一个单参数(或部分)函数,依次处理剩余的参数。
//应用场景:1.
var currying = function (fn) {
var args = Array.prototype.slice.call(arguments, 1); //获取第二个(或更多)参数,此处为 必要的小米
return function () {
var in_args = Array.prototype.slice.call(arguments); //将子函数调用时的参数转换为数组
fn.apply(null, args.concat(in_args)); //将第一步和第二部获得参数合并后给fn调用
}
}
var showTotal = function () {
var str = [].join.call(arguments, ';');
console.log(str)
}
var fn = currying(showTotal, '必要的小米');
//这样调用的好处就是参数复用,'必要的小米'这个参数可以避免多次传入
fn('橘子', '香蕉', '苹果'); //==>必要的小米;橘子;香蕉;苹果
fn('辣椒', '花生', '葡萄'); //==>必要的小米;辣椒;花生;葡萄
//升级版
//有时候应用中,同一种规则可能会反复使用,这就可能会造成代码的重复性。例如:
function square(i) {
return i * i;
}
function dubble(i) {
return i *= 2;
}
function map(handeler, list) {
return list.map(handeler);
}
// 数组的每一项平方
map(square, [1, 2, 3, 4, 5]);
map(square, [6, 7, 8, 9, 10]);
map(square, [10, 20, 30, 40, 50]);
// ......
// 数组的每一项加倍
map(dubble, [1, 2, 3, 4, 5]);
map(dubble, [6, 7, 8, 9, 10]);
map(dubble, [10, 20, 30, 40, 50]);
//利用柯里化改造一下: 把处理函数单独提取出来,重复利用。
//柯里化不仅仅是提高了代码的合理性,更重的它突出一种思想---降低适用范围,提高适用性。
var add = function (i, step) {
return (+i) + 10
}
var multiplication = function (i, step) {
return (+i) * 2
}
var dealTotal = function (handler, list) {
list = list.map(handler);
console.log(list, 'list');
}
var mapadd = currying(dealTotal, add);
mapadd([1, 2, 3, 4])
mapadd([5, 6, 7, 8])
mapadd([10, 20, 30, 40, 50])
var mapmulti = currying(dealTotal, multiplication);
mapmulti([1, 2, 3, 4])
mapmulti([5, 6, 7, 8])
mapmulti([10, 20, 30, 40, 50])
//2 延迟执行。柯里化的另一个应用场景是延迟执行。不断的柯里化,累积传入的参数,最后执行。
//利用闭包的特性,_args是被引用的内部变量,所以函数多次调用,该变量也不会被销毁。每次调用,args会被推入一个参数,到最后再累加
var add = function () {
var _this = this,
_args = arguments
return function () {
if (!arguments.length) {
var sum = 0;
for (var i = 0, c; c = _args[i++];) sum += c
return sum
} else {
Array.prototype.push.apply(_args, arguments)
return arguments.callee
}
}
}
var nums = add(1)(2)(3)(4)()
console.log(nums, 'nums') //==>10
//通用写法
var curry = function (fn) {
var _args = []
return function cb() {
if (arguments.length == 0) {
return fn.apply(this, _args)
}
Array.prototype.push.apply(_args, arguments);
return cb;
}
}
var add2 = function () {
var total = 0;
total = Array.prototype.reduce.call(arguments, (num1, num2) => {
return num1 + num2
})
return total
}
console.log(curry(add2)(1)(2)(3)(4)())
//3 固定易变因素。柯里化特性决定了它这应用场景。提前把易变因素,传参固定下来,生成一个更明确的应用函数。最典型的代表应用,是bind函数用以固定this这个易变对象。
Function.prototype.bind = function (context) {
var _this = this,
_args = Array.prototype.slice.call(arguments, 1);
return function () {
return _this.apply(context, _args.concat(Array.prototype.slice.call(arguments)))
}
}
var obj = { name: 'xiang' }
var hello = (function (address, age) {
console.log(this.name, arguments)
}).bind(obj, 1, 2, 3)
hello('hangzhou', 20)
//反柯里化
//http://www.cnblogs.com/hustskyking/archive/2013/04/09/uncurrying.html
//http://www.cnblogs.com/pigtail/p/3450852.html
//实现柯里化
function add(a, b, c, d) {
console.log(a + b + c + d)
}
function curry(fn, len = fn.length) {
var _args = [];
return function _curry() {
_args = [...arr, ...arguments];
if (len === arr.length) {
fn.apply(null, _args )
} else {
return _curry
}
}
}
var _add = curry(add);
_add(1,2)(3)(4) //==> 10
var list = [
{
name: 'lucy'
},
{
name: 'jack'
}
]
var prop = curry(function (key, obj) {
return obj[key];
});
function curry(fn) {
var args = Array.prototype.slice.call(arguments, 1);
console.log(args, 'args')
return function () {
fn(args)
}
}
var names = list.map(prop('name'));
console.log(names, 'names');
//1. 在项目中使用阿里云对象存储OSS
// 使用formData完成单个上传,改写webUploader插件使之兼容OSS的分片上传功能。
// webUploader源码量很多,需要修改大量代码使之兼容OSS的api。
//2. 搭建公司私有的vue组件库
// npm库基于git搭建,仅在公司内部使用,根据公司的业务需求封装一些常用的组件。
//配置webpack开发环境进行组件化开发,最近将webpack升级到了4+。
//3. 开发过的业务模块
//包括消息通知、考勤管理、日常打卡、活动管理、素质评价等模块,电脑端页面使用angular,微信端vue
</script>
</body>
</html>