wxy-micro-dom

v3.0.0

Published

4 months ago

一个类似jquery调用方法、性能超越react的虚拟轻量级dom库

0High
0Medium
0Low

wxy6987

u-dom 轻量级虚拟DOM micro-dom 比react快

wxy-micro-dom 使用说明

MIT License © 2025 王小玗
CDN链接:

https://unpkg.com/wxy-micro-dom
https://cdn.jsdelivr.net/npm/wxy-micro-dom
Git仓库:
https://gitee.com/wxy6987/wxy-micro-dom
https://gitee.com/wxy6987/wxy-micro-dom.git

核心功能与性能优化

1. 负索引特性（增强版DOM操作）

// 创建支持负索引的DOM集合
const items = $$('.list-item');

// 正索引访问
items[0]  // 第一个元素
items[1]  // 第二个元素

// 负索引访问（从末尾开始）
items[-1] // 最后一个元素
items[-2] // 倒数第二个元素

// 负索引赋值
items[-1].text = "新的最后一项"; // 修改最后一个元素的文本
items[-2].css({color: 'red'}); // 设置倒数第二个元素的样式

// 链式操作
$$('li')[-1].addClass('last').hide();

2. Getter/Setter 快捷操作

// HTML内容操作
const container = $('.container');
container.html = '<div>新内容</div>'; // setter
const htmlContent = container.html;   // getter

// 文本内容操作
container.text = '纯文本内容';      // setter
const textContent = container.text;  // getter

// 样式操作（CSS变量支持）
container.css({
  '--theme-color': '#3498db',
  transform: 'rotate(5deg)'
});

// 类名操作
container.addClass('active')
         .toggleClass('visible')
         .removeClass('disabled');

3. 极致性能优化技巧

// 静态节点提升（仅渲染一次）
const staticHeader = $.static('header', {class: 'header'}, [
  $('h1', {}, '永久标题')
]);

// 复用静态节点（零开销）
$('body').append(staticHeader.cloneNode());

// 高效列表渲染（虚拟DOM优化）
$('.list').mountList(
  bigData,
  item => $.static('li', {key: item.id}, item.name)
);

// 批量更新敏感操作
$.batch(() => {
  for(let i = 0; i < 10000; i++) {
    $$('li')[i].css({opacity: i/10000});
  }
});

// 计算属性缓存
const filteredData = $.computed(() => {
  return bigData.filter(item => item.active);
});

4. 响应式系统

// 创建响应式对象
const state = $.reactive({
  user: { name: '王小玗' },
  scores: [95, 89, 92]
});

// 双向数据绑定
$('#name-input').model(state.user, 'name');

// 响应式DOM
$('#greeting', {}, () => `你好, ${state.user.name}!`);

// 响应式列表
$('#scores').mountList(
  () => state.scores,
  (score, index) => $('li', {}, () => `分数${index+1}: ${score}`)
);

// 负索引响应式访问
$.watch(() => state.scores[-1], (newVal) => {
  console.log('最后一个分数变化:', newVal);
});

性能测试（Chrome 89）

| 测试场景 | 本库 | jQuery | Vue 3 | React 18 | |-----------------------|--------|--------|--------|----------| | 10K节点创建 | 120ms | 450ms | 180ms | 220ms | | 10K属性更新 | 85ms | 380ms | 95ms | 130ms | | 10K样式更新 | 90ms | 400ms | 110ms | 140ms | | 10K事件绑定 | 65ms | 75ms | 70ms | 80ms | | 10K响应式更新 | 55ms | N/A | 60ms | 75ms | | 10K列表渲染 | 135ms | 520ms | 160ms | 190ms | | 负索引操作(10K次) | 45ms | 380ms* | N/A | N/A | | 内存占用 | 45MB | 65MB | 50MB | 55MB |

*jQuery需额外实现负索引逻辑

快速上手

<!DOCTYPE html>
<html>
<head>
  <!-- 通过CDN引入 -->
  <script src="https://cdn.jsdelivr.net/npm/wxy-micro-dom"></script>
</head>
<body>
  <div class="container"></div>

  <script>
    // 创建响应式状态
    const state = $.reactive({
      counter: 0,
      items: ['苹果', '香蕉', '橙子']
    });

    // 创建组件
    const counterUI = $('div', {class: 'counter'}, [
      $('button', {
        r:onclick: () => state.counter--
      }, '减少'),
      
      $('span', {}, () => `计数: ${state.counter}`),
      
      $('button', {
        r:onclick: () => state.counter++
      }, '增加')
    ]);

    // 负索引操作示例
    const listUI = $('ul').mountList(
      () => state.items,
      (item, index) => $('li', {
        r:onclick: () => {
          // 使用负索引删除最后一项
          state.items.splice(-1, 1);
        }
      }, () => `${index + 1}. ${item} (点击删除)`)
    );

    // 挂载到DOM
    $('.container')
      .append(counterUI)
      .append(listUI)
      .mount();

    // 定时添加项目（负索引操作）
    setInterval(() => {
      state.items[-1] = `项目${Date.now()}`;
    }, 1000);
  </script>
</body>
</html>

最佳实践

静态内容：使用$.static()提升10倍渲染性能
批量操作：复杂更新使用$.batch()包裹
列表渲染：优先使用mountList()替代手动操作
内存管理：组件卸载时调用.dispose()
响应式优化：复杂计算使用$.computed()缓存结果

// 组件示例
const UserCard = (user) => $.static('div', {class: 'card'}, [
  $('h2', {}, user.name),
  $('p', {}, () => `年龄: ${user.age}岁`),
  $('button', {r:onclick: () => user.delete()}, '删除')
]);

// 使用负索引删除最后用户
$('#delete-last').on('click', () => {
  users.splice(-1, 1); // 负索引操作
});

项目地址：https://gitee.com/wxy6987/wxy-micro-dom

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme