一步一步 的理解设计模式

本文借鉴书籍《JavaScript设计模式 张容铭》

写在认真阅读n遍以后。

第一篇

1，灵活的设计你的代码

假如有这样一个需求，需要你写一个注册登录页，要求验证邮箱，验证密码，验证手机号。最没有思考的实现方式：

function checkPhone(params) {
    
}
function checkMail(params) {
    
}
function checkPassword(params) {
    
}

功能划分清晰，一目了然，但是有个问题，你创建了很多全局变量，一个团队中，这样做就很危险，很难避免不会有人跟你的这些函数重名。尽管重名的情况一直都存在，我们要做的仅仅是尽量的减少全局变量的创建。于是乎,可以这样来实现：

const checkObj = {
     checkPhone(params) {
    
    },
    checkMail(params) {
        
    },
    checkPassword(params) {
        
    }
}

// 或者这样

function checkObjFun(params) {}
checkObjFun.checkPhone = {}
checkObjFun.checkMail = {}
checkObjFun.checkPassword = {}

嗯，很好的避免的大量全局对象的创建，但是还有一个问题，如果其他人需要使用你的方法，就只能通过checkObj.checkPhone（）的方式去调用。恰好其他人的验证密码的方式跟你的有所不同，就会比较麻烦，如果他直接修改的checkPassword方法，所有使用这个方法的位置都会被影响到。可以用一个对象的复制来避免上面的问题：

const checkObj = function(){
    return {
        checkPhone(params) {
    
        },
        checkMail(params) {
            
        },
        checkPassword(params) {
            
        }
    }
    
}

a，b使用者可以对两个对象进行任意的修改，两者不会相互影响。

const a = checkObj()
const b = checkObj()

console.log(a === b) // false

类也可以做到：

function CheckObj(params) {
    this.checkMail={}
    this.checkPassword={}
    this.checkPhone={}
}
const a = new CheckObj()
const b = new CheckObj()

console.log(a === b) // false

但是这么做成的消费是很奢侈的，每次实例化都需要重新创建一次方法函数，实际上，是可以做到不那么浪费的：

function CheckObj(params) {
}
CheckObj.prototype.checkMail = function() {}
CheckObj.prototype.checkPassword = function() {
    console.log(1)
}
CheckObj.prototype.checkPhone =  function (){}

const a = new CheckObj()
const b = new CheckObj()


console.log(a === b) // falsec

无论实例化多少次，都只会创建一次功能函数。每个实例还可以单独定制自己的方法，比如：b修改了checkPassword方法：

b.checkPassword = function(){
    console.log(2)
}
a.checkPassword() // 1
b.checkPassword() // 2

console.log(a === b) // false

只要不去修改原型上的方法，就不会相互影响。

代码还可以更简约一些，调用方法的时候可以实现链式调用：

function CheckObj(params) {
}
CheckObj.prototype.checkMail = function() {return this}
CheckObj.prototype.checkPassword = function() {
    console.log(1)
    return this
}
CheckObj.prototype.checkPhone =  function (){return this}



const a = new CheckObj()
a.checkMail().checkPassword().checkPhone()

2，面向对象编程