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

时间:2021-09-05 20:40:28

最近在读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设计模式》读书笔记——灵活的语言的更多相关文章

  1. JavaScript设计模式:读书笔记(未完)

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

  2. JavaScript设计模式 -- 读书笔记

    JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...

  3. JavaScript设计模式读书笔记之一:接口

    接口 在JavaScrip中模仿接口 用注释描述接口 用属性检查模仿接口 用鸭式辨型模仿接口 依赖于接口的设计模式 工厂模式 组合模式 装饰者模式 命令模式 接口 在JavaScrip中模仿接口 用注 ...

  4. 《Go并发编程实战》读书笔记-初识Go语言

    <Go并发编程实战>读书笔记-初识Go语言 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讲解怎样用Go语言之前,我们先介绍Go语言的特性,基础概念和标准命令. 一. ...

  5. 《你不知道的javascript》读书笔记2

    概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...

  6. HeadFirst设计模式读书笔记--目录

    HeadFirst设计模式读书笔记(1)-策略模式(Strategy Pattern) HeadFirst设计模式读书笔记(2)-观察者模式(Observer Pattern) HeadFirst设计 ...

  7. 《编写可维护的javascript》读书笔记(中)——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

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

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

  9. Javascript &amp&semi; JQuery读书笔记

    Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...

随机推荐

  1. Python 基礎 - 字符串常用操作

    字符串常用操作 今天就介紹一下常用的字符串操作,都是以 Python3撰寫的 首字母變大寫 #!/usr/bin/env python3 # -*- coding:utf-8 -*- name = & ...

  2. PHP开发神器——phpstorm

    常用快捷键 快捷键 说明 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 Shift + Enter 新一行 ctrl+q 查看代码注释 ...

  3. 深入理解java虚拟机【Java内存结构】

    Java虚拟机规范规定的java虚拟机内存其实就是java虚拟机运行时数据区,其架构如下: 其中方法区和堆是由所有线程共享的数据区. Java虚拟机栈,本地方法栈和程序计数器是线程隔离的数据区. (1 ...

  4. Linux上传与下载&lpar;sz-rz&rpar;

    linux使用rz和sz命令上传和下载文件! sz命令发送文件到本地: # sz filename rz命令本地上传文件到服务器: # rz 执行该命令后,在弹出框中选择要上传的文件即可. 说明:打开 ...

  5. ios 手机端 input 框上方有内阴影

    解决方案 方法1: <!--如果 ui 样式里有边框,可以用外层盒子设置边框--> input{ border:none; } 方法2: //在IOS下,input 和textarea表单 ...

  6. 菜鸟学习Spring——SpringMVC注解版控制层重定向到控制层

    一.概述. SpringMVC中界面请求Contorller1,Contorller1需要重定向到Contorller2中显示其他页面或者做一些业务逻辑,Spring中提供了这个功能利用"r ...

  7. Thinkphp5 使用命令行模式(cli模式)

    Tp5的cli模式跟Tp3.2变化较大,有自己的一套方式,在这里做个搬运工,把Tp文档的东西搬运过来,方便大家. 原出处截图 创建自定义命令行 第一步,配置command.php文件,目录在appli ...

  8. djangocms安装使用指南

    ubuntu 14.04 virtualenv venv --python=python3 . venv/bin/activate sudo apt-get upgradesudo apt-get i ...

  9. Loj &num;6019&period; 「from CommonAnts」寻找 LCM

    给个链接:https://loj.ac/problem/6019 还是一道扩展卢卡斯+中国剩余定理....就当练练手 但是这题怎么这么卡常呢????!!!!! 在LOJ上死也过不去 (为什么要加那么多 ...

  10. tzcacm去年训练的好题的AC代码及题解

    A - Tree UVA - 548 You are to determine the value of the leaf node in a given binary tree that is th ...