你有自己封装过哪些基础类库？

自定义基础类库的封装经验

在前端开发中，封装基础类库可以提高开发效率和代码复用率。我曾经封装过几个基础类库，以下是几个比较有代表性的例子：

1. DOM 操作库

为了简化对 DOM 的操作，我封装了一套简单的 DOM 操作库，主要功能包括选择元素、添加事件、设置样式等。

// dom.js
const Dom = {
  select: function(selector) {
    return document.querySelector(selector);
  },
  on: function(element, event, handler) {
    element.addEventListener(event, handler);
  },
  css: function(element, styles) {
    Object.keys(styles).forEach(key => {
      element.style[key] = styles[key];
    });
  },
};

// 使用示例
const box = Dom.select('.box');
Dom.on(box, 'click', () => {
  Dom.css(box, { backgroundColor: 'red' });
});

2. Ajax 请求库

为了方便进行 AJAX 请求，我封装了一个简单的 AJAX 库，支持 GET 和 POST 请求。

// ajax.js
const Ajax = {
  get: function(url) {
    return fetch(url).then(response => response.json());
  },
  post: function(url, data) {
    return fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    }).then(response => response.json());
  },
};

// 使用示例
Ajax.get('/api/data').then(data => {
  console.log(data);
});

Ajax.post('/api/data', { name: 'John' }).then(response => {
  console.log(response);
});

3. 表单验证库

我还封装了一个简单的表单验证库，提供常用的验证方法，如必填、邮箱格式、手机号码等。

// validator.js
const Validator = {
  isRequired: function(value) {
    return value.trim() !== '';
  },
  isEmail: function(value) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(value);
  },
  isPhone: function(value) {
    const regex = /^\d{10}$/;
    return regex.test(value);
  },
};

// 使用示例
const emailInput = document.querySelector('#email');
if (!Validator.isEmail(emailInput.value)) {
  console.error('邮箱格式不正确');
}

4. 本地存储库

为了简化对 localStorage 的操作，我封装了一个简单的本地存储库，支持获取、设置和删除数据。

// storage.js
const Storage = {
  set: function(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  get: function(key) {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : null;
  },
  remove: function(key) {
    localStorage.removeItem(key);
  },
};

// 使用示例
Storage.set('user', { name: 'John' });
console.log(Storage.get('user'));
Storage.remove('user');

5. 事件总线

为了在组件之间进行通信，我封装了一个简单的事件总线，支持事件的发布和订阅。

// eventBus.js
const EventBus = {
  events: {},
  on: function(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  },
  emit: function(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
  },
};

// 使用示例
EventBus.on('message', data => {
  console.log('Received:', data);
});
EventBus.emit('message', 'Hello, World!');

总结

通过封装这些基础类库，可以有效减少重复代码，提高开发效率。在日常开发中，遇到常见的需求时，可以考虑抽象并封装成类库，以便在不同项目中复用。同时，封装的类库应保持简单易用，适当的文档和示例可以帮助其他开发者快速上手。封装的过程也是对自身技术能力的提升，建议大家在实践中不断总结和优化。