灵活的语言-JavaScript

场景一：登录模块，需要验证姓名，验证邮箱，验证密码，是否按照规则输入等

这是最基础的场景和需求

曾经的我，一言不合，一把梭子开始撸

function checkName() {
    // 验证名称
}
function checkEmail() {
    // 验证邮箱
}
function checkPassword() {
    // 验证密码
}

没毛病，实现需求了，而且在业务上也能够实现但是对于一个顿悟一点点的猿猴来说, 这无异于在全局声明了三个变量，并将相应的函数赋值给这三个变量,类似于下面这样

var checkName = function () {
    // 验证姓名
}
var checkEmail = function () {
    // 验证邮箱
}
var checkPassword = function () {
    // 验证密码
}

方案一 (一个对象收编变量)

var checkObject ={
    checkName: function () {
    // 验证姓名
    }
    checkEmail: function () {
    // 验证邮箱
    }
    checkPassword: function () {
    // 验证密码
    }
}

此时我们将所有的函数作为 CheckObject 对象的方法,这样我们就只有一个对象,而我们要想使用它们也很简单，比如检测姓名 CheckObject.checkName()， 只是在我们原来使用的函数式前面多了一个对象名称

方案二 (对象的另一种形式)

var CheckObject = function () {};
CheckObject.checkName = function () {
    // 验证姓名
}
CheckObject.checkEmail = function () {
    // 验证邮箱
}
CheckObject.checkPassword = function () {
    // 验证密码
}

使用和前面的方式是一样的，比如 CheckObject.checkName(), 但是当别人想用你写的对象方法时就有些麻烦了,因为这个对象不能复制一份,或者说这个对象类在用new 关键字创建新的对象时, 新创建的对象是不能继承这些方法的

改革(一)

var CheckObject = function () {
    return {
        checkName: function () {
            // 验证姓名
        }
        checkEmail: function () {
            // 验证邮箱
        }
        checkPassword: function () {
            // 验证密码
        }
    }
}

改革(二)

var CheckObject = function () {
    this.checkName = function () {
        // 验证姓名
    }
    this.checkEmail = function () {
        // 验证邮箱
    }
    this.checkPassword = function () {
        // 验证密码
    }
}

var check = new CheckObject();
check.checkName();

改革(三)

var CheckObject = function () {
    checkName: function () {
        // 验证姓名
        return this;
    }
    checkEmail = function () {
        // 验证邮箱
        return this;
    }
    checkPassword = function () {
        // 验证密码
        return this;
    }
}

此时我们想要使用他就可以这样:

CheckObject.checkName().checkEmail().checkPassword();

改革(四)

var CheckObject = function () {};
CheckObject.prototype = {
    checkName: function () {
        // 验证姓名
        return this;
    }
    checkEmail = function () {
        // 验证邮箱
        return this;
    }
    checkPassword = function () {
        // 验证密码
        return this;
    }

}

使用时候也要先创建一下:

var check = new CheckObject()
check.checkName().checkEmail().checkPassword();

思考题

如何实现方法的链式调用?

试着定义一个可以为函数添加多个方法的addMethod方法

未完待续，持续更新。。。

JavaScript设计模式 面向对象编程（一）

灵活的语言-JavaScript

JavaScript设计模式面向对象编程（一）