JS中的WeakMap与WeakSet
介绍
WeakMap与WeakSet都是一种优化使用内存的解决方案。这两个数据结构的引用不会导致这些对象不被回收。上来就说这些有点太枯燥了,还是先聊聊它们能干什么。
WeakSet
集合就是一堆互异的数据,想必这个读者都早就明白了,这里不多说。
相对于正统Set,WeakSet只提供三个方法:add、delete和has。正如前文所说,它们的引用GC是不管的,所以它也不清楚自己到底引用了多少个对象 ...
基于JSON文件的轻量级数据库
仓库
仓库地址:Github仓库
安装
已经发布到npm仓库,可以用npm、yarn、pnpm等等安装:
1npm i json-file-database
介绍
轻量级仓库,其内部实现原理就是把数组包装了一下,使得源数据改变时自动保存。
下面是Github页面上给出的示例代码,这英语也比较简单就不翻译了,毕竟是我写的Chinglish。
12345678910111213141516171819 ...
JS防抖与节流
源码
前往Codepen在线体验。
介绍
防抖和节流是两个JS中的概念,它们被广泛应用于被频繁触发的事件中,如搜索框在输入时会弹出候选列表:如果每次输入都发送一个AJAX请求来获取数据,那么后台就要被刷爆了。所以,这里就引出了本文要介绍的概念。
防抖
在 x 秒内,无论调用多少次这个函数,它只会在最后一次调用的 x 秒后被真正执行。
在参考文章里举了这样一个例子:
一个小孩向妈妈要蛋糕,他的妈妈 ...
JS关于或运算符的问题
背景
这是在AVL树计算高度时遇到的问题。为了方便大家看到问题的本质,这里使用一个单链表复现问题。
我们有一个链表,并且把它的深度储存到了每一个节点里(所谓深度就是它拥有的子节点层数,对于一个链表而言就是它的长度减一)。
复现
先一个个函数来实现一个简单的链表。不直接说的原因是我想让读者带入到当时的场景,思考为什么出现问题,这样才能印象更深刻,同时我在再次回头看这篇文章的时候也能会想起当时的场景。 ...
JS设计模式之备忘录模式
意图
在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。
——《设计模式:可复用面向对象软件的基础》中文版第212页
这个常常被运用于游戏存档、操作撤销等场景。
示例
这是一个悲催的故事,内容是一个人先涨薪然后通过本文提到的功能恢复了原来的薪水。如下:
1234567891011121314151617181920212223 ...
JS设计模式之策略模式
意图
定义一系列算法, 把它们一个个封装起来,并且使它们可以相互替换。本模式使得算法可独立于使用它的客户而变化。
——《设计模式:可复用面向对象软件的基础》中文版第234页
由于在JS中,函数是一等公民,所以我们这里直接把函数当作这一个个策略对象即可。
示例
我们的编码目的是,根据一个人的等级把他的薪水乘不同的系数:
如果是A级,就乘4。
如果是B级,就乘3。
如果是C级,就乘2。
不要用 ...
JS设计模式之职责链模式
意图
使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系。将这些对象连城一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。
——《设计模式:可复用面向对象软件的基础》中文版第167页
尤其是我们在处理不同类型的表单时,这个设计模式就能很好的派上用场。
示例
假设我们给一个商场写逻辑,需求是:
已经支付了500元定金的用户享7折优惠。
已经支付了100元定金的用户享 ...
JS设计模式之装饰器模式
意图
动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为灵活。
——《设计模式:可复用面向对象软件的基础》中文版第132页
在Java中这样的设计可太多了,比如进行IO操作时的XxxReader,那么这里就模仿它进行一个应用。
示例
如下:
123456789101112131415161718192021222324252627282930313233343536 ...
JS设计模式之适配器模式
意图
将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
——《设计模式:可复用面向对象软件的基础》中文版第106页
值得注意的是,在JS中,我们对于数据类型的适配(把后端传来的JSON转成我们希望的格式)也应属于适配器的范畴,所以下文中分别叙述它们的应用。
示例
这两个例子都写在了同一个文件里。
适配方法
假设我们有谷歌地图和百度 ...
JS设计模式之原型模式
意图
用原型示例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。
——《设计模式:可复用面向对象软件的基础》中文版第89页
所以这里说的原型类似于对象的蓝图。但是,由于JS的灵活性,这个设计模式对于JS来说不是很重要。
因为在像C++这样的静态语言中,类不是对象,并且运行时只能得到很少或者得不到任何类型信息,所以Prototype(原型模式)特别有用。而在Smalltalk或Objec ...