elementUI源码学习

源码目录

• bulid 打包相关
• examples 实例
• packages 组件
• src 辅助组件相关通用
• test 测试
• types ts相关类型定义

package.json

async-validator

validate form asynchronous
表单异步效验的库

//实例
import Schema from 'async-validator';
const descriptor = {
  name(rule, value, callback, source, options) {
    const errors = [];
    if (!/^[a-z0-9]+$/.test(value)) {
      errors.push(new Error(
        util.format('%s must be lowercase alphanumeric characters', rule.field),
      ));
    }
    return errors;
  },
};
const validator = new Schema(descriptor);
validator.validate({ name: 'Firstname' }, (errors, fields) => {
  if (errors) {
    return handleErrors(errors, fields);
  }
  // validation passed
});

deepmerge

A library for deep (recursive) merging of Javascript objects
深度合并两个对象

normalize-wheel

Mouse wheel normalization across multiple multiple browsers.

import normalizeWheel from 'normalize-wheel';

document.addEventListener('mousewheel', function (event) {
    const normalized = normalizeWheel(event);

    console.log(normalized.pixelX, normalized.pixelY);
});

resize-observer-polyfill

A polyfill for the 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);

throttle-debounce

Throttle and debounce functions.

transliteration

UTF-8 to ASCII transliteration / slugify module for node.js, browser, Web Worker, React Native, Electron and CLI.
翻译

slugify('你好，世界');
// ni-hao-shi-jie
slugify('你好，世界', { lowercase: false, separator: '_' });
// Ni_Hao_Shi_Jie
slugify('你好，世界', {
  replace: { 你好: 'Hello', 世界: 'world' },
  separator: '_',
});
// hello_world
slugify('你好，世界', {
  replace: [
    ['你好', 'Hello'],
    ['世界', 'world'],
  ],
  separator: '_',
}); // replace option in array form)
// hello_world
slugify('你好，世界', { ignore: ['你好'] });
// 你好shi-jie

uppercamelcase

Convert a dash/dot/underscore/space separated string to UpperCamelCase: foo-bar → FooBar

const upperCamelCase = require('uppercamelcase');

upperCamelCase('foo-bar');
//=> FooBar

upperCamelCase('foo_bar');
//=> FooBar

upperCamelCase('Foo-Bar');
//=> FooBar

upperCamelCase('--foo.bar');
//=> FooBar

upperCamelCase('__foo__bar__');
//=> FooBar

upperCamelCase('foo bar');
//=> FooBar

console.log(process.argv[3]);
//=> --foo-bar
upperCamelCase(process.argv[3]);
//=> FooBar

upperCamelCase('foo', 'bar');
//=> 'FooBar'

upperCamelCase('__foo__', '--bar');
//=> 'FooBar'

sinon

Test spies, stubs and mocks for JavaScript.

sinon-chai

Extends Chai with assertions for the Sinon.JS mocking framework.

babel-helper-vue-jsx-merge-props

babel helper for vue jsx spread

uglifyjs-webpack-plugin

This plugin uses uglify-js to minify your JavaScript.
压缩优化js

src

自定义指令

• mousewheel.js

结合 normalize-wheel 库，给table添加鼠标滚轮事件监听

• repeat-click.js

防止重复点击

mousedown的时候，记录当前时间，清除上一次的定时任务，设置下一个定时任务（100ms后，执行相对应的工作）。
mouseup的时候，当mousedown和mouseup的时间小于100ms的时候，执行任务【确保普通单次点击生效】；最后清除定时任务。

if (e.button !== 0) return; //鼠标左键点击才会生效

混入

• emitter

向上级（dispatch）或者下级（broadcast）广播事件

• focus

提供一个focus方法：this.$refs[ref].focus()

• locale

把 element-ui/src/locale的t方法映射过来，文本替换功能

• migrating

用于开发环境下提示一些迁移或者即将修改的属性和方法的

utils

• clickoutside

定义一个指令，用于点击元素外面才会触发的事件
设置并操作一个全局变量nodeList来收集这类的node，document绑定mousedown和mouseup触发事件

其他

后续慢慢补充中。。。

官网

github:elementUI