🚀揭祕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人後必須由我拉進去)