欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-26 11:14:57
JavaScript设计模式的实例告诉你JavaScript到底能有多灵活,JavaScript函数实现方式大总结 一:例子需求分析 实现表单验证功能,验证用户名、邮箱、密...

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是一门很灵活的语言,“灵活性”是这门语言特有的气质。