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();