javaScript设计模式 -- 灵活的javaScript语言
因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识。
本文参考了张荣铭的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语言的更多相关文章
- javascript设计模式开篇:Javascript 接口的实现
javascript语言不像java. c#. c++等面向对象语言那样有完备的接口支持,在javascript中,接口的实现有三种方式,分别为注释描述.属性检查.鸭式变形.注释描述实现起来最为简单, ...
- Javascript设计模式笔记
Javascript是越来越厉害了,一统前后端开发.于是最近把设计模式又看了一遍,顺便做了个笔记,以方便自己和他人共同学习. 笔记连载详见:http://www.meteorcn.net/wordpr ...
- 《JavaScript设计模式》读书笔记——灵活的语言
最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅. 第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在. 首先, ...
- javascript设计模式 第一章 灵活的javascript
javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...
- JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)
(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- JavaScript设计模式(一)
使用JavaScript框架和库过程中, 我遇到过很多感觉上'奇形怪状'的代码. 大多数情况下, 按照惯例编写代码也能够写出很多出色的功能. 但是如果不从根本上理解它们实现的方法, 就没办法完全充分发 ...
- 【JavaScript设计模式系列---开篇预览】
转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...
- javascript设计模式——模板方法模式
前面的话 在javascript开发中用到继承的场景其实并不是很多,很多时候喜欢用mix-in的方式给对象扩展属性.但这不代表继承在javascript里没有用武之地,虽然没有真正的类和继承机制,但可 ...
随机推荐
- Django学习-20-信号
Django信号 使得某个操作之前能定制化一些任务 - 内置信号 pre_init # django的model执行其构造方法前,自动触发 post_ ...
- hdu5887 Herbs Gathering
神他妈随便写写就能过- 暴力枚举每个取不取 两个剪纸: 1.当剩下可用的时间小于最少需要用的时间 跳出 2.当剩下的植物按照理想情况(甚至可以取一部分)得到的极限答案比已经求出的答案大 跳出 #inc ...
- babel-runtime和babel-polyfill两者区别优缺点
先说两种方式的原理: babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps ...
- 异常-----Java compiler level does not match解决方法
1, 先设置好jdk,需要确定 项目,eclipse/myeclipse,系统 用的是同一个版本的JDK,我系统中安装的JDK是1.7,所以我把eclipse的jdk成1.7 2, 进入 window ...
- MFC与Webbrower交互(通过JS)
最近修改老旧的MFC项目,用的网页做界面,和HTML交互采用的是COM方式,繁琐,丑陋又性能低,于是考虑利用js来进行界面交互,查了一天的资料,现在整理如下,供后来需要的人参考,虽然大概几乎不会有人用 ...
- unity案例入门(二)(坦克大战)
1. 案例简述 这个案例实现一个简单的坦克对战游戏,两个玩家在一个地图上PK. 2. 控制坦克移动 与案例一中小球的移动方式不同,坦克在横向上不能是平移,因此横向按键控制的应该是坦克旋转. publi ...
- java继承方法规则或规律
方法的继承与属性的继承有很大的不同,属性任何继承方式均可,而方法则有各种限制,于是在这里做了一个简单的总结: 1.修饰符相同的方法覆盖,即只改内部,不改外部 2.访问权限不同的方法覆盖,子类只能相对父 ...
- 【Luogu3457】POW-The Flood(并查集)
[Luogu3457]POW-The Flood(并查集) 题面 洛谷 题解 我们知道,如果一个点和一个海拔不高于它的点相连 那么连在那个点是更优的,所以考虑按照每个点的海拔排序 既然按照海拔排序,相 ...
- Linux内核调优参数说明
该脚本是我常用的系统安装后执行脚本,包括开机启动服务.内核.SSH优化. !/bin/sh 服务优化,(sshd.network.crond.syslog.rsyslog)服务保持默认开机启动 Ser ...
- 在Debian系列Linux系统Ubuntu上安装配置yum的试验
用习惯了Red Hat系统的都知道我们习惯于三种安装方式:一种是rpm包的方式安装,一种就是tar包的方式来安装,还有一种方式就是yum源的安装. 首先rpm包的用法,我们一般是在Red Hat光驱里 ...