新年IMaskjs 6-React Native，管道，ESM

大家好！

我刚刚发布了imaskjs库的第六版。 在每个主要版本之后，在我看来，这是最新版本。 该图书馆已有一年多的历史了，它很稳定并且在社区中很受欢迎。 在那里甚至在主要版本上还能做什么？ 在我所有的项目中，我都会尝试执行一些任务，以免在当前情况下不再返回它们。 面膜有什么变化？ -浏览器不会更改其API，javascript是相同的，业务任务是相同的-电话，卡号，电话号码。 为什么您不能停下来，想起并不再接触？

当然，您有时需要不时地将其下推，以使该项目似乎还活着，并且对github的最后一次提交日期也得到了更新。 选择图书馆时，我不是唯一看着她的人吗？

但是，似乎没有严肃的理由可以做出改变。 其实有。 以我为例，主要变化涉及javascript生态系统：语言本身早已超出了浏览器的范围，并扩展到以前使用本机工具的地方，这对工具提出了新要求。 新的UI框架也正在出现，需要进行一些调整。 尽管在我看来，库的接口已尽可能地简单和方便，但是无论如何在浏览器中都完全没有集成的问题就存在而且也不会出现问题。 但是后来我开始为React Native开发插件。

我们爬上React Native的管道

据我所知，React Native是一个已经存在很长时间的大型项目，甚至在产品中使用了认真的人。 几年前，我尝试在一个小型测试项目上使用RN，到那时我的实践就结束了–我上网了。 大约在同一时间，我为RN上的面罩制作了一个插件，并尽力使它如我所愿地工作，但是不能。 我在RN信息库中发现了一些有关处理输入和光标定位的错误，冷静下来后决定稍等一下。

一年多过去了，我认为是时候该回来了，已经摆脱了这个插件。 事实证明，这段时间几乎没有任何变化：由于缺少活动而关闭了旧的bug，光标定位界面发生了一些变化，仅此而已。 我想认为问题出在我的库中，我将修复所有问题，并且它将起作用。 las，在我看来，掩码已经具有最简单的接口-大部分逻辑都提取到内核中，对于处理输入，您只需要两个状态-光标和更改前后的值。 我认为没有比这更容易的方法了，但我仍然无法获得RN。

困难之一是RN中输入事件的顺序与浏览器不同。 例如，在用于输入事件的浏览器中，光标已经位于新位置，但是在RN中，存在一个单独的onSelectionChange事件，该事件在更改值后发生，并且仅在iOS上发生，而在Android上相反。 第二点-您无法在RN上的value change事件的事件处理程序的字段中更改该字段中的值，这与光标定位相同。 因此，更改的延迟是不可避免的，因此，文本和光标会发生抽动。 这些错误已经存在了将近三年，所以我认为没有理由再等待了-我按原样推出了该插件，但是我不建议您使用它。 相反，我这样做是为了引起社会的注意：可能会在RN中修复错误，或者可能有人会将本机代码中的事件处理连接到IMask，从而可以避免此类问题。

自备管

现在介绍一下好处。 遮罩现在可以用于格式化和转换：

const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, }); // `numberPipe` -    numberPipe('1'); // "1,00" 

您可以重复使用一个掩码来处理输入和格式化，例如在表单上：

 //     const mask = IMask(el, { mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, }); //   pipe    , //     IMask.pipe( 1, //  mask.masked, //     IMask.PIPE_TYPE.TYPED, //     IMask.PIPE_TYPE.UNMASKED //     ) // 1.00 

为了方便起见，在Angular插件中，将其包装在本地Pipe中。
再次，尽可能简单和实用，顺便说一下，实际上是5行代码的实现是成功架构的标志。 但是，已经添加了5行以上的代码，而且整个库的大小已经非常严格。

ESM模块

几年前，当面具大约30 Kb时，我告诉大家，对于面具来说，这并不多。 现在几乎是60 Kb，甚至对我来说似乎有点太多。 有一个简单的解决方案- gzip 只拿你需要的东西。 理想情况下，收集器应自动分析依赖关系并丢弃所有未使用的东西。 尽管ESM模块已经存在了很长时间，但是几乎无法进行树状摇晃，因为 对内部实体的引用位于根IMask对象中。 这样做是由于掩码中存在循环依赖关系，并且还因为我希望掩码能够同时导入一个根对象或部分导入。 例如，这是在React中完成的：

 import { Component } from 'react'; import React from 'react'; React.Component === Component; // true 

在IMask 6.0中，模块之间的硬链接断开，可以导入单个模块：

 //    // import IMask from 'imask'; //      import IMask from 'imask/esm/imask'; //   ,   //    import 'imask/esm/masked/number'; //      ,       const numberMask = IMask(element, { mask: Number }); 

在这种情况下，您可以继续使用旧的方法，并且不会有任何问题，但是树形交换也不起作用。

好吧，对于初学者：新版本支持contenteditable和Web组件！ 感谢社区的反馈和汇总请求。

随着每个新版本的发布，错误变得越来越稀薄，希望更加奇特。 在这里，事情似乎已经结束了。 因此，在项目结束或出现更好的情况之前，它将是无限的。 也许平台将改变并且新界面将会出现。 但是显然，浏览器现在处在青春和成熟之间，并且在text-mask失效之后，IMask没有其他功能替代品，而且我仍然可以在开放源代码上花些时间，因此应该有一个面具。

伴随着新年的到来，所有的成功和灵感！