javascript设计模式 第一章 灵活的javascript
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的更多相关文章
- 你不知道的javaScript上卷(第一章 作用域是什么)
在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...
- [head first 设计模式] 第一章 策略模式
[head first 设计模式] 第一章 策略模式 让我们先从一个简单的鸭子模拟器开始讲起. 假设有个简单的鸭子模拟器,游戏中会出现各种鸭子,此系统的原始设计如下,设计了一个鸭子超类,并让各种鸭子继 ...
- 读《编写可维护的JavaScript》第一章总结
第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行 ...
- 读高性能JavaScript编程 第一章
草草的看完第一章,虽然看的是译文也是感觉涨姿势了, 我来总结一下: 由于 大多数浏览器都是 single process 处理 ui updatas and js execute 于是产生问题: js ...
- Effective JavaScript :第一章
第一章 一.严格模式与非严格模式 1.在程序中启用严格模式的方式是在程序的最开始增加一个特定的字符串字面量: ‘use strict’ 同样可以在函数体的开始处加入这句指令以启用该函数的严格模式. f ...
- JavaScript设计模式基础之面向对象的JavaScript(一)
动态语言类型与鸭子类型 此内容取自JavaScript设计模式与开发实践一书 编程语言按照数据类型大体可以分为2类,一类就是静态类型语言,另一类则是动态类型语言 静态类型语言也可以称之为编译语言,而动 ...
- 【设计模式+原型理解】第一章:使用Javascript来巧妙实现经典的设计模式
刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是 ...
- (第一章)改善JavaScript,编写高质量代码。
根据<编写高质量代码改善JavaScript程序的188个建议>这本书,来记录我目前所了解的建议方式. 建议1:警惕Unicode乱码 根据ECMA标准规定JavaScript语言可以使用 ...
- head first 设计模式第一章笔记
设计模式是告诉我们如何组织类和对象以解决某种问题. 学习设计模式,也就是学习其他开发人员的经验与智慧,解决遇到的相同的问题. 使用模式的最好方式是:把模式装进脑子,然后在设计的时候,寻找何处可以使用它 ...
随机推荐
- js删除一个父元素下面的所有子元素
比如<div id="ok"><button tpye='button'>111111</button><p>22222</p ...
- POJ1286 Necklace of Beads
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8263 Accepted: 3452 Description Beads ...
- 51nod 扔盘子
题目传送门 这道题一开始写了n方的算法 果不其然 它T了 所以就想想o(n)的算法 写不出来 就像sbzhq学习了一下 这道题啊 要维护一下从深度1到n每一段的最小值以及他的位置 然后就暴力搞一搞就o ...
- [bzoj1588][HNOI2002]营业额统计——splay
题目大意 你被要求编写一个数据结构,支援以下操作,操作在线. 插入一个元素 查询一个元素与之前插入元素的最小差值. 题解 一道模板题.我是写了一个pre和succ函数水过的.1A,比较高兴. 代码 # ...
- linux下rm命令删除文件名中包含特殊字符的文件【转】
转自:http://blog.itpub.net/143526/viewspace-1060083/ 1. 删除带“-”的文件名的方法 2. 删除包含其它特殊字符的文件 3. 删除系统打不出的乱码文件 ...
- centos 自启动
https://blog.phpha.com/backup/archives/1458.html 1.服务 chkconfig 服务名 on 查看所有可以 chkconfig --list 2 修改 ...
- python基础复习-1-2 数据类型-str、list、tuple、dict
数据类型 数字 引号: 123 数值 '123' 字符串 整数:ini long 范围:(-2**31 - 2**31) num = 123 长整型 long (L) num = 123L 浮点型:f ...
- [ Mariadb ] 通过HAProxy代理后端Mariadb实现负载均衡
一.本次环境架构图 由于公司内网服务器有限,所以后端采用Mariadb自带的mysql_multi模型实现多实例. mysql的多实例有两种方式可以实现,两种方式各有利弊. 1.使用多个配置文件启动不 ...
- JDK 动态代理 源码简单分析
代理的作用就是在访问真实对象之前或者之后可以额外加入一些操作. JDK 的动态代理 只需要 5 步. 真实对象必须要实现接口,首先创建一个接口 public interface HelloWorld ...
- UVALive - 5844
题是pdf版 Sample Input23mississippinni55i55ippi2foobar|=o08arSample Output10 /** 题意:给出一个normal串,一个leet串 ...