[转] Nodejs相关的JavaScript APIs you’ve never heard of (and some you have)

[转] Nodejs相关的JavaScript APIs you’ve never heard of (and some you have)

分享自玉伯也叫射雕的微博, 幻灯片在 SlideShare 上, 估计要翻下… 我在 VPS 上放了一个备份, pptx 格式的… 幻灯片里讲了许多很有意思的 API, 比如:

    child= list.lastElementChild;  
    child = child.nextElementSibling;

menu.insertAdjacentHTML("beforebegin",
    "<p>Hello world!</p>");

xhr.upload.onprogress = function(event) {
    var percentage = event.loaded/event.total * 100;
    updateProgress(percentage);

if (element.matchesSelector(“body .bar”)) {
    //do something
}

4 回复

[转] Node.js 相关的 JavaScript APIs 你从未听说过的（还有一些你可能知道）

在这个帖子中，我们将探讨一些 Node.js 中不太为人所知的 JavaScript APIs，以及一些你可能已经熟悉的 API。这些 API 可以帮助你在编写 Node.js 应用程序时更加高效。

1. lastElementChild 和 nextElementSibling

这两个属性用于操作 DOM 元素。虽然它们主要用于浏览器环境中的 DOM 操作，但在某些情况下，你可能会在 Node.js 中使用类似的概念来处理数据结构。

// 获取列表中的最后一个元素子节点
const list = document.getElementById('myList');
const lastChild = list.lastElementChild;

// 获取下一个兄弟元素节点
const nextSibling = lastChild.nextElementSibling;

2. insertAdjacentHTML

这个方法允许你在指定的位置插入 HTML 字符串。同样，它主要在浏览器环境中使用，但可以类比到其他需要动态插入内容的场景。

const menu = document.getElementById('menu');
menu.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");

3. upload.onprogress

这是一个用于处理文件上传进度的事件处理器。它可以在浏览器中用于监控文件上传进度，但在 Node.js 中，你可以使用类似的逻辑来监控文件读取或写入的进度。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(event) {
    const percentage = (event.loaded / event.total) * 100;
    console.log(`Upload progress: ${percentage.toFixed(2)}%`);
};
xhr.send(file);

4. matchesSelector

这个方法用于检查一个元素是否匹配给定的选择器。在浏览器环境中，你可以直接使用 matches 方法。在 Node.js 中，你可以使用类似的方法来检查对象是否符合特定条件。

const element = document.querySelector('.bar');
if (element.matches('.bar')) {
    console.log('Element matches the selector!');
}

以上是一些有趣的 JavaScript APIs 的介绍。希望这些示例能够帮助你更好地理解和使用这些 API。如果你对更多高级功能感兴趣，可以参考相关文档或查看上述 SlideShare 链接中的幻灯片。


东西看了一下，还不错哦，mark下

有点意思

这个帖子主要介绍了Node.js中一些不常见的JavaScript API，同时也提到了一些我们比较熟悉的API。以下是一些API的示例及其简要解释：

1. insertAdjacentHTML

insertAdjacentHTML 是一个用于在指定位置插入HTML字符串的方法。

示例代码:

const menu = document.getElementById('menu');
menu.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");

解释: 在 menu 元素之前插入一个新的 <p> 元素。

2. matchesSelector

matchesSelector 用于检查元素是否匹配给定的选择器。

示例代码:

const element = document.querySelector('.bar');
if (element.matchesSelector('body .bar')) {
    console.log('Matched!');
}

解释: 检查元素是否是 body 中 .bar 类的一部分。

3. onprogress

onprogress 事件处理器用于处理 XMLHttpRequest 的上传进度事件。

示例代码:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        const percentage = event.loaded / event.total * 100;
        console.log(`Upload progress: ${percentage.toFixed(2)}%`);
    }
};
xhr.send(formData);

解释: 当进行文件上传时，会定期更新并输出当前的上传进度百分比。

4. lastElementChild 和 nextElementSibling

这些方法用于操作DOM节点。

示例代码:

const list = document.querySelector('#list');
const child = list.lastElementChild;
console.log(child); // 输出最后一个子元素

const nextSibling = child.nextElementSibling;
console.log(nextSibling); // 输出下一个兄弟元素

解释: 获取列表中的最后一个子元素及其下一个兄弟元素。

这些API虽然可能不是每天都用到，但它们在某些特定场景下非常有用。

回到顶部