寻求适用于RPi Pico 2项目的jQuery轻量替代方案

我完全懂你的痛点——85k的本地jQuery在Pico的静态服务下加载确实拖慢了页面体验，而且无网环境没法用CDN，还要保证无刷新AJAX控制硬件来避免意外问题。下面是几个针对性的替代方案，按轻量化程度排序：

1. 直接用原生JavaScript（零额外依赖） #

这是最极致的方案，完全不需要任何外部库，利用浏览器原生的fetch API（现在主流浏览器都支持）实现AJAX请求，体积为0，没有额外文件需要存在Pico上。

比如你要发送POST请求控制Pico上的LED：

// 控制LED状态
async function toggleLed(state) {
  try {
    const response = await fetch('/api/toggle-led', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ ledState: state })
    });
    const result = await response.json();
    console.log('LED状态更新:', result);
    // 这里可以直接更新页面UI（比如按钮状态），完全无刷新
  } catch (error) {
    console.error('请求出错:', error);
  }
}

// 调用示例：点亮LED
toggleLed(true);

如果需要兼容更老的浏览器（不过嵌入式场景的浏览器一般都是较新版本），也可以用XMLHttpRequest，代码稍繁琐但同样无额外依赖。

2. 精简版Axios（约4KB minified） #

Axios有迷你构建版本，体积只有jQuery的1/20左右，API和jQuery的$.ajax非常接近，上手成本低，还支持Promise、拦截器等实用功能。

把精简后的axios.min.js存在Pico的静态资源目录（比如/static/js/axios.min.js），然后在HTML里引用：

<script src="/static/js/axios.min.js"></script>

之后就可以用熟悉的语法发送请求：

axios.post('/api/toggle-led', { ledState: true })
  .then(function (response) {
    console.log('操作成功:', response.data);
    // 更新页面UI
  })
  .catch(function (error) {
    console.error('操作失败:', error);
  });

3. Superagent（约7KB minified） #

Superagent是另一个轻量HTTP客户端，API简洁直观，体积也很小，适合嵌入式场景的本地资源加载。同样把它的min文件存在Pico里，引用后使用：

superagent.post('/api/toggle-led')
  .send({ ledState: false })
  .set('Accept', 'application/json')
  .end(function(err, res){
    if (err) {
      console.error(err);
      return;
    }
    console.log('LED已关闭:', res.body);
  });

4. 自定义极简AJAX封装 #

如果觉得上面的库还是有冗余，你可以自己写一个只实现核心需求的AJAX函数，代码仅几十行，体积几百字节：

// 自定义极简AJAX函数
function ajax(options) {
  const xhr = new XMLHttpRequest();
  xhr.open(options.method || 'GET', options.url);
  if (options.headers) {
    Object.keys(options.headers).forEach(key => {
      xhr.setRequestHeader(key, options.headers[key]);
    });
  }
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      options.success(JSON.parse(xhr.responseText));
    } else {
      options.error(xhr.statusText);
    }
  };
  xhr.onerror = function() {
    options.error('请求出错');
  };
  xhr.send(options.data ? JSON.stringify(options.data) : null);
}

// 使用示例
ajax({
  method: 'POST',
  url: '/api/toggle-led',
  headers: { 'Content-Type': 'application/json' },
  data: { ledState: true },
  success: function(data) {
    console.log('操作成功:', data);
  },
  error: function(err) {
    console.error('操作失败:', err);
  }
});

注意事项 #

• 所有这些方案都是浏览器端运行，和Pico的性能无关，只需要把对应的静态文件（如果用库的话）存在Pico的文件系统里，和HTML页面一起通过Pico的HTTP服务提供即可。
• 测试时可以对比加载时间，原生方案肯定是最快的，完全没有额外文件的加载开销。

内容的提问来源于stack exchange，提问作者user1521857