zoukankan      html  css  js  c++  java

  • 实现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();  
  • 相关阅读:
    WINDOWS REDIS 修改requirepass 不生效；
    解读JavaScript原型链
    禁止浏览器自动填写用户名密码
    Vue购物车实例
    scrollTop的兼容性
    jQuery架构（源码）分析
    web前端优化整理（转）
    前端模块化：RequireJS(转)
    前端构建之gulp与常用插件（转载）
    PS快捷键
  • 原文地址：https://www.cnblogs.com/staven/p/5319482.html
Copyright © 2011-2022 走看看