日常代码优化

需求: 做一个表单验证功能

函数声明

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

上面代码在团队开发中有什么问题呢?

我换另一种形式让大家来看

函数表达式

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

发现问题了么?

“

上面两种是函数声明和函数表达式.函数定义的两种方式

”

下面的更好看出来,这是写了三个挂载在全局的全局变量,会污染全局变量的namespace命名空间.

用对象收编变量

从两个角度说上面的不好, 对别人来说,污染全局变量,对自己来说,别人写的如果影响到自己怎么办? 后写的同名会覆盖自己的.那么锅都没办法甩了,毕竟自己是先定义的..

“

为啥子要说两个角度,因为没办法强迫每个人都为团队着想啊!这不道德绑架嘛,我可不敢

”

如何避免呢?

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

上面可以看到我们把全局的变量放到了局部一个checkObject对象里了.

如何使用呢?

CheckObeject.checkName()

另一种形式

还可以把对象先声明然在需要的时候再添加属性方法.

“

这块要注意哦,函数也是对象,所以也可以为其添加属性方法.

”

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

上面两种方式的缺陷在哪里? 不能复制啊~就是这个方法让别人拿去用必须要重复声明验证规则.怎么修改可以满足要求呢?

或者说,这样每个人拿这个对象去修改的时候会互相修改.修改的一直是这个ChectObject对象.

真假对象

按照js的特性是不是可以返回一个对象呢?

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

这样就可以让大家每次调用这个对象的时候返回的是不同的对象了.虽然都在调用CheckObject对象,可实际返回的是新的对象.这样大家互相之间就不影响了.

比如可以这样检验邮箱

const a = CheckObejct ();
a.checkEmail();

类也可以--推荐

我一般会用类创建,因为上述方式虽然返回了一个新对象,但是返回的这个对象a本质上和CheckObject本质上没什么关系.

所以我们会这样写

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

然后我们就可以这样创建.

const a = new CheckObject();
a.checkEmail();

当我们把CheckObject内的方法用this定义以后,我们用new关键字创建新实例的时候,每个对象都会把类的this上属性进行复制.所以这些所创建对象都有一套这个方法,然而这么做在这里是很奢侈的.

“

比如我们需要验证1W个,那么就会有3W个验证规则,但是我们又不会去更改验证规则,很大的资源浪费

”

我们该怎么改呢?

const CheckObject = function(){};
CheckObject.prototype.checkName = function(){}
CheckObject.prototype.checkEmail = function(){}
CheckObject.prototype.checkPassword = function(){}

这样修改的话,每个创建出来的实例都只有一个方法了.他们都会按照原型链依次寻找,而找到的都是绑定在CheckObeject对象类的原型上的.

但是看上面,CheckObject.prototype写了太多遍了,还可以这样优化

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

但是要记得哈,不能再对CheckObject.prototype进行修改了,也就是不能混合上面两种写法,不然会重新覆盖.

调用方法如下

const a = new CheckObject();
a.checkName();
a.checkEmail();
a.checkPassword();

大多数情况我们也就优化到这里了,后面还可以哦往下看

另一种方法使用

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

我们就可以这样调用

CheckObject.checkName().checkEmail().checkPassword();

我们还可以放到类的原型对象上

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

然后这样调用

const a = new CheckObject;
a.checkName().checkEmail().checkPassword();

你以为结束了?还有呢

“

上面内容得理解了才好理解下面哦

”

函数的祖先

prototype.js源码里有这样的写法

比如你要给一个每一个函数都添加一个检测邮箱的方法就可以这样做

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

如果你喜欢函数形式也可以这样使用

const f = function (){};
f.checkEmail();

喜欢类,可以这样使用

const f = new Function();
f.checkEmail();

还是老问题,这样做污染了原生的Function,可以说是大逆不道了~

我们抽离出一个统一的添加方法不就行了

Function.prototype.addMethod = function(name, fn) {
  this[name] = fn;
}

我们可以这样使用

const methods = function(){};
//const methods = new Function();
methods.addMethod('checkName', function(){
    //验证姓名;
});
methods.addMethod('checkEmail', function(){
    //验证邮箱;
})
methods.checkName();
methods.checkEmail();

“

大家自己思考一下,如何链式添加和链式使用.

”

类式调用

这里我会把链式添加和使用都写出来.看看上面做的和我写的一样么.

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

m.checkName().checkEmail();