AutoNumeric 从 v1.9/v2 升级到 v4 完全指南

AutoNumeric 从 v1.9/v2 升级到 v4 完全指南

【免费下载链接】autoNumeric 项目地址: https://gitcode.com/gh_mirrors/aut/autoNumeric

前言

AutoNumeric 是一个强大的 JavaScript 库，专门用于格式化数字输入和显示。随着版本 4 的发布，该库进行了重大重构，带来了许多改进和新特性。本文将详细介绍如何从旧版本（1.9.x 或 2.x）平滑升级到最新的 4.x 版本。

核心变化概述

版本 4 的主要变化包括：

1. 从 jQuery 插件转变为原生 ES6 模块
2. 配置选项名称全面更新
3. API 调用方式改变
4. 新增多项功能特性

初始化方式变更

旧版本初始化方式

在 v1.9/v2 版本中，AutoNumeric 作为 jQuery 插件使用：

$('.myInput').autoNumeric('init', { options });

新版本初始化方式

v4 版本采用原生 JavaScript 类的方式：

// 初始化单个元素
new AutoNumeric('.myInput', { options });

// 批量初始化多个元素
AutoNumeric.multiple('.myCssClass > input', { options });

配置选项对照表

v4 版本对配置选项进行了全面重命名，使语义更加清晰。以下是新旧选项对照表：

旧选项名	新选项名	说明
aSep	digitGroupSeparator	千位分隔符
nSep	showOnlyNumbersOnFocus	聚焦时是否只显示数字
dGroup	digitalGroupSpacing	数字分组间距
aDec	decimalCharacter	小数点字符
altDec	decimalCharacterAlternative	备用小数点字符
aSign	currencySymbol	货币符号
pSign	currencySymbolPlacement	货币符号位置
pNeg	negativePositiveSignPlacement	正负号位置
aSuffix	suffixText	后缀文本
oLimits	overrideMinMaxLimits	是否覆盖最小/最大值限制
vMax	maximumValue	最大值
vMin	minimumValue	最小值
mDec	decimalPlacesOverride	小数位数覆盖（已弃用）
eDec	decimalPlacesShownOnFocus	聚焦时显示的小数位数
scaleDecimal	decimalPlacesShownOnBlur	失焦时显示的小数位数

重要提示：mDec（或 v2 中的 decimalPlacesOverride）选项已被弃用。现在应该使用 decimalPlaces 全局设置小数位数，或使用 decimalPlacesShownOnFocus 和 decimalPlacesShownOnBlur 分别设置聚焦和失焦时的小数位数。

API 方法变更

v4 版本的方法调用方式也发生了显著变化：

旧版本方法	新版本方法	说明
$(...).autoFormat()	AutoNumeric.format()	格式化数字
$(...).autoUnFormat()	AutoNumeric.unformat()	取消格式化
$(...).autoNumeric("get")	anElement.getNumericString()	获取数字字符串
$(...).autoNumeric("getFormatted")	anElement.getFormatted()	获取格式化后的值
$(...).autoNumeric("getNumber")	anElement.getNumber()	获取数字值
$(...).autoNumeric("update")	anElement.update()	更新配置
$(...).autoNumeric("destroy")	anElement.remove()	移除 AutoNumeric 实例

升级建议

1. 逐步替换：建议先在开发环境中逐步替换旧代码，确保兼容性
2. 控制台警告：v4 版本会在控制台输出详细的弃用警告，帮助定位需要修改的代码
3. 测试覆盖：特别关注小数位数相关的功能，因为这部分变化较大
4. 性能优化：利用新版本的链式调用特性优化代码结构

常见问题解答

Q：为什么移除了 jQuery 依赖？ A：现代前端开发趋向于轻量级解决方案，移除 jQuery 可以减少包体积，提高性能。

Q：如何处理旧项目中的小数位数设置？ A：建议使用新的 decimalPlaces 系列选项替代旧的 mDec 选项，根据需求选择全局设置或特定状态下的设置。

Q：批量初始化有什么限制？ A：批量初始化时，所有元素将共享相同的配置。如果需要不同配置，应该分别初始化。

结语

升级到 AutoNumeric v4 虽然需要一些迁移工作，但新版本提供了更清晰的 API 设计、更好的性能和更多功能特性。按照本文指南进行升级，可以确保平稳过渡到新版本。如果在升级过程中遇到任何问题，建议查阅详细的 API 文档或寻求社区支持。

【免费下载链接】autoNumeric 项目地址: https://gitcode.com/gh_mirrors/aut/autoNumeric