用于现代JavaScript的Observer API

更新日期: 2020-10-22阅读: 1.6k标签: api

Observer api(观察者API)释放了Web隐藏的超能力,以创建真正的响应式体验,从懒加载关键内容到非侵入式性能监控。

在检测变化方面非常方便,可以用来创建响应式应用。

有四种不同类型的观察者可以观察不同的东西——从dom浏览器性能。


MutationObserver

MutationObserver观察DOM树,监听DOM的变化。

// 选择要观察突变的节点
const targetNode = document.getElementById('element');

// 观察者的选项(观察哪些突变)
const config = {
  attributes: true,
  childList: true,
  subtree: true,
};

// 创建一个观察者实例,链接到一个回调,以便在观察到突变时执行。
const observer = new MutationObserver((mutations, observer) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  });
});

// 开始观察目标节点的配置突变情况
observer.observe(targetNode, config);

// 之后,你可以停止观察
observer.disconnect();

当一个元素的属性、文本或内容发生变化时,我们会得到通知,同时也会监控子节点是否被添加或删除。

这对于调整DOM中元素的大小以及重置DOM值特别有用。


IntersectionObserver

IntersectionObserver观察一个DOM元素的可见性,监听其位置的变化。

// 选择要观察突变的节点
const targetNode = document.getElementById('element');

// 观察者的选项(观察哪些突变)
const config = {
  rootMargin: '-100% 0px 0px 0px',
};

// 创建一个观察者实例,链接到一个回调,以便在观察到突变时执行。
const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Observing.');

      // 之后,你可以停止观察
      observer.unobserve(entry.target);
    }
  });
});

// 开始观察
intersectionObserver.observe(targetNode, config);

这在基于目标元素的可见性和位置的懒惰加载和动画内容方面非常有用。


ResizeObserver

ResizeObserver观察元素的内容或边框,监听元素及其子元素的变化。

// 选择要观察突变的节点
const targetNode = document.getElementById('element');

const resizeObserver = new ResizeObserver((entries, observer) => {
  entries.forEach(entry => {
    console.log(`Element size: ${entry.width}px x ${entry.height}px`);
    console.log(`Element padding: ${entry.top}px ; ${entry.left}px`);

    // 之后,你可以停止观察
    observer.unobserve(entry.target);
  });
});

// 开始观察
resizeObserver.observe(targetNode);

创建基于输入或触发器包装的动态内容时,此观察者非常重要。


PerformanceObserver

PerformanceObserver观察性能测量事件,监听新的性能条目。

// 观察者的选项(观察哪些突变)
const config = {
  entryTypes: ['resource', 'mark', 'measure']
};

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    // 在控制台上显示每个报告的测量
    console.log(
      `Name: ${entry.name}`,
      `Type: ${entry.entryType}`,
      `Start: ${entry.startTime}`,
      `Duration: ${entry.duration}`,
    );
  });
});

// 开始观察
observer.observe(config);
performance.mark('registered-observer');

这对于接收性能通知很有用,可以在空闲时间运行,而不与关键的渲染工作竞争。

原文:https://dev.to/codyjasonbennett
作者:Cody Bennett


链接: https://fly63.com/article/detial/9759

浏览器中的图像识别 API

在 Native 开发中,Android 和 IOS 平台都在系统层面直接提供给了应用开发识别图像的一些能力,比如对于二维码/条形码的识别,Android 可以使用 barcode API 、 iOS 可以使用 CIQRCodeFeature API 。

JavaScript的API设计原则

Js的API设计原则总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。

适合写api接口文档的管理工具有哪些?

现在越来越流行前后端分离开发,使用ajax交互。所以api接口文档就变的十分有意义了,目前市场有哪些比较优秀的接口文档管理工具呢?比如:MinDoc,eoLinker,apizza,RAML,Swagger等等

前后端分离,如何防止api接口被恶意调用或攻击

无论网站,还是App目前基本都是基于api接口模式的开发,那么api的安全就尤为重要了。目前攻击最常见的就是“短信轰炸机”,由于短信接口验证是App,网站检验用户手机号最真实的途径,使用短信验证码在提供便利的同时,也成了呗恶意攻击的对象,那么如何才能防止被恶意调用呢?

JSON API免费接口_ 免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

整理提供最新的各种免费JSON接口,其中有部分需要用JSONP调用。方面前端同学的学习或在网站中的使用,包括:免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

什么是RESTful API?

要弄清楚什么是RESTful API,首先要弄清楚什么是REST。REST -- REpresentational State Transfer,英语的直译就是“表现层状态转移”。如果看这个概念,估计没几个人能明白是什么意思。

认识 Fetch API

Fetch API 已经作为现代浏览器中异步网络请求的标准方法,其使用 Promise 作为基本构造要素。Fetch 在主流浏览器中都有很好的支持,除了IE。

用一个通俗的例子讲清楚API

随着移动互联网的发展, 基于互联网的应用正变得越来越普及,在这个过程中,更多的平台将自身的资源开放给开发者来调用。对外提供的API 调用使得平台之间的内容关联性更强,同时这些开放的平台也为用户、开发者和中小网站带来了更大的价值。

docker提供api访问

环境centos,添加deamon.json后,dockerd命令可以启动docker,这时请求 127.0.0.1:2375 可以正常访问,使用systemctl无法启动docker的情况.无法启动docker:查看当前的docker配置

构建API的最佳编程语言是什么?

你是否正在设计第一个Web应用程序?也许你过去已经建立了一些,但是目前也正在寻找语言的变化以提高你的技能,或尝试新的东西。有了所有信息,就很难决定为下一个产品或项目选择哪种编程语言。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!