学习笔记——JavaScript（一）：面向对象编程

假设有个表单验证的需求，需要验证用户姓名、邮箱、密码。我们例举以下几种常见编程风格，领略js编码的艺术😆。

1. 版本一

function checkName(val) {
	// 验证名字
	if (val.length < 3) {
		console.log('长度不能小于3位')
	}
}
function checkEmail(val) {
	// 验证邮箱
	if (val.length < 4) {
		console.log('长度不能小于4位')
	}
}
function checkPassword(val) {
	// 验证密码
	if (val.length < 5) {
		console.log('长度不能小于5位')
	}
}

// 或者
var checkName = function (val) {
	// 验证名字
	if (val.length < 3) {
		console.log('长度不能小于3位')
	}
}
var checkEmail = function (val) {
	// 验证邮箱
	if (val.length < 4) {
		console.log('长度不能小于4位')
	}
}
var checkPassword = function (val) {
	// 验证密码
	if (val.length < 5) {
		console.log('长度不能小于5位')
	}
}

版本一不足之处：每个校验规则创建一个变量，随着之后校验规则的增加会有很多个变量，增加内存消耗。

2. 版本二

var CheckValues = {
	checkName : function (val) {
		// 验证名字
		if (val.length < 3) {
			console.log('长度不能小于3位')
		}
	},
	checkEmail : function (val) {
		// 验证邮箱
		if (val.length < 4) {
			console.log('长度不能小于4位')
		}
	},
	checkPassword : function (val) {
		// 验证密码
		if (val.length < 5) {
			console.log('长度不能小于5位')
		}
	}
}
// 调用方式
CheckValues.checkName('Am');

版本二：创建一个对象变量，以对象属性的形式添加校验方法

3. 版本三

var CheckValues = function () {
	this.checkName = function (val) {
		// 验证名字
		if (val.length < 3) {
			console.log('长度不能小于3位')
		}
	}
	this.checkEmail = function (val) {
		// 验证邮箱
		if (val.length < 4) {
			console.log('长度不能小于4位')
		}
	}
	this.checkPassword = function (val) {
		// 验证密码
		if (val.length < 5) {
			console.log('长度不能小于5位')
		}
	}
}
// 调用方式
var check = new CheckValues();
check.checkName('Am')

版本三：创建类的形式实例化，每个实例都有自己的方法。不足之处：通过this定义的，每次通过new关键词创建对象新创建的对象都会对类的this上的属性进行复制，所以新创建的对象都有自己的方法造成不必要的消耗。

4. 版本四

var CheckValues = function () {};
CheckValues.prototype.checkName = function (val) {
	// 验证名字
	if (val.length < 3) {
		console.log('长度不能小于3位')
	}
}

CheckValues.prototype.checkEmail = function (val) {
	// 验证邮箱
	if (val.length < 4) {
		console.log('长度不能小于4位')
	}
}

CheckValues.prototype.checkPassword = function (val) {
	// 验证密码
	if (val.length < 5) {
		console.log('长度不能小于5位')
	}
}

// 以上片段的代码需要写很多遍prototype，版本四可以优化为以下形式

var CheckValues = function () {};
CheckValues.prototype = {
	checkName : function (val) {
		// 验证名字
		if (val.length < 3) {
			console.log('长度不能小于3位')
		}
	},
	checkEmail : function (val) {
		// 验证邮箱
		if (val.length < 4) {
			console.log('长度不能小于4位')
		}
	},
	checkPassword : function (val) {
		// 验证密码
		if (val.length < 5) {
			console.log('长度不能小于5位')
		}
	}
} 

// 调用方法
var check = new CheckValues();
check.checkName('aa')
check.checkEmail('ab')
check.checkPassword('ccc')

版本四：将方法定义在原型上，解决了版本三存在的不足。但调用的时候需要多次书写check。

5. 版本五

var CheckValues = function () {};
CheckValues.prototype = {
	checkName : function (val) {
		// 验证名字
		if (val.length < 3) {
			console.log('长度不能小于3位')
		}
		return this; //返回this以支持链式调用
	},
	checkEmail : function (val) {
		// 验证邮箱
		if (val.length < 4) {
			console.log('长度不能小于4位')
		}
		return this;
	},
	checkPassword : function (val) {
		// 验证密码
		if (val.length < 5) {
			console.log('长度不能小于5位')
		}
		return this;
	}
}
// 调用方法(可以链式调用)
var check = new CheckValues();
check.checkName('aa').checkEmail('ab').checkPassword('ccc')

版本五：相比于版本四，版本五每个校验方法里都返回了this，这样可以更方便地链式调用

6. 版本六

Function.prototype.checkName = function (val) {
	// 验证名字
	if (val.length < 3) {
		console.log('长度不能小于3位')
	}
}
Function.prototype.checkEmail = function (val) {
	// 验证邮箱
	if (val.length < 4) {
		console.log('长度不能小于4位')
	}
}
Function.prototype.checkPassword = function (val) {
	// 验证密码
	if (val.length < 5) {
		console.log('长度不能小于5位')
	}
}
// 调用方式一 函数形式
var f = function () {};
f.checkEmail('aa')
// 调用方式二 类的形式
var fn = new Function();
fn.checkEmail('aa');

版本六：直接在原生Function对象上扩展方法，不足之处是随着校验规则的增加会造成全局原生Function对象的污染

7. 版本七

// 原生Function对象上统一添加一个自定义的添加功能的方法addMethods
Function.prototype.addMethods = function (name, fn) {
	this[name] = fn;
}
// 添加校验方法
var methods = function () {};
// 或者 
// var methods = new Function();
methods.addMethods('checkName', function (val) {
	// 验证名字
	if (val.length < 3) {
		console.log('长度不能小于3位')
	}
})
methods.addMethods('checkEmail', function (val) {
	// 验证邮箱
	if (val.length < 4) {
		console.log('长度不能小于4位')
	}
})
methods.addMethods('checkPassword', function (val) {
	// 验证密码
	if (val.length < 5) {
		console.log('长度不能小于5位')
	}
}
// 调用方式
methods.checkName('aa');
methods.checkEmail('bb');
methods.checkPassword('cc');

版本七：相比于版本六，原生Function对象上只统一添加一个自定义的添加功能的方法addMethods，解决了版本六存在的问题
8. 版本八

Function.prototype.addMethods = function (name, fn) {
	this[name] = fn;
	return this;  // 返回this，以支持链式添加方法
}
// 添加校验方法
var methods = function () {};
// 或者 
// var methods = new Function();
methods.addMethods('checkName', function (val) {
	// 验证名字
	if (val.length < 3) {
		console.log('长度不能小于3位')
	}
	return this; // 返回this，以支持链式调用方法
}).addMethods('checkEmail', function (val) {
	// 验证邮箱
	if (val.length < 4) {
		console.log('长度不能小于4位')
	}
	return this;
}).addMethods('checkPassword', function (val) {
	// 验证密码
	if (val.length < 5) {
		console.log('长度不能小于5位')
	}
	return this;
};
// 调用方法 支持链式调用
methods.checkName('aa').checkEmail('bb').checkPassword('cc')

版本八：相比版本七，版本八在addMethods方法和校验方法中都返回了this，支持了链式添加校验方法和链式调用，到此咱们的代码更加健壮了。

如果你有更好的实现思路欢迎留言一起探讨。多思考，多总结，多交流，让我们一起编写更优雅更健壮的代码吧⛽️。