因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识。

  本文参考了张荣铭的javascript设计模式一书,算是自己对看了文章的总结吧,如果你想学习设计模式,可以去购买一本,学习一下,写的非常好。

javaScript

在我们的开发中,如果给了自己一些验证姓名、邮箱、密码的任务,按照下面的写法看

 //这样写就会污染到全局变量 都会挂载到window下
function checkName() {
//验证姓名
}
function checkEmail() {
//验证邮箱
}
function checkPassword() {
//验证密码
}

声明的方式,还有另外一种

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

上面的两种声明方式都会产生好多全局变量,会影响其他人的使用,命名,所以我们可以把这些放到一个对象下面

 var checkObject = {
checkName : function () {
//验证姓名
},
checkEmail : function () {
//验证邮箱
},
checkPassword : function () {
//验证密码
}
}
//还有另外一种添加方式
1 var checkObject = function(){}
checkObject.checkName = function(){}
checkObject.checkEmail = function(){}
checkObject.checkPassword = function(){}

虽然这样可以满足自己的需求,但是当别人想用你写的对象的方法时候就麻烦了,因为这个对象不能复制一份

要实现复制一份看下面的写法

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

var a = checkObject();
console.log(a);
a.checkEmail();

上面的方法虽然可以实现我们的功能,但是创建出来的对象a和对象checkObject没有任何关系

我们对其进行改造一下

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

var a = new CheckObject();
console.log(a);

上面这种方式已经实现了复制,但是我们每一次通过new关键字创建新对象的时候,新创建的对象都会经过this再执行一次,所以这些

新创建的对象都会有属于自己的一套方法,然后有时候这么做造成的性能消耗是非常奢侈的,我们需要处理一下,​

将公有的方法放到构造函数的原型上

 var CheckObject = function () {
};

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

这样创建对象实例的时候,找方法的时候如果自己本身没有的话就会上原型上面一层一层的去找,就可以拥有方法了

上面的方法要把peototype写好多遍,还可以写成另外的一种形式

 CheckObject.prototype = {
checkName : function(){
//验证姓名
},
checkEmail : function () {
//验证邮箱
},
checkPassword : function () {
//验证密码
}
};
//这两种方法不能混着用,要不然会覆盖
//使用方法

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

经常使用jQ都知道链式操作,其实实现方法很简单就是将当前的对象作为函数的返回值return出去就行了,

链式操作

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

函数的祖先

 Function.prototype.checkEmail = function () {
console.log('验证了邮箱');
};
//我们在他的原型上写了一个这样的方法之后,凡是用函数构造出来的对象都有了这个方法
var a = function () {

};
a.checkEmail();

如果习惯类的形式还可以这样写

 var f = new Function(){};
f.checkEmail();

但是这样做 在这里是不允许的 因为污染了全局变量Function

可以用这种方法就可以避免了

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

var methods = function () {

};
methods.addMethod('checkName',function () {
//验证姓名
console.log('姓名');
});
methods.addMethod('checkEmail',function () {
//验证邮箱
console.log('邮箱');
});

methods.checkName();
methods.checkEmail();

当然上面你嫌写了好多个methods对象,你可以用链式方法

 Function.prototype.addMethod = function (name,fn) {
this[name] = fn;
return this; //在这里返回对象就可以了
};

var methods = function () {

};
methods.addMethod('checkName',function () {
//验证姓名
console.log('姓名');
}).addMethod('checkEmail',function () {
//验证邮箱
console.log('邮箱');
});

methods.checkName();
methods.checkEmail();

对于习惯类的人来说也可以这样写

当然习惯用类的人来说 也可以写成类的形式

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

var Methods = function(){};

Methods.addMethod('checkName',function () {
//验证姓名
console.log('姓名');
}).addMethod('checkEmail',function () {
//验证邮箱
console.log('邮箱');
});

var m = new Methods();

m.checkName();
m.checkEmail();

javaScript是一种灵活的语言,使用javascript可以编写出更多的优雅的代码艺术,我会在接下来的一段时间内将一些常用的设计模式的写法,分享给大家,如果你能学到一些知识,我会非常开心的,文章如有不足之处,还望可以提醒。

javaScript设计模式 -- 灵活的javaScript语言的更多相关文章

  1. javascript设计模式开篇:Javascript 接口的实现

    javascript语言不像java. c#. c++等面向对象语言那样有完备的接口支持,在javascript中,接口的实现有三种方式,分别为注释描述.属性检查.鸭式变形.注释描述实现起来最为简单, ...

  2. Javascript设计模式笔记

    Javascript是越来越厉害了,一统前后端开发.于是最近把设计模式又看了一遍,顺便做了个笔记,以方便自己和他人共同学习. 笔记连载详见:http://www.meteorcn.net/wordpr ...

  3. 《JavaScript设计模式》读书笔记——灵活的语言

    最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅. 第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在. 首先, ...

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

    javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...

  5. JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)

    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...

  6. 转载,javascript 设计模式

    了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...

  7. JavaScript设计模式(一)

    使用JavaScript框架和库过程中, 我遇到过很多感觉上'奇形怪状'的代码. 大多数情况下, 按照惯例编写代码也能够写出很多出色的功能. 但是如果不从根本上理解它们实现的方法, 就没办法完全充分发 ...

  8. 【JavaScript设计模式系列---开篇预览】

    转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...

  9. javascript设计模式——模板方法模式

    前面的话 在javascript开发中用到继承的场景其实并不是很多,很多时候喜欢用mix-in的方式给对象扩展属性.但这不代表继承在javascript里没有用武之地,虽然没有真正的类和继承机制,但可 ...

随机推荐

  1. Invalid property 'url' of bean class [com.mchange.v2.c3p0.ComboPooledDataSource]

    1.错误描述 INFO:2015-05-01 13:13:05[localhost-startStop-1] - Initializing c3p0-0.9.2.1 [built 20-March-2 ...

  2. Java 第一章 初识Java

    第一章笔记 什么是计算机程序:算机为完成某些功能生产的一系列有序指令集合 Java技术包括: java SE:标准版 java EE:企业版 Java ME:移动版 开发Java程序步骤:1.编写 2 ...

  3. 在Visual Studio 2012中使用GSL

    1. 下载GSL http://gnuwin32.sourceforge.net/packages/gsl.htm 下载 Complete package, except sources和Source ...

  4. 从“跳一跳”来看微信小程序的未来

    从“跳一跳”来看微信小程序的未来   相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...

  5. UVa11426 最大公约数之和(正版)

    题面 求\(\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}gcd(i, j)\) n<=4000000,数据组数T<=100 答案保证在64位带符号整数范围内(long ...

  6. 【linux之软件安装,rpm,yum】

    一.软件管理 静态库 动态库静态库:在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库动态库:在程序编译时并不会被连接到目标代码中,而是在程序运行时才被载入. 链接是程序调用库的过程. 静 ...

  7. 回滚 - 每天5分钟玩转 Docker 容器技术(141)

    kubectl apply 每次更新应用时 Kubernetes 都会记录下当前的配置,保存为一个 revision(版次),这样就可以回滚到某个特定 revision. 默认配置下,Kubernet ...

  8. Redis进阶实践之十八 使用管道模式加速Redis查询

    一.引言             学习redis 也有一段时间了,该接触的也差不多了.后来有一天,以为同事问我,如何向redis中批量的增加数据,肯定是大批量的,为了这主题,我从新找起了解决方案.目前 ...

  9. 403 forbidden 错误解决方案

    在本机启动程序,访问手机移动端(wap)的程序时,返回404无法访问,控制台报错403 forbidden,网上找问题所在: [ 以下引用百度知道:https://zhidao.baidu.com/q ...

  10. 关于安装了VMware tools后仍然不支持拖拽文件的问题

    我在学校机房里面的redhat4上面安装了VMware tools之后能正常支持拖拽,但是我自己电脑上的却不支持,折腾了好久,网上找了很久也还是没有解决,不过发现了一些问题,总结如下:(当然我总结的这 ...