简介
microemit 是一个小巧、快捷、易用的事件派发/订阅库,核心代码只有几十行,支持 ES5、ES6 等主流 JS 版本,可以在前端与后端中进行应用。
安装
可以通过 NPM 安装该库:
npm install microemit --save-dev
或通过 Yarn 安装:
yarn add microemit --dev
使用方法
在 JavaScript 中引入 microemit:
const microemit = require('microemit')
或
import * as microemit from 'microemit'
订阅事件
订阅事件需要用到 emit.on() 方法,接受两个参数,第一个参数是事件名,第二个参数是回调函数。回调函数可以接受订阅者传递的参数。以下是一个简单的示例:
microemit.on('login', function (username) { console.log(`用户 ${username} 已登录`) })
发送事件
发送事件需要用到 emit.emit() 方法,同样需要传递两个参数,第一个是事件名,第二个可选参数是传递给回调函数的参数。以下是示例代码:
microemit.emit('login', 'Tom')
注销事件
注销事件需要用到 emit.off() 方法,接受两个参数,第一个参数是事件名,第二个可选参数是回调函数。如果省略第二个参数,则注销该事件下的所有回调函数。以下是一个简单的示例:
microemit.off('login', function (username) { console.log(`用户 ${username} 已登录`) })
或者
microemit.off('login')
应用示例
以下是一个简单的使用示例,该示例定义了一个响应式表单组件,当表单值改变时,向父组件派发 change 事件,父组件可以在监听该事件后更新状态。示例代码如下:
-- -------------------- ---- ------- ------ - -- --------- ---- ----------- ----- ---- - ----------- -- - --------- - -- ---------- - ------------------------------- ------------------------------------------------ -- - -- ---------- --------- ----------------------------------------------------- - ----------------------------------- -- -- - ------------------------ - -------------- ------------------------ ---------- -- - -- - - ----- ---- - --- ------ ---------------------- ---- -- - --------------------- ----- --
总结
microemit 可以很方便、快速地实现事件派发/订阅,尤其适用于小型项目和库的开发。它体积小巧、易用,同时确保了代码的可读性和可维护性。在实际前端开发中,我们可以很方便地将其应用到各种场景中,比如表单组件、多人协作编辑等。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f05