event-manage v1.0.10

Event manage

toc

Event manage是基于浏览器环境下的命令管理框架，实现命令、条件和快捷键的统一管理。

指南

快速入门

1. 在页面内引入event-manage.js。
2. 从全局变量eventManage中获取模块。

const { addCommand } = eventManage

3. 添加命令，并为其指定一个命令名。

const cmd = addCommand('cmd')

4. 为其添加侦听器。

cmd.on(function() {
    console.log("cmd 触发")
})

5. 为其绑定快捷键。

cmd.bind('Ctrl+Shift+A')

6. 打开网页按下Ctrl+Shift+A查看效果。

实现命令条件

1. 引入条件模块。

const { condition } = eventManage

2. 设置条件。

condition.ctd = false

3. 绑定条件

cmd.addCondition("ctd")

4. 修改condition.ctd的值，查看快捷键是否有效。

绑定鼠标事件

1. 绑定快捷键。

cmd.bind("Ctrl+LeftMouse")

2. 绑定事件。

cmd.on(function() {
	console.log("cmd 触发")
}, 'mousemove')

3. 打开页面，按住Ctrl+鼠标左键滑动即可触发cmd。

概念

快捷键的书写规范

1. 使用+符号来分隔键组合。
2. 单词的首字母大写，例如：
   • Ctrl
   • Enter
3. 使用大写字母来表示字母键，例如：A等。
4. Ctrl、Shift、Alt为副键，其余统称为主键。
5. 副键必须搭配一个主键使用。
6. 一个快捷键内可以配合多个副键，但只能有一个主键。
7. 组合键应始终写在主键之前，并遵循固定的顺序。
   • Ctrl+Shift+Alt+主键
   • Ctrl+Shift+主键
   • Ctrl+Alt+主键
   • ...
8. 使用【鼠标按键位置】+Mouse来表示鼠标按键，例如：
   • LeftMouse
   • MiddleMouse

鼠标事件的使用规范

1. 要定义鼠标事件，除了将主键定义为鼠标按键，还要绑定对应的鼠标事件

• mousedown
• mouseup
• mousemove

2. mousemove事件只在对应鼠标按下并同时滑动时才会触发。

3. 如果不定义鼠标模式，将默认使用keydown监听，但是由于主键不是键盘按键，事件将永远不会触发。

条件的使用规范

1. 模块condition用于储存所有的条件，有一些内置的条件可以直接使用。

2. 使用command.addCondition(...condition)来为命令添加条件，条件可以为字符串，也可以为函数（不推荐）。
3. 当传入字符串时，每个条件都将引用condition对应的属性，例如传入"ctn"时，每次按下快捷键都会查询condition.ctn的值，其为true时才会允许触发侦听器，这样有利于集中管理所有的条件。

const { condition, addCommand } = eventManage
const cmd = addCommand('cmd')
condition.ctn = false
cmd.addCondition("ctn")

2. 当传入函数时，只有函数返回true时才会允许触发侦听器。
3. 当引用的属性是函数时，只有函数返回true时才会允许触发侦听器。
4. 当传入多个条件时，只有所有条件都返回true时才会允许触发侦听器。
5. 可以在条件字符串前加上!来对引用结果取反。

const { condition, addCommand } = eventManage
const cmd = addCommand('cmd')
condition.ctn = false
cmd.addCondition("!ctn")

2. 无论是直接传入函数，还是引用了条件函数，函数的第一个参数都是事件触发时的Event对象，但是引用的条件函数可以在引用时传递字符串参数。例如：

condition.fx = function(event, age1, age2) {
    console.log(age1, age2)
    return true
}
cmd.addCondition('fx:age1, age2')

8. condition内置了一些条件方法可供直接调用。

API文档

模块

addCommand(command, key)

添加命令

• command
  • 命令的名字，仅用于方便区分命令
• key
  • 命令绑定的快捷键
• 返回值
  • 返回一个Command的实例

config

config是一个对象，内置了一些对配置项的操作。

condition

condition是用于统一储存所有条件的只读对象。可以在其下定义和修改属性，但是不能覆盖对象本身。

更多condition的操作移步条件的使用规范查看

类

Command

方法

属性

条件方法

@(event, keyWord)

检测源元素或源元素的父级元素是否符合css选择器，可以用于限制快捷键触发的元素。

该方法会缓存css选择器的解析结果以便提升后续执行速度。

注意：如果快捷键事键盘事件，仅支持捕获keydown/keyup事件的元素才可能通过条件。

• keyWord

  css选择器，支持大部分css选择器语法，例如："input[type=checkbox]:checked"

寄语

对本框架的建议可以提交至cffhidol@163.com