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