前言

本篇博客包括后面的关于设计模式的博客均来源于《JavaScript设计模式》

工具方法

需求

我需要创建几个公用方法:用户名、邮箱、密码验证

最简单的实现

function checkName() {}

function checkMail() {}

function checkPwd() {}

弊端: 声明了三个全局变量,会有覆盖风险(比如别的地方存在同名函数,后者会 覆盖 前者)

函数的另一种形式

var checkName = function() {}
var checkMail = function() {}
var checkPwd = function() {}

好处:前者函数可能被覆盖不易被察觉,后者将它们保存在一个变量里,减少被覆盖或者覆盖的风险。 弊端:仍然有被覆盖风险,虽然被减少了

这里可能很多人不明白:函数和变量声明如果出现覆盖的情况是不同的结果,大家可以实验一下

对象收编变量

var CheckObject = {
  checkName = function() {},
  checkMail = function() {},
  checkPwd = function() {}
}

好处:这样减少了暴露在全局的变量 弊端:对象会存在相互影响

真假对象

var CheckObject = function() {
  return {
    checkName: function() {},
    checkMail: function() {},
    checkPwd: function() {}
  }
}

好处:这样我们去使用的时候可以var obj = new CheckObject()来创建一个实例调用方法,每个人使用的时候不会互相影响

模仿类

实际上效果和上面那个是一样的,如果不明白可以去了解一下new关键字做了什么

var CheckObject = function() {
  this.checkName = function() {},
  this.checkMail = function() {},
  this.checkPwd = function() {}
}

var a = new CheckObject();
a.checkName();
a.checkMail();
a.checkPwd();

方法连续调用

var CheckObject = function() {
  this.checkName = function() { return this; },
  this.checkMail = function() { return this; },
  this.checkPwd = function() { return this; }
}

var a = new CheckObject();
a.checkName().checkMail().checkPwd();

函数的祖先

Function.prototype.checkMail = function () {};

这样我们在使用这个方法的时候就很方便了,如果习惯函数形式,我们可以这么做。

var f = function(){};
f.checkMail();

如果习惯类的形式,可以这么做:

var f = new Function();
f.checkMail();

但是这样做污染了原生对象Function,所以别人创建函数也会被你的函数所污染,且造成了不必要的开销,我们可以仇晓一个统一添加方法的功能方法。

Function.prototype.addMethod = function(name, fn) {
  this[name] = fn;
}

链式添加

Function.prototype.addMethod = function(name, fn) {
  this[name] = fn;
  return this;
}

总结

JavaScript是一种灵活的语言,当然函数在其中扮演着一等公民。所以使用JavaScript,可以编写出更多优雅的艺术代码。