Javascript设计模式与开发实践读书笔记(1-3章)
第一章 面向对象的Javascript
1.1 多态在面向对象设计中的应用
多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切多态会搞定
换句话说就是:多态的最根本作用就是把过程化的条件分支语句转化为对象的多态性,从而消除这些条件分支语句
例子:假设有一个地图应用,每个地图API提供商都提供了show方法,负责在页面上显示地图,首先我们用一些分支条件语句来实现一个调用方法renderMap
此时一旦需要增加搜搜地图的应用,就必须改动renderMap函数,继续在里面堆砌分支条件语句
我们必须将程序中相同的部分抽象出来,那就是显示整个地图
那么此时,即使以后增加了搜搜地图,renderMap也不需要做什么改变
1.2 对象会记住它的原型
就Javascript的真正实现来说,不能说对象有原型,而只能说对象的构造器有原型,对“对象把请求委托给它自己的原型”这句话, 更好的说法是对象把请求委托给它的构造器原型,
javascript对象通过一个名为_proto_的隐藏属性,来将请求转交给它的构造器,对象的_proto_会指向的它的构造器对象,实际上,_proto_就是对象跟“对象构造器原型”联系起来的纽带
1.3 如果对象无法响应请求,会把请求委托给它的构造器原型
当对象需要a需要借用对象b的能力时,可以选择性的把对象a的构造器的原型指向对象b,从而达到继承的目的
- 首先,尝试遍历对象a的所有属性,没有找到name这个属性
- 查找name属性的这个请求被委托给对象a的构造器原型,它被a._proto_记录着并且指向A.prototype,而A.prototype指向obj.
- 在对象obj中找到了name属性,并返回了它的值
当我们期望得到一个“类”继承自另外一个“类"的效果时,往往会使用下面的方式
第二章 this、call和apply
2.1 this的指向
this的指向大致可以分为以下4种:
- 作为对象的方法调用
- 作为普通函数调用
- 构造器调用
- Function.prototype.call或Function.prototype.apply调用(动态的改编传入函数的this)
例子:在div节点事件函数内部,有一个局部的callback方法,callback在调用时,内部的this会指向window
而我们想让它指向div节点,可以用一个变量保存div节点的引用
2.2 call和apply的区别
apply接受两个参数,第一个参数指定了函数体内的this对象的指向,第二个参数为一个带下标的集合,可以为数组,也可以是类数组,apply方法将这个集合中的元素作为参数传递给被调用的函数
call传入的参数不固定,第一个也是代表函数体内this的指向,第二个参数开始,每个参数依次被传入函数
javascript不计较形参实参和顺序上的区别,javascript内部的参数就是用一个数组来表示的,所以apply使用的更频繁一点,我们不必关心具体有多少个参数要传入给函数,只需要一股脑的推过去就好了
如果我们明确知道函数接受多少个参数,而且想一目了然的表达形参和实参的关系,那么也可以用call来传送参数
第三章 闭包和高阶函数
3.1 变量的生命周期
假设页面上有5个div节点,我们通过循环来给每个div绑定onclick事件,按照索引顺序,点击第一个div时弹出0,点击第二个div时弹出1,依次类推,代码如下:
但由于onclick是异步出发,当事件触发时,for循环早已结束,此时i已经是5,所以输出一直是5,解决方法是把每次循环的i封闭起来,当在事件函数中顺着作用于链从内到外查找i时,会先找到被封闭在闭包环境中的i
3.2 封装变量
把一些不需要暴露在全局的变量封装成私有变量,即封闭在函数内部, 减少页面中的全局变量
封闭在函数内部的变量或函数,只会在初始化闭包函数的时候执行一次,以后每一次调用函数,将不再执行封闭在函数内部的代码,这也是闭包的一大好处
3.3 闭包和面向对象设计
通常面向对象能实现的思想,用闭包也能实现,先来看看跟闭包相关的代码:
如果换成面向对象的写法,就是:
3.4 高阶函数
高阶函数是指至少满足下列条件之一的函数:
- 函数作为参数被传递
- 函数作为返回值输出
1 函数作为参数被传递
将一些难以复用的代码提取出来,用回调函数的形式传入处理函数,如
Array.prototype.sort的使用可以看到,我们的目的是对数组进行排序,这是不变的部分,而使用什么规则去排序,这是可变的部分,把可变的部分封装在函数参数里,动态传入
3.5 函数柯里化(function currying)
currying 又称部分求值,一个currying首先会接受一个参数,接受这个参数之后,并不会马上求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来,待到函数被真正需要求值的时候,之前传入的所有参数都会一次性求值
首先来看下一种currying函数的实现,方便了解其思想
再来看一个通用的function currying() {} ,function currying() {}接受一个参数,即将要被currying的函数
3.6 函数节流
假设一个函数被触发的概率非常高,就需要采取一些函数节流的方式实现
3.7 分时函数
有些函数需要用户主动调用,但因为一些客观原因,这些函数会严重影响页面性能,比如说我们要在短时间内要往页面中大量加载DOM节点,处理这一类问题的解决方案就是使用timeChunk函数让创建节点的工作分批进行,比如1秒创建1000个节点,改为每200毫秒创建8个节点
timeChunk函数接受3个参数,第一个参数是创建节点所用到的数据,第二个参数是创建节点逻辑的函数,第三个参数表示每一批创建的节点数量
3.8 惰性加载函数
比如我们需要一个要在浏览器中绑定时间的addEvent函数
这个函数的缺点就是,当它每次被调用的时候都会执行里面的if条件分支语句
第二种方案就是,在代码加载的时候执行一次判断,以便让addEvent包裹正确逻辑的函数,代码如下
但目前这个函数还是有一个缺点,假设我们从头到尾都没有使用过addEvent函数呢?
第三种方案就是所使用的惰性加载方案,在第一次进入条件分支的时候,在函数内部会重写这个函数,重写之后的函数就是我们期望的addEvent函数,在下一次进入addEvent函数的时候,addEvent就不存在那些分支判断
转载于:https://www.cnblogs.com/elexiang/p/4803259.html
Javascript设计模式与开发实践读书笔记(1-3章)相关推荐
- javascript设计模式(javascript设计模式与开发实践读书笔记)
javascript设计模式(javascript设计模式与开发实践读书笔记) 单例模式 策略模式 代理模式 迭代器模式 发布-订阅模式 命令模式 组合模式 模板方法模式 享元模式 职责链模式 中介者 ...
- JavaScript设计模式与开发实践---读书笔记(6) 代理模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象 ...
- 【夯实基础】《JavaScript设计模式与开发实践》笔记——闭包和高阶函数
虽然 JavaScript 是一门完整的面向对象的编程语言,但这门语言同时也拥有许多函数式语言的特性. 函数式语言的鼻祖是 LISP,JavaScript 在设计之初参考了 LISP 两大方言之一的 ...
- js设计模式与开发实践(读书笔记)
1 面向对象的js 1.1 动态类型语言和鸭子类型 编程语言按数据类型可分成静态类型和动态类型语言,其中js属于动态类型语言,对一个变量赋值时,不需要考虑其类型. 鸭子类型: 通俗理解,只要走起路来像 ...
- JS代理模式《JavaScript设计模式与开发实践》阅读笔记
代理模式 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 保护代理和虚拟代理 保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤. 虚拟 ...
- JavaScript设计模式与开发实践 | 02 - this、call和apply
this JavaScript的this总是指向一个对象,至于指向哪个对象,是在运行时基于函数的执行环境的动态绑定的,而非函数被声明时的环境. this的指向 this的指向大致可以分为以下4类: 作 ...
- 《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式
在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方面,继承这种功能复 ...
- JavaScript设计模式与开发实践——JavaScript的多态
"多态"一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的 ...
- 《JavaScript设计模式与开发实践》阅读摘要
<JavaScript设计模式与开发实践>作者:曾探 系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读 面向对象的js 静态类型:编译时便已确定变量的类型 ...
最新文章
- Windows Server 2016-Powershell迁移FSMO角色
- Logstash 使用http output处理数据
- Matrix Completion with Noise
- 企业需求的Java程序员是什么样子的
- 华为荣耀20和x10比较_华为和荣耀旗舰该如何选?其实懂手机的朋友只选择前者...
- 说好的弯曲损耗不敏感呢!入户皮线光缆的衰耗从何而来?
- ASPEN hysys焓值、熵值转化换算
- 透过华为军团看科技之变(五):智慧园区
- chrome安装crxMouse鼠标右键手势插件后导致需要双击两次才能打开右键菜单
- 计算机文本自定义,自定义文本编辑器
- Grand Prix of Saratov - D. Elevator - DP
- App Store 审核指南 2017-12-13
- java 发送邮件553错误_使用Java Mail API发送邮件,抛出认证错误553 authentication is required. 解决办法...
- AD20原理图生成PCB没有连线问题
- 标签管理--操作标签
- 设计模式-优惠券-策略模式
- dxwebsetup 解决一些dll缺少的问题
- 鼠标右键编辑html文档,鼠标右键菜单编辑方法
- 八道C语言指针笔试题——拿捏指针
- 如何卸载jdk18_如何卸载电脑中的流氓软件
热门文章
- python中深拷贝和浅拷贝_**Python中的深拷贝和浅拷贝详解
- [5] ADB 与应用交互
- PHP笔记-PHP中构造函数要注意的地方
- Qt笔记-解决键盘事件不能正常响应(其他响应事件通用)
- 起点计算机网,《零起点计算机》网第5课.pdf
- mysql 手动执行event_MYSQL 定时自动执行EVENT
- android opengl es 雾化效果实例
- java 转化为utc的时间_我6年时间成长为阿里Java架构师,你呢(附学习路线图)...
- (王道408考研操作系统)第五章输入/输出(I/O)管理-第一节5:假脱机(SPOOLing)技术
- 字符串经典题之大数相加