mitt 是一个小而美的发布-订阅库,短短的几十行代码,小于 200b 的体积,提供三个重要的 api。然而麻雀虽小,五脏俱全。
发布-订阅模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。
有这样的一个需求,小明想买 100w 以内的二手房,小华想买 150w 左右的二手房,但是房产中介告诉他俩,暂时没有他们想要的房源,中介的工作人员留下他俩的联系方式,一旦有合适的房源就通过电话通知。这就是一个经典使用发布-订阅的模式的场景。请看下面的代码。
const mitt = require("mitt");
const houseAgents = mitt();
houseAgents.on("xiaoming", () => {
console.log("有 100w 以内的房源了");
});
houseAgents.on("xiaohua", () => {
console.log("有 150w 左右的房源了");
});
过了一段时间,中介收到 150w 左右的房源,立马通知 xiaohua。
houseAgents.emit("xiaohua");
mitt 通过几十行代码实现了发布-订阅机制。我们来剖析一下 mitt 源码。
function mitt(all) {
all = all || Object.create(null);
return {
on: function () {
/* some code*/
},
emit: function () {
/* some code*/
},
off: function () {
/* some code*/
},
};
}
mitt 库的源码中只有一个 mitt 函数。它接收 all 参数,返回一个对象,该对象包含 on、emit、off 三个方法。
all = all || Object.create(null);
mitt 方法接收 all 参数,all 用来存储监听的事件。当传入的 all 的值是 undefined、null、""、false、NaN 等值时,all 的值默认为 Object.create(null), 它是一个没有 __proto__ 属性的对象。
实际上,这里缺少类型处理。比如 mitt(true), 就会导致错误。
const mitt = require("mitt");
const ob = mitt(true);
ob.on("a", () => {});
ob.emit("a", "dd");
建议 all 的类型是对象类型或者不传。推荐传入空对象或数组。
const mitt = require("mitt");
const ob = mitt();
/*
or
const ob = mitt([]);
const ob = mitt({});
*/
接下来,我们来看看 mitt 里非常重要的三个方法。
// ...
on: function on(type, handler) {
(all[type] || (all[type] = [])).push(handler);
}
// ...
on 接收两个参数,type 类型和 handler 事件处理方法。方法体内仅有一行非常优雅的代码。当该类型存在时,就将其事件处理追加到数组后面,当该类型不存在时,初始化一个空数组,用来存储该类型的事件处理方法。
emit: function emit(type, evt) {
(all[type] || []).slice().map(function (handler) {
handler(evt);
});
(all["*"] || []).slice().map(function (handler) {
handler(type, evt);
});
}
订阅事件使用 on 方法,发布事件使用 emit 方法。emit 方法里就做了一件事,根据事件类型,将该类型订阅的所有事件遍历调用。
通过分析 mitt 的源码,我们会发现,mitt 没有考虑匿名函数情况,在使用 on 方法时,传入的第二个参数必须是具名函数。
class PubSub {
constructor() {
this.listeners = [];
}
sub(type, handler, always) {
console.log(this.listeners[type] || []);
if (!this.listeners[type]) {
this.listeners[type] = [];
}
this.listeners[type].push({ handler, always });
}
on(type, handler, always = true) {
this.sub(type, handler, always);
}
once(type, handler, always = false) {
this.sub(type, handler, always);
}
emit(type, evt) {
if (this.listeners[type]) {
this.listeners[type].forEach((listener) => {
listener.handler(evt);
});
this.listeners[type] = this.listeners[type].slice().filter((listener) => Boolean(listener.always));
}
}
off(type, handler) {
if (this.listeners[type]) {
this.listeners[type] = this.listeners[type]
.slice()
.filter((listener) => listener.handler.toString() !== handler.toString());
}
}
}
来自:https://segmentfault.com/a/1190000043417806
一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中断。鉴于有问题的代码是广泛使用的 MooTools 库的一部分,很可能会有更多网站受到影响。
让你了解到新兴和酷炫的web 开发趋势. 精心挑选发布一些认为大家值得关注的库:Direction Reveal、Carbon、Аxios、Jarvis、Toast UI Editor、Micron.js、lit
math.js是一个广泛应用于JavaScript 和 Node.js的数学库,它的特点是灵活表达式解析器,支持符号计算,内置大量函数与常量,并提供集成解决方案来处理不同的数据类型,如数字,大数字,复数,分数,单位和矩阵。
当你调研一个 JS 库,功能当然是最重要的。作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性,稳定性,性能,包生态,社区,学习曲线,文档,工具,发展历史,团队,兼容性,趋势
对于今年的JavaScript状态调查,我想深入挖掘一下,不仅知道人们正在使用哪些工具和库,还要为什么他们选择使用它们。这意味着我必须找到一种方法将个人偏好转化为冷酷的数据。
本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。
我们的使命是让您了解最新和最酷的Web开发趋势。下面为大家分享10个有趣的javascript和css库:Tessaract.js强大的javascript(节点和浏览器)库,用于从图像中提取文本。
在javascript的帮助下,可以为几乎每个领域(如移动、桌面应用程序和游戏Web开发)创建Web应用程序,因为该编程语言用作服务器端编程语言以实现最大功能,所以它是一种很好的编程语言。在本文中,我们选择了一些最佳的javascript库汇总
当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。经过一番研究,我收集了 11 个最好的库,你可以用在自己的项目中。另外我还添加了一些有用但是缺少持续维护的库
如今 Vue 的热度不断攀升,使用者越来越多,Vue.js 工具也随处可见。这种现象不是凭空产生的:Vue 的学习曲线友好,功能驱动的结构清晰易懂,文档出色易学,所以新人入门很容易,经验丰富的开发人员也可以快速从其他框架
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!