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();

posted @ 2018-04-24 22:26 码农何时 阅读(390) 评论(0) 推荐(1) 编辑
摘要: git的CentOS服务端安装和windows客户端的使用 此教程以 搬瓦工vps CentOS 6 x64 的系统为环境,搭建 git 服务端。windows 7 系统为客户端。 git客户端 在Windows上使用Git,可以从Git官网直接下载 "安装程序" ,然后按默认选项下一步下一步安装即 阅读全文
posted @ 2017-12-09 17:38 码农何时 阅读(388) 评论(0) 推荐(0) 编辑
摘要: js中的instanceof运算符 概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 描述 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。 阅读全文
posted @ 2016-08-12 20:00 码农何时 阅读(82977) 评论(2) 推荐(5) 编辑
摘要: javascript的propertyIsEnumerable()方法使用介绍 概述 propertyIsEnumerable()用来检测属性是否属于某个对象的,如果检测到了,返回true,否则false 语法 描述 每个对象都有propertyIsEnumerable()方法,这个方法可以判断出指 阅读全文
posted @ 2016-08-11 10:39 码农何时 阅读(4664) 评论(0) 推荐(1) 编辑
摘要: js中的hasOwnProperty()和isPrototypeOf() 这两个属性都是 所提供: 和`Object.prototype.isPropertyOf()` 先讲解 方法和使用。在讲解 方法和使用 看懂这些至少要懂原型链 一、Object.prototype.hasOwnProperty 阅读全文
posted @ 2016-08-10 17:32 码农何时 阅读(5397) 评论(0) 推荐(2) 编辑
摘要: 对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下。 1.prototype prototype:是一个函数的属性,每个函数中都会有一个prototype属性,这个属性是一个指针,指向一个对象。 该如何查看pr 阅读全文
posted @ 2016-08-07 19:13 码农何时 阅读(4955) 评论(6) 推荐(3) 编辑
摘要: 第一次在博客园写博客,以前都是看别人写的技术在自己慢慢的学习。现在想自己把每天学习的东西理解并记录下来,加深下印象以后可以做个回顾。不知道自己能否坚持每周至少写2篇博文。 古话说的好:工欲善其事,必先利其器。所以我们要找到一个神器来帮助我们更好的学习前端开发,要么记事本怎么样?不错是不错估计要写到猴 阅读全文
posted @ 2016-05-08 22:45 码农何时 阅读(20713) 评论(1) 推荐(9) 编辑
点击右上角即可分享
微信分享提示