热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析Vue/React组件库中5个开发者鲜为人知的秘密武器

这篇文章将揭示Vue和React组件库中五个鲜为人知的强大工具。这些工具均以纯JavaScript实现,功能卓越。其中,async-validator是一个数据验证插件,不仅预置了URL和电子邮件的验证规则,还支持异步验证功能。

🚀 这五个轮子其实是5个纯js实现的插件, 都非常优秀, 下面一一给大家揭秘.

async-validator(数据验证工具)

默认集成了urlemail验证, 支持异步验证. element-ui和iview的表单组件都是用他实现的验证功能.

import schema from 'async-validator';
// 监视对象'name'字段的值是否等于muji, 且必须存在
var descriptor = {name: {type: "string",required: true,validator: (rule, value) => value === 'muji',}
};
var validator = new schema(descriptor);
validator.validate({name: "muji"}, (errors, fields) => {if(errors) {return handleErrors(errors, fields);}
});

github.com/yiminghe/as…

补充: 看了作者的github, 作者应该是阿里的员工, 而且也是ant design的代码维护者.

moment | day.js(操作时间)

ant design在DatePicker组件中用了moment.

moment由于历史兼容原因体积比较大, 现在建议大家用day.js代替他, 两者语法相似.

dayjs('2018-08-08') // 解析字符串dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 格式化日期dayjs().add(1, 'year') // 当前年份增加一年dayjs().isBefore(dayjs()) // 比较

popover(气泡对话框)

element-ui和iview的tooltip和popover组件都是基于vue-popover实现的, 而vue-popover只是对popper做了一层vue的封装, 所以气泡对话框的核心是popper.

<div class&#61;"my-button">按钮div>
<div class&#61;"my-popper">气泡菜单div>

var reference &#61; document.querySelector(&#39;.my-button&#39;);
var popper &#61; document.querySelector(&#39;.my-popper&#39;);
var popperInstance &#61; new Popper(reference, popper, {// 更多设置
});

autosize(让textarea随着文字换行而变化高度)

vux的textarea用autosize让textarea组件随着输入文字换行而变化高度.

// 就一行, 就实现了"textarea随着输入文字换行而变化高度"
autosize(document.querySelector(&#39;textarea&#39;));

resize-observer-polyfill(Resize Observer API的兼容补丁)

基本所有的ui组件库都在用, 让低版本浏览器也支持Resize Observer API, 这样我们可以放心的监视元素的尺寸变化.

import ResizeObserver from &#39;resize-observer-polyfill&#39;;
const ro &#61; new ResizeObserver((entries, observer) &#61;> {for (const entry of entries) {const {left, top, width, height} &#61; entry.contentRect;console.log(&#39;Element:&#39;, entry.target);console.log(&#96;Element&#39;s size: ${ width }px x ${ height }px&#96;);console.log(&#96;Element&#39;s paddings: ${ top }px ; ${ left }px&#96;);}
});
ro.observe(document.body);

最后

学习了很多组件库的源码, 基于对写代码的热情, 我用ts写了2个小插件, 抽象了一些组件中重复的代码, 大家看下是否需要.

any-touch

&#x1f44b;一个手势库, 支持tap(点击) / press(按) / pan(拖拽) / swipe(划) / pinch(捏合) / rotate(旋转) 6大类手势, 同时支持鼠标和触屏.

在线演示

import AnyTouch from "any-touch";
const el &#61; doucument.getElementById("box");
const at &#61; new AnyTouch(el);at.on("pan", ev &#61;> {// 拖拽触发.
});

tap(点击)

用来解决移动端"click的300ms延迟问题", 同时通过设置支持"双击"事件.

press(按)

用来触发自定义菜单.

pan(拖拽)

这应该是组件库中最常用的手势, carousel(轮播) / drawer(抽屉) / scroll(滑动) / tabs(标签页)等都需要"拖拽识别"

swipe(滑)

carousel/tabs的切换下一幅, scroll的快速滑动等.

pinch(捏合) / rotate(旋转)

pinch用来缩放商品图片, rotate一般用在高级定制化功能呢, 比如对图片(商品)刻字后旋转文字.

&#x1f680; 更多说明: https://github.com/any86/any-touch

vue-create-root

&#x1f36d; 不到1kb的小工具, 把vue组件变成this.$xxx这样的命令.

// main.js
Vue.use(createRoot);// xxx.vue
import UCom from &#39;../UCom.vue&#39;;
{mounted(){// 默认组件被插入到尾部this.$createRoot(UCom, {props: {value:&#39;hello vue!&#39;}});// 或者简写为:this.$createRoot(UCom, {value:&#39;hello vue!&#39;});}
}

&#x1f680; 更多说明: https://github.com/any86/vue-create-root

微信群

感谢大家的阅读, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯对微信群的100人限制, 超过100人后必须由我拉进去)



推荐阅读
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
  • 使用 Vuex 管理表单状态:当输入框失去焦点时自动恢复初始值 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 在深入研究 React 项目的过程中,特别是在探索 react-router 源码时,我发现了其中蕴含的中间件概念。这激发了我对中间件的进一步思考与整理。本文将详细探讨 Redux 中间件的原理及其在实际项目中的应用,帮助读者更好地理解和使用这一强大工具。通过具体示例和代码解析,我们将揭示中间件如何提升应用的状态管理和异步操作处理能力。 ... [详细]
  • 在分析Android的Audio系统时,我们对mpAudioPolicy->get_input进行了详细探讨,发现其背后涉及的机制相当复杂。本文将详细介绍这一过程及其背后的实现细节。 ... [详细]
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
  • 单元测试:使用mocha和should.js搭建nodejs的单元测试
    2019独角兽企业重金招聘Python工程师标准BDD测试利器:mochashould.js众所周知对于任何一个项目来说,做好单元测试都是必不可少 ... [详细]
  • PTArchiver工作原理详解与应用分析
    PTArchiver工作原理及其应用分析本文详细解析了PTArchiver的工作机制,探讨了其在数据归档和管理中的应用。PTArchiver通过高效的压缩算法和灵活的存储策略,实现了对大规模数据的高效管理和长期保存。文章还介绍了其在企业级数据备份、历史数据迁移等场景中的实际应用案例,为用户提供了实用的操作建议和技术支持。 ... [详细]
  • 在C#编程中,数值结果的格式化展示是提高代码可读性和用户体验的重要手段。本文探讨了多种格式化方法和技巧,如使用格式说明符、自定义格式字符串等,以实现对数值结果的精确控制。通过实例演示,展示了如何灵活运用这些技术来满足不同的展示需求。 ... [详细]
  • 如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解 ... [详细]
  • 本文详细解析了使用C++实现的键盘输入记录程序的源代码,该程序在Windows应用程序开发中具有很高的实用价值。键盘记录功能不仅在远程控制软件中广泛应用,还为开发者提供了强大的调试和监控工具。通过具体实例,本文深入探讨了C++键盘记录程序的设计与实现,适合需要相关技术的开发者参考。 ... [详细]
  • 如何使用 `org.apache.poi.openxml4j.opc.PackagePart` 类中的 `loadRelationships()` 方法及其代码示例详解 ... [详细]
  • 在关系型数据库中,数据约束是指在向数据表中插入数据时必须遵循的限制条件。在MySQL和MariaDB中,常见的数据约束包括主键约束、唯一键约束、外键约束以及非空约束等。这些约束确保了数据的完整性和一致性,是数据库管理中的重要组成部分。通过合理设置和使用这些约束,可以有效防止数据冗余和错误,提升数据库的可靠性和性能。 ... [详细]
author-avatar
耿世述_511
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有