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

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

async-validator(数据验证工具)

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

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


github.com/yiminghe/as…

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

moment | day.js(操作时间)

ant design在DatePicker组件中用了moment.

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

dayjs(&＃39;2018-08-08&＃39;) // 解析字符串dayjs().format(&＃39;{YYYY} MM-DDTHH:mm:ss SSS [Z] A&＃39;) // 格式化日期dayjs().add(1, &＃39;year&＃39;) // 当前年份增加一年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人后必须由我拉进去)