<!DOCTYPE html>
<html>
<head>
<title>灵活的语言---javascript</title>
<meta charset="UTF-8"/>
</head>
<body>
<section>
<ul>
<li><span>姓名</span><input type="text"/></li>
<li><span>邮箱</span><input type="email"/></li>
<li><span>密码</span><input type="password"/></li>
</ul>
</section>
<script>
var inputs=document.querySelectorAll('input');
/*---------------表单验证最不推荐的写法（因为创建了多个全局变量，不利于团队开发）---------------------------------*/
//缺点：对于团队开发而言，如果别人也定义了同样的方法就会覆盖掉原有的功能了，且这种相互覆盖问题是很不容易察觉到的
/*function checkName(){
console.log('我是验证姓名');
}
function checkEmail(){
console.log('我是验证姓名');
}
function checkPassword(){
console.log('我是验证姓名');
}*/
/*-----------------将函数放在局部变量里面保存，减少覆盖或被覆盖的风险------------------------------------*/
//较上一种方法的优点：减少覆盖或被覆盖的风险，一旦被覆盖，所有的功能都会失效，这种现象较容易察觉
/*var checkName=function (){
console.log('我是验证姓名');
}
var checkEmail=function (){
console.log('我是验证邮箱');
}
var checkPassword=function (){
console.log('我是验证密码');
}*/
/*inputs[0].addEventListener('focus',checkName,false);
inputs[1].addEventListener('focus',checkEmail,false);
inputs[2].addEventListener('focus',checkPassword,false);*/
/*---------------------------用对象收编变量--------------------------*/
/*var checkObject={ //创建了一个验证对象
checkName : function(){
console.log('我是验证姓名');
},
checkEmail : function (){
console.log('我是验证邮箱');
},
checkPassword : function(){
console.log('我是验证密码');
}
};*/
/*---------------------------对象的另一种形式-------------------------------------*/
//使用和上一种方法是一样的，但是这个对象类在用new关键字创建新对象时，新创建的对象是不能继承这些方法的
/*var checkObject=function(){};
checkObject.checkName=function(){
console.log('我是验证姓名');
};
checkObject.checkEmail=function(){
console.log('我是验证姓名');
};
checkObject.checkPassword=function(){
console.log('我是验证姓名');
};*/
/*inputs[0].addEventListener('focus',checkObject.checkName,false);
inputs[1].addEventListener('focus',checkObject.checkEmail,false);
inputs[2].addEventListener('focus',checkObject.checkPassword,false);*/
/*--------------------------真假对象(不是真正意义上类的创建方式)---------------------------------------*/
//真假对象的解释：当每次调用这个函数时，把用于表单验证的对象返回出来，当别人每次调用这个函数时都返回了一个新对象，这样执行过程中明面上是checkObject对象，可实际是返回的新对象。这样每个人在使用时就互不影响了
/*var checkObject=function(){
return {
checkName : function(){
console.log('我是验证姓名');
},
checkEmail : function (){
console.log('我是验证邮箱');
},
checkPassword : function(){
console.log('我是验证密码');
}
}
};
var a=checkObject();
inputs[0].addEventListener('focus',a.checkName,false);
inputs[1].addEventListener('focus',a.checkEmail,false);
inputs[2].addEventListener('focus',a.checkPassword,false);
*/
/*------------------------上述代码也可写成---------------------------*/
//缺点：把所有的方法放在函数内部，通过this定义的，所以每次通过new创建新对象时，新对象都会对类的this上的属性进行复制。若需要创建很多对象，则造成的消耗是奢侈的
/*var checkObject=function(){
this.checkName=function(){
console.log('我是验证姓名');
};
this.checkEmail =function(){
console.log('我是验证邮箱');
};
this.checkPassword=function(){
console.log('我是验证密码');
}
}*/
/*-------------------------通过原型为对象添加方法--------------------------------*/
//优点：创建对象实例的时候，创建出来的对象所拥有的方法就都是一个了，因为他们都需要依赖prototype原型一次查找，而找到的方法是同一个
//调用三个方法，就对b书写了3遍
/* var checkObject=function(){};
checkObject.prototype={
checkName : function(){
console.log('我是验证姓名');
},
checkEmail : function (){
console.log('我是验证邮箱');
},
checkPassword : function(){
console.log('我是验证密码');
}
};
var b=new checkObject();
inputs[0].addEventListener('focus',b.checkName,false);
inputs[1].addEventListener('focus',b.checkEmail,false);
inputs[2].addEventListener('focus',b.checkPassword,false);*/
/*--------------------------可以链式调用的改进--------------------------------------------*/
/*var checkObject={
checkName : function(){
console.log('我是验证姓名');
return this;
},
checkEmail : function (){
console.log('我是验证邮箱');
return this;
},
checkPassword : function(){
console.log('我是验证密码');
return this;
}
};
checkObject.checkName().checkEmail().checkPassword();//链式调用*/
/*-------------------------上述代码的另一种写法----------------------------------------------*/
/*var checkObject=function(){};
checkObject.prototype={
checkName : function(){
console.log('我是验证姓名');
return this;
},
checkEmail : function (){
console.log('我是验证邮箱');
return this;
},
checkPassword : function(){
console.log('我是验证密码');
return this;
}
};
var c=new checkObject();
c.checkName().checkEmail().checkPassword();*/
/*-----------------若为每个函数都添加一个验证表单的方法-----------------------*/
//优点：抽象出了一个统一添加方法的功能方法，不会污染原生对象Function,也不会造成不必要的开销
Function.prototype.addMethod=function(name,fn){
this[name]=fn;
return this;//主要是为了实现链式添加而存在的
}
var methods=function(){};//因为给Function的原型添加了addMethod方法，所以此处创建的这个函数对象就自动拥有了原型对象的addMethod方法
methods.addMethod('checkName',function(){
console.log('我是验证姓名');
return this;//主要是为了实现链式添加而存在的
}).addMethod('checkEmail',function(){
console.log('我是验证邮箱');
return this;//主要是为了实现链式添加而存在的
}).addMethod('checkPassword',function(){
console.log('我是验证密码');
return this;//主要是为了实现链式添加而存在的
});
methods.checkName().checkEmail().checkPassword();
</script>
</body>
</html>