🚀揭秘vue/react组件库中🤚5个"做者不造的轮子"

🚀 这五个轮子实际上是5个纯js实现的插件, 都很是优秀, 下面一一给你们揭秘.javascript

async-validator(数据验证工具)

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

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…vue

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

moment | day.js(操做时间)

ant design在DatePicker组件中用了moment.git

moment因为历史兼容缘由体积比较大, 如今建议你们用day.js代替他, 二者语法类似.github

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.element-ui

<div class="my-button">按钮</div>
<div class="my-popper">气泡菜单</div>
复制代码

var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var popperInstance = new Popper(reference, popper, {
  // 更多设置
});
复制代码

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

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

// 就一行, 就实现了"textarea随着输入文字换行而变化高度"
autosize(document.querySelector('textarea'));
复制代码

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

基本全部的ui组件库都在用, 让低版本浏览器也支持Resize Observer API, 这样咱们能够放心的监视元素的尺寸变化.微信

import ResizeObserver from 'resize-observer-polyfill';
const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;
        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`);
    }
});
ro.observe(document.body);
复制代码

最后

学习了不少组件库的源码, 基于对写代码的热情, 我用ts写了2个小插件, 抽象了一些组件中重复的代码, 你们看下是否须要.markdown

any-touch

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

在线演示

import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);

at.on("pan", ev => {
  // 拖拽触发.
});
复制代码

tap(点击)

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

press(按)

用来触发自定义菜单.

pan(拖拽)

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

swipe(滑)

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

pinch(捏合) / rotate(旋转)

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

vue-create-root

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

// main.js
Vue.use(createRoot);

// xxx.vue
import UCom from '../UCom.vue';
{
    mounted(){
        // 默认组件被插入到<body>尾部
        this.$createRoot(UCom, {props: {value:'hello vue!'}});
        // 或者简写为:
        this.$createRoot(UCom, {value:'hello vue!'});
    }
}
复制代码

微信群

感谢你们的阅读, 若有疑问能够加我微信, 我拉你进入微信群(因为腾讯对微信群的100人限制, 超过100人后必须由我拉进去)