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

  本文参考了张荣铭的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. Python实现常用的数据结构

    Python中的数据结构   #巧用Python列表特性实现特定数据结构 #栈实现stack = []stack.push(x)stack.pop()stack[-1] #队列实现from colle ...

  2. CF374 Journey

    技不如人甘拜下风 这题网上说法有 建反向边和先拓扑 都是为了每个点之前将其前驱都遍历到 #include<bits/stdc++.h> using namespace std; typed ...

  3. 教你如何制作网页上的友情链接--JavaScript基础

    大部分网站的首页都有友情链接的功能,此功能可通过location对象的href属性来实现…… href属性:设置或检索完整的url字符串 1."友情链接制作"示例代码: <! ...

  4. 【HDU1695】GCD(莫比乌斯反演)

    [HDU1695]GCD(莫比乌斯反演) 题面 题目大意 求\(a<=x<=b,c<=y<=d\) 且\(gcd(x,y)=k\)的无序数对的个数 其中,你可以假定\(a=c= ...

  5. Nginx负载均衡——扩展功能(NGINX Plus)

    本文主要是介绍了NGINX Plus的相关功能,横跨了NGINX Plus R5/R6/R7/R9等各个不同版本的更新. 什么是NGINX Plus? 顾名思义,就是Nginx的加强版或者扩展版.我们 ...

  6. ES6的模块化规范和CommonJS的模块化规范的差异

    ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案.其模块功能主要由两个命令构成:export 和 import.export命令用于规定模块的对 ...

  7. Health Check - 每天5分钟玩转 Docker 容器技术(142)

    强大的自愈能力是 Kubernetes 这类容器编排引擎的一个重要特性.自愈的默认实现方式是自动重启发生故障的容器.除此之外,用户还可以利用 Liveness 和 Readiness 探测机制设置更精 ...

  8. cocos creator实现棋牌游戏滑动选牌的功能

    最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑效果如下: 有一点不好的体 ...

  9. 数组的迭代方法(every、filter、forEach、map、some)

    every: 对数组中的,每一项运行给定函数,如果该函数对每一项都返回true,则返回true. var number = [1,2,3,4,5,6]; var result = number.eve ...

  10. 挂载U盘和移动硬盘

    1, 挂载U盘和USB接口的移动硬盘一样对linux系统而言U盘也是当作SCSI设备对待的.使用方法和移动硬盘完全一样.插入U盘之前[root at pldyrouter root]# fdisk - ...