实现JavaScript自定义函数的整合、链式调用及类的封装

函数声明形式：表单验证函数

1
2
3
4
5
6
7
8
9
10
11
12
13
function checkName(){
    console.log('检查用户名');
}
function checkEmail(){
    console.log('检查邮箱地址');
}
function checkPassword(){
    console.log('检查密码');
}
 
checkName();
checkEmail();
checkPassword();


函数字面量形式：

         在团队开发中定义函数容易覆盖他人已经定义过的函数，将函数保存在一个变量里，这样就减少了原有功能被覆盖的风险。

1
2
3
4
5
6
7
8
9
10
11
12
var checkName = function(){
    console.log('检查用户名');
}
var checkEmail = function(){
    console.log('检查邮箱地址');
}
var checkPassword = function(){
    console.log('检查密码');
}
checkName();
checkEmail();
checkPassword();


对象属性形式：利用对象具有属性与方法的特性。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var checkObject = {
    checkName:function(){
        console.log('检查用户名');
    },
    checkEmail:function(){
        console.log('检查邮箱地址');
    },
    checkPassword:function(){
        console.log('检查密码');
    }
     
};
checkObject.checkName();
checkObject.checkEmail();
checkObject.checkPassword();


对象赋值形式：对象的另一种创建形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
var checkObject = function(){};
checkObject.checkName = function(){
    console.log('检查用户名');
}
checkObject.checkEmail = function(){
    console.log('检查邮箱地址');
}
checkObject.checkPassword = function(){
    console.log('检查密码');
}
checkObject.checkName();
checkObject.checkEmail();
checkObject.checkPassword();

       也是利用checkObject.checkName()进行调用。 但是这个对象的方法在创建新对象时不能被继承。        

返回对象：可以将这些方法放在一个函数对象中返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var checkObject = function(){
    return {
        checkName : function(){
            console.log('检查用户名');
        },
        checkEmail: function(){
            console.log('检查邮箱地址');
        },
        checkPassword: function(){
            console.log('检查密码');
        }
    }
};
var a = new checkObject();
a.checkName();
a.checkEmail();
a.checkPassword();

       每次调用这个函数时，都返回一个新对象，返回的checkObj对象与checkObject对象没有任何关系。

类方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
var checkObject  = function(){
    this.checkName = function(){
        //验证姓名
    }
    this.checkEmail = function(){
        //验证邮箱
    }
    this.checkPassword = function(){
        //验证密码
    }
}
var checkObj =new checkObject();
checkObj.checkName();

        每次通过new关键词创建新对象的时候，都会对类的this上的属性进行复制， 造成了不必要的内存消耗。

prototype原型：查找绑定方法

1
2
3
4
5
6
7
8
9
10
var checkObject  = function(){};
checkObject.prototype.checkName = function(){
    //验证姓名
}
checkObject.prototype.checkEmail = function(){
    //验证邮箱
}
checkObject.prototype.checkPassword = function(){
    //验证密码
}

 以上prototype需要书写多遍，可简写为：

1
2
3
4
5
6
7
8
9
10
11
12
var checkObject  = function(){};
checkObject.prototype = {
    checkName ：function(){
        //验证姓名
    },
    checkEmail ：function(){
        //验证邮箱
    },
    checkPassword ：function(){
        //验证密码
    }
}

       依赖原型依次查找，每次找到方法都是同一个。

1
2
var checkObj =new checkObject();
checkObj.checkName();

链式调用：声明的每个方法末尾将当前对象返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var checkObject  = {
    checkName : function(){
         //验证姓名
         return this;
    },
    checkEmail : function(){
         //验证邮箱
         return this;
    },
    checkPassword : function(){
         //验证密码
         return this;
    }
}

 链式调用：

1
checkObject.checkName().checkEmail().checkPassword();

放在原型对象里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var checkObject  = function(){};
checkObject.prototype = {
    checkName : function(){
        //验证姓名
        return this;
    },
    checkEmail : function(){
        //验证邮箱
        return this;
    },
    checkPassword : function(){
        //验证密码
        return this;
    }
}

链式调用：

1
2
var checkObj = new checkObject();
checkObj.checkName().checkEmail().checkPassword();

Function对象扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Function.prototype.addMethod = function(name, fn){
    this[name] =  fn;
}  
var method = function(){};
(或者var method = new Function();)
method.addMethod('checkName',function(){
    //验证姓名
});
method.addMethod('checkEmail',function(){
    //验证邮箱
});
method.addMethod('checkPassword',function(){
    //验证密码
});

链式定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Function.prototype.addMethod = function(name, fn){
    this[name] =  fn;
    return this;
} 
var method = function(){};
(var method = new Function();)
method.addMethod('checkName',function(){
    //验证姓名
    return this;
}).addMethod('checkEmail',function(){
    //验证邮箱
    return this;
}).addMethod('checkPassword',function(){
    //验证密码
    return this;
});

可以链式调用了：

1
method.checkName().checkEmail().checkPassword();

 对于类似调用方式，还可以改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Function.prototype.addMethod = function(name, fn){
    this.prototype[name] =  fn;
}
var method = function(){};
method.addMethod('checkName',function(){
    //验证姓名
    return this;
}).addMethod('checkEmail',function(){
    //验证邮箱
    return this;
}).addMethod('checkPassword',function(){
    //验证密码
    return this;
});

这种更改之后，在调用的时候不能直接使用，要通过new关键词来创建新对象了。

1
2
var m = new Method();
m.checkName();  








posted @ 2016-03-25 14:49  staven  阅读(784)  评论(0)  编辑  收藏  举报