npm 包 au-dirty 使用教程

前言：

在日常开发中，难免会遇到需要监测表单是否被修改的情况，比如我曾经在项目中需要用到一种情况，当用户进入编辑页面后，当他修改了某些内容（包括文本框、下拉框、单选框、多选框等等），则需要将保存按钮激活，否则禁用。在查找了很多资料后，我发现了一个可以实现这个功能的 npm 包，那就是 au-dirty。

一、前置知识

在使用 au-dirty 前，你需要先了解：

  1. 什么是 npm 包（懂得可以跳过）；
  2. 要在项目中使用 npm 包，必须先安装 Node.js。

这里不再赘述，具体请移步 Node.js 和 npm 官网。

二、安装

使用 au-dirty 的前提条件就是，你的项目中已经安装了 aurelia 框架。

通过以下命令可以安装 au-dirty：

--- ------- -------- ----------

其中，“--save-dev”指定了将该包添加到开发环境的依赖中。

三、基本用法

  1. 引入 au-dirty：

在你需要使用 au-dirty 的页面中，首先需要引入 au-dirty。以 TypeScript 为例，在你的类内部加入以下代码：

------ - -- -- ---- --------------------
------ - -- ----- ---- -----------

------ ----- ---- -
    ------- ------------- -------------------
    ------------- -
        ----------------- - --- ---------------------
    -
-
  1. 监测表单：

如上代码所示，首先定义了一个 DirtyChecker 实例。这个实例是用来监测表单是否被修改的。具体来说，au-dirty 通过监听表单元素的 “blur” 事件、文本框的 “input” 事件等来监测表单的修改。

在页面DOM加载的时候，需要将页面中所有要监测的表单注册到 dirtyChecker 中。比如：

------ ---------- -
    -----------------------------
        --- --------------------------------------------------
        --- -------------------------------------------------
        --- ----------------------------------------------------
        --- -----------------------------------------------------
        --- --------------------------------------------------
    ---
-

上述代码的意思是，在页面加载完成后，将表单中的 name、age、gender、address 和 email 等输入框注册到 dirtyChecker 中进行监听。

  1. 监测表单变化：

当表单中的某个值被修改时，dirtyChecker 会将它设为 dirty ，并给出提示。

------ -------- -
    -- ----------------------------- -
        -----------------------
    - ---- -
        -----------------------
    -
-

上述代码是当用户点击保存时，会触发该函数。如果表单已被修改，则弹出提示“表单已被修改！”；否则，弹出提示“表单未被修改！”。

四、实际应用

在实际开发中，我们需要监测的表单可能不止一个，而且可能包括更多元素（比如下拉框、单选框、多选框等）。此时，我们可以定义一个函数，用来将页面中所有需要监测的表单加入 dirtyChecker 中。比如：

------- ---------------- -
    ----- ------ - -
        --- ---------------------------------------------------
        --- ----------------------------------------------------
        --- ------------------------------------------------------
        --- --------------------------------------------------
        --- ---------------------------------------------------
        --- ---------------------------------------------------
        --- -----------------------------------------------------
        --- ---------------------------------------------------------
        --- ------------------------------------------------------
    --
    ------------------------------------
-

在页面加载完成后，我们只需要调用 registerFields() 函数就可以将所有的表单加入 dirtyChecker 中。

五、总结

以上就是我对 npm 包 au-dirty 的使用教程。该包可以很方便地监测表单是否被修改，非常适合用在一些需要实时监测表单状态的场景下。希望对大家有所帮助。

完整示例代码：（HTML 和 TypeScript 版本都包含在内）

----------
  ---- ---------------------
    ---- -------------------
      ------ -----------------------
      ------ -------------------- ---------- ---------------------- ---------- ------------------ --
    ------
    ---- -------------------
      ------ --------------------------
      ------- -------------------- ------------- ---------------------------
        ------- ----------------------------------------
        ------- --------------------------------
        ------- --------------------------------
      ---------
    ------
    ---- -------------------
      ------ ------------------------
      ------ -------------------- ----------- ----------------------- ---------- ---------------------
    ------
    ---- -------------------
      ------ --------------------------
      ------ -------------------- ------------ ------------------------ ---------- -------------------- --
    ------
    ---- -------------------
      ------ -------------------------------
      ------ -------------------- ---------------- ----------- ---------------------------- ---------- ------------------------ --------------------------
    ------
    ---- -------------------
      ------ -----------------------
      ------ -------------------- ---------- ------------- ---------------------- ---------- ---------------------- --
    ------
    ---- -------------------
      ------ ----------------------
      --------- -------------------- --------- -------- --------------------- ---------- -----------------------------
    ------
    ---- -------------------
      ------ -----------------------
      ------ ----------- ------------------------- ------------
      ---- ----------------------- - ------------------------ - ---------- - -----
    ------
    ---- -------------------
      ------ --------------- ------------------------ -------------- ---------------------------------
      ------ ------------------------ ---------------------------
    ------
    ------- ------------- ------------------------- ---------- ----------- ----- ----------- ---------------------------------------------------
  ------
-----------

------- ----------
------ - -- -- ---- --------------------
------ - -- ----- ---- -----------

------ ----- ---- -
  ------------ ----- ----
  ------- ---------------
  ------- ------------- -------------------

  ------------- -
    ----------------- - --- ---------------------
  -

  ------ ---------- -
    ----------------------
  -

  ------- ---------------- -
    ----- ------ - -
      --- ---------------------------------------------------
      --- ----------------------------------------------------
      --- ------------------------------------------------------
      --- --------------------------------------------------
      --- ---------------------------------------------------
      --- ---------------------------------------------------
      --- -----------------------------------------------------
      --- ---------------------------------------------------------
      --- ------------------------------------------------------
    --
    ------------------------------------
  -

  ------ -------- -
    -- ----------------------------- -
      -----------------------
    - ---- -
      -----------------------
    -
  -

  ------- --- ----------- ----------- -
    ------ ------------------------------------------
  -
-
---------

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c2c81e8991b448ebbae

阅读全文

猜你喜欢

  • npm 包 react-native-a2s-emoticons 使用教程

    在移动端应用中，输入框中的表情符号是很重要的一部分。因为人们总是用表情符号来表达自己的情感和感受。在 React Native 中，开发者可以使用 npm 包 react-native-a2s-emo...

    3 年前
  • npm 包 routing-api 使用教程

    在前端开发中，我们经常需要处理路由。不过，在实现路由时，我们往往需要写大量的重复代码，这不仅增加了工作量，而且也容易出错。为了解决这个问题，我们可以使用 npm 包 routing-api。

    3 年前
  • npm 包 react-compose-components 使用教程

    介绍 react-compose-components 是一个用于 React 应用程序的 npm 包，用于将各个组件组合在一起以创建新的组件。它支持通过提供模板来自动组合 React 组件，从而简化...

    3 年前
  • npm包bitcore-divi使用教程

    本文将介绍 npm 包 bitcore-divi 的使用教程，旨在为前端开发者提供详细的指导和学习资料，帮助开发者更好地使用该工具，快速构建高效的 Web 应用程序。

    3 年前
  • npm 包 local-https-dev 使用教程

    在前端开发过程中，我们经常需要在本地运行 HTTPS 协议网站以测试和调试开发的功能。local-https-dev 是一个可方便快捷地搭建本地 HTTPS 环境的 npm 包，本文将介绍如何使用 l...

    3 年前
  • npm 包 biosan-code-control 使用教程

    介绍 biosan-code-control 是一个符合 BIOSAN 样式规范的代码编辑器，是面向前端开发人员的一个 npm 包。使用它可以轻松地创建一个能够编辑固定颜色、格式以及布局的代码块。

    3 年前
  • npm 包 test-popperjs 使用教程

    前言 在前端开发中，我们经常需要使用一些弹出框或者下拉框等外观效果。而实现这些效果时，我们通常会选择使用一些第三方库，如 Bootstrap、Popper.js 等等。

    3 年前
  • npm 包 local-ip-webpack-plugin 使用教程

    我们经常需要在前端开发中获取本地 IP 地址，比如用于调试时查看本机在局域网中的 IP 地址，或者是用于调试手机端页面时，需要在手机浏览器中打开本机的 Web 服务器。

    3 年前
  • npm 包 my-popperjs 使用教程

    前言 在前端开发中，选择一个好的弹出框组件是非常关键的。一款好的弹出框组件可以有效地提高用户体验，提高页面交互性，并使项目开发更加高效便捷。在众多的弹出框组件中，my-popperjs 是一个优秀的弹...

    3 年前
  • npm 包 font-proxima-nova-scss 使用教程

    在前端开发中，字体是非常重要的元素之一。然而，为了保证文档的一致性，我们通常需要使用统一的字体。Font Proxima Nova 是一款非常受欢迎的字体，而 font-proxima-nova-sc...

    3 年前
  • npm 包 node-identity-server 使用教程

    介绍 node-identity-server 是一个基于 Node.js 和 Express 的身份验证服务，它支持 OAuth2、OpenID Connect 等标准协议，并提供了用户管理、角色管...

    3 年前
  • npm 包 rc-dialog-wcast 使用教程

    前言 在前端的开发中，我们经常会需要用到弹窗组件。实现一个简单的弹窗并不难，但是要做到可定制化、易用性强，就需要依靠一些好用的组件库来实现。而 rc-dialog-wcast 就是一个高度可定制化的弹...

    3 年前
  • npm 包 react-rating-star 使用教程

    前言 React 作为一款流行的前端框架，其生态系统也非常丰富。其中，npm 包作为一种常见的功能扩展方式，对于提升前端开发效率和降低维护成本起到了重要作用。本文将介绍一款名为 react-ratin...

    3 年前
  • npm 包 ng2-file-input-bap 使用教程

    在前端开发中，文件上传功能经常被用到。而 Angular 框架中，ng2-file-input-bap 是一个优秀的文件上传组件。它提供了多种方式来配置，可以满足大部分的需求。

    3 年前
  • npm包vue-theme-loader使用教程

    概述 前端经常需要实现多种主题，通常的做法是使用CSS变量，但是这种方式不太友好，手动在CSS中定义所有变量很麻烦。vue-theme-loader可以解决这个问题，使用它可以让你更加方便地创建和切换...

    3 年前
  • npm 包 cerebral-provider-forms 使用教程

    在前端开发中，实现表单交互是必不可少的。而 cerebral-provider-forms 是一个支持表单状态管理的 npm 包，可以让表单操作更加方便、简洁。 本文将详细介绍 cerebral-pr...

    3 年前
  • npm 包 create-reducer-ts 使用教程

    什么是 create-reducer-ts create-reducer-ts 是一个基于 TypeScript 的轻量级 reducer 创造器，它可以帮助我们更加简单而高效的编写 reducer。

    3 年前
  • npm包temporary-rocketlets-ts-definition使用教程

    介绍 temporary-rocketlets-ts-definition是一个npm包，可以帮助前端开发人员轻松生成ts定义文件。在使用Typescript时，定义文件是必不可少的，它们描述了要导入...

    3 年前
  • npm 包 morphic-gui 使用教程

    在前端开发中，使用 npm 包能够大大提高我们的开发效率。本文将介绍一个名为 morphic-gui 的 npm 包的使用教程，希望对您有所帮助。 什么是 morphic-gui？ morphic-g...

    3 年前
  • npm 包 redux-structures 使用教程

    前言 在前端开发中使用 redux 是常见的做法，Redux 提供了一种可预测的状态管理模式，适用于大型应用。同时，redux-structures 是一个 npm 包，可以帮助我们更加高效地使用 R...

    3 年前

相关推荐

    暂无文章