函数柯里化是指将一个接收多个参数的函数转换成多个只接收单一参数的函数,且这些函数可以被连续调用的技术。在 JavaScript 中,可以使用闭包和函数绑定来实现函数柯里化。
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}
function add(a, b, c) {
return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6
console.log(curriedAdd(1, 2, 3)); // 6
function add(a, b, c) {
return a + b + c;
}
const curriedAdd = add.bind(null, 1, 2);
console.log(curriedAdd(3)); // 6
数据绑定是指将数据模型和视图绑定在一起,当模型数据发生变化时,视图也会自动更新。在 JavaScript 中,可以使用观察者模式来实现数据绑定。
class Observer {
constructor() {
this.observers = [];
}
subscribe(fn) {
this.observers.push(fn);
}
unsubscribe(fn) {
this.observers = this.observers.filter(observer => observer !== fn);
}
notify(data) {
this.observers.forEach(observer => observer(data));
}
}
class Model {
constructor(data) {
this.data = data;
this.observer = new Observer();
}
set(key, value) {
this.data[key] = value;
this.observer.notify(this.data);
}
get(key) {
return this.data[key];
}
bind(fn) {
this.observer.subscribe(fn);
}
}
const model = new Model({ name: '', age: '' });
function updateView(data) {
document.querySelector('#name').value = data.name;
document.querySelector('#age').value = data.age;
}
model.bind(updateView);
document.querySelector('#name').addEventListener('input', e => {
model.set('name', e.target.value);
});
document.querySelector('#age').addEventListener('input', e => {
model.set('age', e.target.value);
});