入职第一天小记
对于初入前端的程序猿来说, 对于函数的理解与使用可谓是相当浅薄的, 回顾这自己近几年的工作以及学习经历, 准备对 JavaScript 来个系统的总结.
如果要我们对 H5 中的表单做个简单的校验, 我想对于初入前端的童鞋来说都会是这样的表情与心态:
A:哎呀, 不就是个表单验证嘛!
B:这个也算是问题么, so easy!
C:哇哦, 就这个啊
D:...............
所有的童鞋都带着不屑的眼神与骄傲的姿态拿起笔刷刷刷的写下了如下 coding:
- function check_phone(){
- //逻辑代码
- }
- function check_age(){
- //逻辑代码
- }
- function check_sex(){
- //逻辑代码
- }
刷刷刷的抱着激动的心情准备去提交代码,就在这时童鞋们的背后蹭的一下冒出一个人(有着近六七年的工作经验的大牛),且慢!众人皆惊讶,
曰:why
大牛:你看你们写的这些方法,虽然没有什么大的问题,但是无形中却创建了大量的全局变量
童鞋:有吗,这个不全部是函数吗,莫非函数也是变量??????
大牛:笑着便拿起笔刷刷刷的写出如下 code:
- var check_phone = function() {
- }
- var check_sex = function() {
- }
- var check_age = function() {
- }
童鞋:这不才是声明了全局变量吗?
大牛:对啊,那只是把变量给提前声明了而已,而你们写的那种只是把变量给放到了 function 后面声明,难道这就不是声明了三个全局变量吗
童鞋:那这样有什么问题吗?
大牛:最大的问题便是在你多人协作开发的时候如果创建了多个全局变量的时候,在其他同事进行开发的时候会对你的方法进行覆盖 (几率提高)
童鞋: 恍然大悟。。。。。。。
大牛:于是 我们可以这样写,用对象进行包装
- //封装检测对象
- var check_obj = {
- check_phone: function() {
- //逻辑操作
- },
- check_age: function() {
- //逻辑操作
- },
- check_sex: function() {
- //逻辑操作
- }
- }
大牛:当然我们还可以这样写
- function check_obj() {
- this.check_age = function() {
- };
- this.check_phone = function() {
- };
- this.check_sex = function() {
- }
- }
大牛:这样是不是看上去有点高大上了呢,是不是就是类的写法了呢,这样在其他同事调用的时候只需要 New 一下就可以拥有属于自己的方法了,但是有时候这样做是会做成不必要的资源消耗的,于是我们可以进行如下修改
- var check_obj = function() {};
- check_obj.proptype = {
- check_sex: function() {
- },
- check_age: function() {
- },
- check_phone: function() {
- }
- }
- //调用
- var a = new check_obj();
- a.check_phone();
- a.check_sex();
- a.check_age();
大神:但是这样的调用方式会让我们把 a 书写多次,不过这个是可以避免的,看修改后的代码方案:
- var check_obj = function() {};
- check_obj.proptype = {
- check_sex: function() {
- return this;
- },
- check_age: function() {
- return this;
- },
- check_phone: function() {
- return this;
- }
- }
- //调用
- //var a = new check_obj();
- //a.check_phone();
- //a.check_sex();
- //a.check_age();
- //调用新方案
- var a = new check_obj();
- a.check_age().check_sex().check_phone();
大神:这样是不是就简单多啦 实现了链式调用,同时我们还可以利用 proptype 向 JavaScript 原生对象上面添加共有方法类似于 Function.proptype,addMethod = function(){},这样在创建函数的时候都会拥有此方法,不过这种方式要慎用,因为 JavaScript 中大多都是函数实现的,这样会出现太多多于的代码甚至拖垮性能,所以你可以换种方式去实现:例如:Function.proptype = function(fucName,fn){fucName = fn},这样就可以实现选择性的添加了,哈哈是不是很有趣,很有魔力。
童鞋:瞬间惊呆了 原来 js 还可以这样玩,哈哈 受教了
goodbye everyone,今天的娱乐节目就到这里啦,下次我们再见喽,下次将带来 JavaScript 的设计模式,初级阶段,bye 了各位!
来源: http://www.cnblogs.com/dyx-wx/p/7428512.html