码迷,mamicode.com
首页 > 编程语言 > 详细

javascript设计模式 第一章 灵活的javascript

时间:2018-04-24 23:19:57      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:mail   功能   依次   两种   prot   密码   不必要   并且   提升   

javascript 设计模式

第1章 灵活的语言--JavaScript

初级程序员接到一个验证表单功能的任务,需要验证用户名、邮箱、密码等

** 此文章内容大部分来自 《javascript设计模式》一书,请支持正版。**

1.简单的验证check.js

代码如下:

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

这段代码功能可以实现,但是创建了3个全局变量,这就增加了代码的脆弱性。可能在的check.js文件中只有这3个变量。如果你引入了别人的类库,或者你的这个js文件给别人使用的话,就增加了全局变量被覆盖的可能。可能你覆盖别人的也可能别人覆盖你的功能。

2.函数的另一种形式

代码如下:

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

这种方式多了个变量提升,但是并未改变创建了3个全局变量的问题。

3.用对象收编变量

代码如下:

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

这种对象收编方式大大减少了对象被覆盖的问题,使用直接CheckObject.checkName() 点的方式就可以。

4.对象的另一种形式

var CheckObject = function(){}
CheckObject.checkName = function(){
    //验证姓名
}
checkObject.CheckEmail = function(){
    //验证邮箱
}
checkObject.checkPassword = function(){
    //验证密码
}

3和4的这两种方式还会有问题,当别人想用你写的对象方法时就会有些麻烦了,因为这个对象不能复制一份,或者说这个对象类在用new关键字创建新的对象时,新创建的对象是不能继承这些方法。

举个列子:
A同事写了个获取用户名的操作,B同事感觉默认名字“张三”不合适,他想改为其他的。因为对象只有一份B这样修改后其他任何人再此使用都可能为“李四”。也就是说很容易覆盖一个公共的方法。

//获取用户名
var MyMethod = {
    getDefaultName:function(){
        var defaultName = ‘张三‘;
        return defaultName;
    },

}
MyMethod.getDefaultName();//张三

//B同事修改了MyMethod
MyMethod.getDefaultName = function(){
    var defaultName = ‘李四‘;
    return defaultName;
}
MyMethod.getDefaultName();//李四

5.真假对象

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

这段代码简单的复制了一遍对象,每次调用函数的时候,把之前的那个对象返回出来,当别人每次调用这个函数时都返回了一个全新的对象。如:

var a = CheckObject();
a.checkEmail();

其实他不是一个真正意义上类的创建方式,并且创建的对象a和对象CheckObject没有任何关系,返回出来的对象本身就与CheckObject对象无关。

6.类

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

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

这样可以看成一个类,每一次通过new关键字创建新对象的时候,新创建的对象都会对类的this上的属性进行复制,这些新创建的对象都会有自己的一套方法,但是这么做造成了消耗是很奢侈的,因为每次创建new的时候都会复制CheckObject里面所有的方法。

7.一个检测类

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

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

使用它们:

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

这样创建对象实例的时候,创建出来的对象所拥有的方法就是一个了,因为它们都要依赖 prototype原型依次寻找,而找到的方法都是同一个,它们都绑定在CheckObject对象类的原型上。

8.方法还可以这样用

上面代码可以看出来多次使用a这时候我们可以想到链接调用,在每个方法的末尾处将当前的对象返回。

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

使用它们:

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

9.函数的祖先

模仿prototype.js的作法为每一个函数添加一个检测邮箱的方法可以这么做。

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

使用方式:

var f = function(){};
f.checkEmail();
// 或者使用类的方式
var f= new Function();
f.checkEmial();

这样做的弊端是污染了原生对象Function,别人创建的函数也会被创建checkEmail,造成不必要的开销。使用下面的这种方式:

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

使用方式:

var methods = function(){}
//或者
var methods = new Function();
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
});
methods.addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
});
methods.checkName();
methods.checkEmail();

10.同样添加链式

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

这样添加方法就方便了一些

var methods = new Function();
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
}).addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
});

同时被添加的每个方法也可以做链式返回

var methods = new Function();
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
    return this;
}).addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
    return this;
});

methods.checkName().checkEmail();

11.使用类的方式来实现

上面是函数式调用,对于习惯类式调用的方法如下:

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

使用方式:

var methods = function(){}:
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
    return this;
}).addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
    return this;
});

这里注意。methods不能直接点出来使用,而是要通过new关键字来创建新对象。

var m = new Methods();
m.checkEmail();

javascript设计模式 第一章 灵活的javascript

标签:mail   功能   依次   两种   prot   密码   不必要   并且   提升   

原文地址:https://www.cnblogs.com/SourceKing/p/8934180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!