javascript 设计模式（读书笔记）

javascript 设计模式

电子书链接@ 余杭子曰

用对象收编变量,防止变量覆盖和变量污染

let checkObject = {checkEmail: function () {console.log("邮箱校验");},checkPhone: function () {console.log("手机号校验");},checkPasswork: function () {console.log("密码校验");},
};checkObject.checkEmail();
// 缺点,别人如果想要调用该方法可能会影响原来的代码let copyObject = checkObject;
copyObject.checkEmail();

对象的另一种形式 `函数`

let checkObjectFn = function () {};
checkObjectFn.checkEmail = function () {console.log("邮箱校验");
};
checkObjectFn.checkPhone = function () {console.log("手机校验");
};
checkObjectFn.checkPasswork = function () {console.log("密码校验");
};// 调用
checkObjectFn.checkEmail();

真假对象

可以使用函数返回一个对象,这样每次声明的时候都会生成一个新对象,不会影响之前的对象方法

function checkObjectFn() {return {checkEmail: function () {console.log("邮箱校验");},checkPhone: function () {console.log("手机号校验");},checkPasswork: function () {console.log("密码校验");},};
}// 调用checkObjectFn().checkEmail();

类也可以

函数也可以写成类的形式
下面写法缺点: 每次示例对象时,都会复制一边 this 上的属性和方法. 会造成不必要的性能浪费.

function checkObjectFn() {this.checkEmail = function () {console.log("邮箱检验");};this.checkPhone = function () {console.log("手机检验");};this.checkPassword = function () {console.log("密码检验");};
}let a = new checkObjectFn();
a.checkEmail();

检测类

可以将公共方法同意挂载在原型对象上. 这样示例对象就可以通过 __proto__ 一直找,直到找到为止

let CheckObjectFn = function () {};
CheckObjectFn.prototype.checkEmail = function () {console.log("邮箱验证");
};CheckObjectFn.prototype.checkPhone = function () {console.log("手机验证");
};CheckObjectFn.prototype.checkPassword = function () {console.log("密码验证");
};let a = new CheckObjectFn();
a.checkEmail();// 简化写法
let CheckObjectFn = function () {};
CheckObjectFn.prototype = {checkEmail: function () {console.log("邮箱验证");},checkPhone: function () {console.log("手机验证");},checkPassword: function () {console.log("密码验证");},
};let a = new CheckObjectFn();
a.checkEmail();
a.checkPhone();
a.checkPassword();

注意 :这两种书写方式不能混合使用,要不可能出现方法覆盖,方法找不到的情况

链式调用

链式调用时只需要在函数调用的同时,将当前 this返回出去即可

let CheckObjectFn = function () {};
CheckObjectFn.prototype = {checkEmail: function () {console.log("邮箱验证");return this;},checkPhone: function () {console.log("手机验证");return this;},checkPassword: function () {console.log("密码验证");return this;},
};let a = new CheckObjectFn();a.checkEmail().checkPassword().checkPhone();

函数高级用法

我们可以在不声明变量的情况下,直接在 Function 函数的原型对象上面挂方法

Function.prototype.checkEmail = function () {console.log("邮箱验证");
};Function.prototype.checkPhone = function () {console.log("手机验证");
};Function.prototype.checkPassword = function () {console.log("密码验证");
};let a = function () {};
a.checkEmail();

注意:虽然 javascript 支持上面写法,但是为了代码的可维护性最好不要这样书写代码.可以使用下述代码替代

Function.prototype.addMethods = function (funcname, fn) {this[funcname] = fn;
};let a = function () {}; // 等同于 let a  = new Function()
a.addMethods("checkEmail", function () {console.log("邮箱验证");
});a.addMethods("checkPhone", function () {console.log("手机验证");
});
a.addMethods("checkPassword", function () {console.log("密码验证");
});a.checkEmail();
a.checkPhone();
a.checkPassword();// 链式调用
a.addMethods("checkEmail", function () {console.log("邮箱验证");return this;
});a.addMethods("checkPhone", function () {console.log("手机验证");return this;
});
a.addMethods("checkPassword", function () {console.log("密码验证");return this;
});
a.checkEmail().checkPhone().checkPassword();