简介
aurelia-blur-attribute 是一个为 Aurelia 框架创建的自定义属性 directive，它可以让目标元素在失去焦点时触发指定的事件回调函数。该 directive 可以帮助开发者方便地实现一些常见的表单验证或交互行为，例如：当用户输入密码时，通过失去焦点的事件触发密码强度的计算、耗时的异步验证等。
安装和使用
安装
可以通过 npm 包管理器来安装 aurelia-blur-attribute，输入以下命令：
npm install aurelia-blur-attribute
使用
1.在 aurelia.json 或其他配置文件中注册 aurelia-blur-attribute：
{
"name": "aurelia-blur-attribute",
"path": "../node_modules/aurelia-blur-attribute/dist/amd",
"main": "aurelia-blur-attribute"
}2.在需要使用的 HTML 元素上添加 blur.delegate 自定义属性：
<input type="text" blur.delegate="onInputBlur($event)">
3.在相应的 View Model 中实现回调函数 onInputBlur：
export class MyViewModel {
onInputBlur(e) {
console.log(e.target.value);
// more code...
}
}深入讲解
自定义属性
在 HTML 中，元素可以拥有自己的特性标记属性（attribute），这些属性从概念上来说只是用于传递额外信息的字符串值，并没有任何实际作用。在 Web 开发中，我们可以使用 JavaScript 和 CSS 来操作这些自定义属性，实现各种不同的功能。
举个例子，我们可以创建一个自定义属性 data-foo，然后使用 JavaScript 来获取它的值，如下所示：
<div data-foo="bar"></div>
const div = document.querySelector('div');
const value = div.getAttribute('data-foo'); // "bar"在开发中，通过自定义属性来实现一些交互行为或状态控制的需求是很常见的，例如：通过 data-is-active 控制组件的激活状态，通过 data-tooltip 显示鼠标悬浮时的提示信息等。
Aurelia directive
与自定义属性相似，Aurelia 也提供了自定义 directive 的机制，开发者可以根据具体需求来创建 directive， directive 可以拥有自己的行为、属性或逻辑。例如：repeat.for 指令用于对元素进行循环渲染，bind 指令用于数据绑定等。
创建一个简单的 directive，只需要定义一个带有 bind 或 attached 方法的类即可， bind 方法中我们可以获取 directive 对应的元素，并进行任意行为的操作，例如：添加 CSS 类、绑定事件等等。
-- -------------------- ---- -------
------ -------- --------- ---- --------------------
----------------
------ ----- ----------- -
----------- --------
-------------------- -
------------ - --------
-
------ -
----- --------- -------- - -----
------------------- - ------
--------------------------------- -- -- -
---------------------
---
-
-可以看到，在 bind 方法中，我们获取了 directive 对应的元素，并为其添加了一个鼠标点击事件监听器，然后使用 bindable 修饰符定义了一个 myValue 绑定属性，最后为元素设置了红色字体颜色。
然后我们在需要使用该 directive 的元素上使用 my-directive 即可，Aurelia 会自动解析该 directive，并在 bind 方法中实例化它。
<div my-directive my-value="Hello, world!">Hello, Aurelia!</div>
blur.delegate directive
blur.delegate 是一种常见的事件委托指令，在被绑定的元素失去焦点时，该指令会触发回调函数，并传递事件对象作为参数。该 directive 可以发挥作用的元素类型有：input、textarea 和 select。
使用 blur.delegate 可以避免手动绑定元素的 blur 事件，并手动处理事件委托和传递事件对象的问题。
<input type="text" blur.delegate="onInputBlur($event)">
使用 blur.delegate directive 可以实现多次实例化回调函数的目的，例如：将每个 input 都与不同的回调函数绑定，而不是使用如下的方式，共享同一个回调函数：
<!-- 这不是一个好的实践 --> <input type="text" onblur="onInputBlur($event)"> <input type="text" onblur="onInputBlur($event)">
示例
以下是一个简单的例子，展示了如何使用 aurelia-blur-attribute directive 实现失去焦点事件的处理：当输入框失去焦点时，会触发异步验证，通过 Promise 对象可以实现丰富的异步验证行为。
<template>
<form submit.delegate="onFormSubmit()">
<input type="text" blur.delegate="validateInput($event)" placeholder="Enter your name">
<button>Submit</button>
</form>
</template>-- -------------------- ---- -------
------ ----- ----------- -
---------------- -
----- -------- - --
----- ----- - -------------
----- ----------------- - ------------ - --
-- -------------------- -
-------
-
-- ----
------------- -- -
-- ----
----- ------- - -----
-- -- ------- -----------------
-- --------- -
-- ---- -------------
- ---- -
-- ----
-----------------------------------
-
-- ------
-
--------------- -
-- -- ------------
-
-总结
虽然 blur.delegate directive 看似只是一个简单的自定义 attribute，但它确实可以极大地简化表单验证和交互操作中的重复代码，帮助开发者专注于自身的业务逻辑实现。在实践中，开发者可以自定义很多有用的 directive，以实现更高效、规范和易读的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7c238a385564ab6a64