当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript设计模式的实例告诉你JavaScript到底能有多灵活，JavaScript函数实现方式大总结

JavaScript设计模式的实例告诉你JavaScript到底能有多灵活，JavaScript函数实现方式大总结

2018年03月31日  | 移动技术网IT编程  | 我要评论

JavaScript设计模式的实例告诉你JavaScript到底能有多灵活，JavaScript函数实现方式大总结

一：例子需求分析

实现表单验证功能，验证用户名、邮箱、密码。

二：实现方案（13种）

①：全局函数方式

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

②：全局函数的另一种形式

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

③：用对象收编变量

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

调用方法：CheckObject.checkName()

④：对象的另一种形式

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

⑤：真假对象

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

调用方法：?

    var a = CheckObject()
    a.checkEmail()

⑥：类的形式

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

调用方法：

    var a = new CheckObject()
    a.checkEmail()

⑦：类的形式结合prototype

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

调用方法：见⑧

⑧：⑦的简化写法

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

调用方法：

    var a = new CheckObject()
    a.checkName()
    a.checkEmail()
    a.checkPassword()

⑨：基于⑧实现链式调用

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

调用方法：

    var a = new CheckObject()
    a.checkName().checkEmail().checkPassword()

⑩：简单粗暴地对函数的祖先进行扩展（一般不建议）

    Function.prototype.checkEmail = function () {
        // 验证邮箱
    }

调用方法：

    var f = function () {}
    f.checkEmail()
    或
    var f = new Function()
    f.checkEmail()

(11)：优雅地对函数祖先进行扩展

    Function.prototype.addMethod = function (name, fn) {
        this[name] = fn
    }
    // 往addMethod中添加方法
    var methods = new Function() 或 var methods = function () {}
    methods.addMethod('checkEmail', function () {
        // 验证邮箱
    })
    methods.addMethod('checkName', function () {
        // 验证姓名
    })

调用方法：

    methods.checkName()
    methods.checkEmail()

(12)：链式地对函数祖先进行扩展、链式调用

    Function.prototype.addMethod = function (name, fn) {
        this[name] = fn
        return this
    }
    var methods = new Function()
    methods.addMethod('checkName', function () {
        // 验证姓名
        return this
    }).addMethod('checkEmail', function () {
        // 验证邮箱
        return this
    }).addMethod('checkPassword', function () {
        // 验证密码
        return this
    })

调用方法：

 methods.checkName().checkEmail().checkPassword()

(13)：将(12)改为类式调用

    Function.prototype.addMethod = function (name, fn) {
        this.prototype[name] = fn
        return this
    }
    var Methods = new Function()
    Methods.addMethod('checkName', function () {
        // 验证姓名
        return this
    }).addMethod('checkEmail', function () {
        // 验证邮箱
        return this
    }).addMethod('checkPassword', function () {
        // 验证密码
        return this
    })

调用方法：

    var m = new Methods()
    m.checkName().checkEmail().checkPassword()

总结：

JavaScript是一门很灵活的语言，“灵活性”是这门语言特有的气质。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网