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