《JavaScript设计模式》读书笔记——灵活的语言
最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅。
第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在。
首先,由check函数展开,如果用不同的函数去对应功能,会造成过多的全局变量定义,例如
var checkName = function () {//验证姓名}
function checkName () {//验证姓名}
这两种方式都会创建全局变量checkName,一来会造成不必要的浪费,其次如果别人定义了相同的方法会覆盖原来的功能,这种相互覆盖的问题是很不容易察觉的,所以最好的解决方法就是用对象收编变量。
对象收编变量
var CheckObject = function () {
return {
checkName: function () {
//验证姓名
},
checkEmail: function () {
//验证邮箱
},
checkPassword: function () {
//验证密码
},
}
}
var a = CheckObject();
a.checkEmail();
这样使用的时候只用使用CheckObject这个对象就可以通过返回的新对象的属性去实现不同的功能了。
但是他不是真正意义上的类的创建形式,因为创建的对象a与对象CheckObject没有任何关系。
JS的类
var CheckObject = function () {
this.checkName: function () {
//验证姓名
},
this.checkEmail: function () {
//验证邮箱
},
this.checkPassword: function () {
//验证密码
}
}
var a = new CheckObject();
a.checkEmail();
因为通过this定义的方法,所以每次通过new关键字创建新对象的时候,新的对象会对类的this上的属性进行复制,每个新创建的对象都会有自己的一套方法,但是这样是很耗费资源的,可以修改为:
var CheckObject = function () {};
CheckObject.prototype = {
checkName: function () {
//验证姓名
},
checkEmail: function () {
//验证邮箱
},
checkPassword: function () {
//验证密码
}
}
var a = new CheckObject();
a.checkEmail();
这样创建对象实例的时候,创建出来的对象所拥有的方法就都是一个了,因为它们都要依赖prototype原型依次寻找,而找到的方法都是同一个,它们都绑定在CheckObject对象类的原型上。
链式调用
var CheckObject = function () {};
CheckObject.prototype = {
checkName: function () {
//验证姓名
return this;
},
checkEmail: function () {
//验证邮箱
return this;
},
checkPassword: function () {
//验证密码
return this;
}
}
var a = new CheckObject();
a.checkEmail().checkName().checkPassword();
这样就不必每次调用方法都去书写a了。
调用你老母
虽然可以增加原生类型的方法实现需求,但是,绝对不赞成直接在原生对象上直接添加方法,会造成污染,别人创建的函数也会有这个自定义方法,造成不必要开销,例如
Function.prototype.checkEmail = function () {
//验证邮箱
};
var f = function () {};
f.checkEmail();
但是如果有必要可以增加抽象的方法来实现功能需求:
Function.prototype.addMethod = function (name, fn) {
this.prototype[name] = fn;
return this;
}
var Methods = function(){};
Methods.addMethod ('checkName', funciton () {
//验证姓名
}).addMethod ('checkEmail', funciton () {
//验证邮箱
});
var m = new Methods ();
m.checkEmail();
这样通过对原生对象的扩展一个统一添加方法的功能方法,增加了自定义函数,减少了危害。
《JavaScript设计模式》读书笔记——灵活的语言的更多相关文章
- JavaScript设计模式:读书笔记(未完)
该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...
- JavaScript设计模式 -- 读书笔记
JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...
- JavaScript设计模式读书笔记之一:接口
接口 在JavaScrip中模仿接口 用注释描述接口 用属性检查模仿接口 用鸭式辨型模仿接口 依赖于接口的设计模式 工厂模式 组合模式 装饰者模式 命令模式 接口 在JavaScrip中模仿接口 用注 ...
- 《Go并发编程实战》读书笔记-初识Go语言
<Go并发编程实战>读书笔记-初识Go语言 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讲解怎样用Go语言之前,我们先介绍Go语言的特性,基础概念和标准命令. 一. ...
- 《你不知道的javascript》读书笔记2
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...
- HeadFirst设计模式读书笔记--目录
HeadFirst设计模式读书笔记(1)-策略模式(Strategy Pattern) HeadFirst设计模式读书笔记(2)-观察者模式(Observer Pattern) HeadFirst设计 ...
- 《编写可维护的javascript》读书笔记(中)——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
- javascript设计模式 第一章 灵活的javascript
javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
随机推荐
- hive1.2.2部署
1.解压hvie.tar,进入conf目录下,cp hive-default.xml.template hive-site.xml; 2.将hive下的新版本jline的JAR包拷贝到hadoop下: ...
- 1031: [JSOI2007]字符加密Cipher
1031: [JSOI2007]字符加密Cipher Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 7338 Solved: 3182[Submit ...
- robotframework自动化:登陆操作
robotframework自动化系统:登录 robotframework对于编程能力比较弱的测试人员而言,真的是雪中送炭!我们可以使用robotframework根据之前完成的测试用例,一步步完善自 ...
- Node.js EventEmitter
Node.js EventEmitter Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有 ...
- css中单位px和em,rem的区别[转载]
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- w3wp.exe已附加有调试器,但没有该调试器配置为调试此未经处理的异常,若要调试此异常,必须分离当前的调试器。
之前通过使用VS2010附加进程调试项目后,今天开机发现调试本机的项目报错如下图: 到网上到处查看无果,经过反复实验找到解决方法,我的项目是发布到IIS的 1.首先删除IIS上面的项目 2.在VS右击 ...
- css 选择器和优先级
css样式是做网页时,页面 布局不可或缺的关键点.但是在做网页时,会遇到一些明明已经设置了样式的元素,缺无法达到想要的效果,这种情况比较常见.这就涉及到优先级的问题了 要说到css的优先级,先来看下c ...
- elastic-search单机部署以及中文分词IKAnalyzer安装
前提条件 elasticsearch使用版本5.6.3,需要jdk版本1.8,低于该版本不能使用 下载 https://artifacts.elastic.co/downloads/elasticse ...
- 2017阿里云双11-云服务器ECS优惠活动最强解读和购买指南
本站之前介绍了<爆款云服务器,限时2折起>,这其实是阿里云双11之前的预热活动:四款低配的机型,二折给用户(每个用户限购一台),非常的实惠,有很多阅读了本站文章的用户都一次性购买了三年的. ...
- 向TRichEdit插入图片的单元
很简单, 就3个函数, 直接看代码吧 unit RichEditBmp; { 2005-03-04 LiChengbin Added: Insert bitmap or gif into RichEd ...