前言
如果你觉得写基本的赋值语句,或定义几个方法,或者使用下对象的内置方法就算会了js,那其实还差的远。 还差什么呢?还差一些编程的思维,以及优化的编程思想。
案例
- 全局函数(不推荐方式)
顾名思义全局函数就是没有任何命名空间或者封装的函数,缺点是容易覆盖原有代码或者被覆盖,在团队内不易维护。
function checkName(){
// 验证姓名
}
function checkMail(){
// 验证邮箱
}
function checkPhone(){
// 验证手机号
}
-
用对象收编变量(推荐方式1)
放在一个对象里保存,减少代码被覆盖的影响,使用可以通过点语法。
备注:可能你会想到函数对象的写法,函数是特殊的对象类型,当然也可以这样用。这里只提示一点,如果你通过点语法在函数外部申明的方法,再通过new创建的对象是无法使用这些方法的。
var checkObj={ checkName:function(){ // 验证姓名 }, checkMail:function(){ // 验证邮箱 }, checkPhone:function(){ // 验证手机号 }, } //使用 checkObj.checkName() -
用类收编变量(推荐方式2)
优点:每个新创建的对象都可以使用这个方法,因为通过this定义到新创建的对象了。 缺点:每个实例化对象都会有自己的一套方法,很耗性能。(可以通过原型的方式改进,让他们共用原型的一套方法)
// 类实例化增加方法 var checkObj=function(){ this.checkName=function(){ // 验证姓名 }, this.checkMail=function(){ // 验证邮箱 }, this.checkPhone=function(){ // 验证手机号 } } //使用 var checkDemo=new checkObj(); checkDemo.checkName(); // 原型方式 (与前面直接定义方式不能混用) var checkObj=function(){ }, checkObj.protoype={ checkName:function(){ // 验证姓名 }, checkMail:function(){ // 验证邮箱 }, checkPhone:function(){ // 验证手机号 } } // 使用方式 var checkDemo=new checkObj(); checkDemo.checkName(); -
链式使用(理解当前对象this)
在上面使用方法的时候也许你发现只能分别调用,比如checkDemo.checkName();checkDemo.checkMail();这里可以通过返回当前对象实现链式调用,简化语法。(联想到jq的很多方法支持链式操作,其实同理,很棒有没有?)
var checkObj={ checkName:function(){ // 验证姓名 return this; }, checkMail:function(){ // 验证邮箱 return this; }, checkPhone:function(){ // 验证手机号 return this; } } // 使用方式 checkObj.checkName().checkMail() -
函数的祖先(prototype)
prototype.js 是一款js的框架,对很多原生对象拓展了很多函数方法,比如Function,String等。
拓展:那么如果你想给某个原始的对象类型添加原型方法,必须通过prototype关键字改变其原型对象。
Function.prototype.checkName=function(){} // 那么你在定义任何一个函数的时候 都有这个原型对象方法 var test=function(){} test.checkName() // 但是这样是被不允许的,因为你污染了原生对象,所以别人创建的函数也会被你的方法污染。 //建议你可以抽象出一个功能方法来实现添加。你也可以优化下,返回this,这样就可以链式添加方法了。 Function.prototype.addMethod=function(name,fn){ this[name]=fn; } //使用这个功能方法 var test=function(){} test.addMethod('checkName',function(){ //验证姓名 }) test.checkName();