javascrip高级前端开发常用的几个API示例详解

目录
  • MutationObserver
    • API
    • 特点
  • IntersectionObserver
    • API
    • 举个例子
    • 图片懒加载
    • 无限滚动
  • getComputedStyle()
    • API
    • 与style的异同
  • getBoundingClientRect
    • API
    • 应用场景
      • 1、获取 dom 元素相对于网页左上角定位的距离
      • 2、判断元素是否在可视区域内

MutationObserver

MutationObserver 是一个可以监听 DOM 结构变化的接口。

当 DOM 对象树发生任何变动时,MutationObserver 会得到通知。

API

MutationObserver 是一个构造器,接受一个 callback 参数,用来处理节点变化的回调函数,返回两个参数:

mutations:节点变化记录列表(sequence<MutationRecord>)

observer:构造 MutationObserver 对象。

MutationObserver 对象有三个方法,分别如下:

observe:设置观察目标,接受两个参数,target:观察目标,options:通过对象成员来设置观察选项

disconnect:阻止观察者观察任何改变

takeRecords:清空记录队列并返回里面的内容

//选择一个需要观察的节点
var targetNode = document.getElementById('root')
// 设置observer的配置选项
var config = { attributes: true, childList: true, subtree: true }
// 当节点发生变化时的需要执行的函数
var callback = function (mutationsList, observer) {
  for (var mutation of mutationsList) {
    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示例与回调函数相关联
var observer = new MutationObserver(callback)
//使用配置文件对目标节点进行观测
observer.observe(targetNode, config)
// 停止观测
observer.disconnect()

observe 方法中 options 参数有已下几个选项:

childList:设置 true,表示观察目标子节点的变化,比如添加或者删除目标子节点,不包括修改子节点以及子节点后代的变化

attributes:设置 true,表示观察目标属性的改变

characterData:设置 true,表示观察目标数据的改变

subtree:设置为 true,目标以及目标的后代改变都会观察

attributeOldValue:如果属性为 true 或者省略,则相当于设置为 true,表示需要记录改变前的目标属性值,设置了 attributeOldValue 可以省略 attributes 设置

characterDataOldValue:如果 characterData 为 true 或省略,则相当于设置为 true,表示需要记录改变之前的目标数据,设置了 characterDataOldValue 可以省略 characterData 设置

attributeFilter:如果不是所有的属性改变都需要被观察,并且 attributes 设置为 true 或者被忽略,那么设置一个需要观察的属性本地名称(不需要命名空间)的列表

特点

MutationObserver 有以下特点:

  • 它等待所有脚本任务完成后才会运行,即采用异步方式
  • 它把 DOM 变动记录封装成一个数组进行处理,而不是一条条地个别处理 DOM 变动。
  • 它即可以观察发生在 DOM 节点的所有变动,也可以观察某一类变动

当 DOM 发生变动会触发 MutationObserver 事件。但是,它与事件有一个本质不同:事件是同步触发,也就是说 DOM 发生变动立刻会触发相应的事件;MutationObserver 则是异步触发,DOM 发生变动以后,并不会马上触发,而是要等到当前所有 DOM 操作都结束后才触发。

举例来说,如果在文档中连续插入 1000 个段落(p 元素),会连续触发 1000 个插入事件,执行每个事件的回调函数,这很可能造成浏览器的卡顿;而 MutationObserver 完全不同,只在 1000 个段落都插入结束后才会触发,而且只触发一次,这样较少了 DOM 的频繁变动,大大有利于性能。

IntersectionObserver

网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。

传统的实现方法是,监听到 scroll 事件后,调用目标元素的 getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。这种方法的缺点是,由于 scroll 事件密集发生,计算量很大,容易造成性能问题。

目前有一个新的 IntersectionObserver API,可以自动"观察"元素是否可见,Chrome 51+ 已经支持。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"。

API

IntersectionObserver 是浏览器原生提供的构造函数,接受两个参数:callback 是可见性变化时的回调函数,option 是配置对象(该参数可选)。

var io = new IntersectionObserver(callback, option)
// 开始观察
io.observe(document.getElementById('example'))
// 停止观察
io.unobserve(element)
// 关闭观察器
io.disconnect()

如果要观察多个节点,就要多次调用这个方法。

io.observe(elementA)
io.observe(elementB)

目标元素的可见性变化时,就会调用观察器的回调函数 callback。callback 一般会触发两次。一次是目标元素刚刚进入视口(开始可见),另一次是完全离开视口(开始不可见)。

var io = new IntersectionObserver((entries) => {
  console.log(entries)
})

callback 函数的参数(entries)是一个数组,每个成员都是一个 IntersectionObserverEntry 对象。举例来说,如果同时有两个被观察的对象的可见性发生变化,entries 数组就会有两个成员。

time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒

target:被观察的目标元素,是一个 DOM 节点对象

isIntersecting: 目标是否可见

rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回 null

boundingClientRect:目标元素的矩形区域的信息

intersectionRect:目标元素与视口(或根元素)的交叉区域的信息

intersectionRatio:目标元素的可见比例,即 intersectionRect 占 boundingClientRect 的比例,完全可见时为 1,完全不可见时小于等于 0

举个例子

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #div1 {
        position: sticky;
        top: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: black;
        color: #ffffff;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="div1">首页</div>
    <div style="height: 1000px;"></div>
    <div id="div2" style="height: 100px; background: red;"></div>
    <script>
      var div2 = document.getElementById('div2')
      let observer = new IntersectionObserver(
        function (entries) {
          entries.forEach(function (element, index) {
            console.log(element)
            if (element.isIntersecting) {
              div1.innerText = '我出来了'
            } else {
              div1.innerText = '首页'
            }
          })
        },
        {
          root: null,
          threshold: [0, 1]
        }
      )
      observer.observe(div2)
    </script>
  </body>
</html>

相比于 getBoundingClientRect,它的优点是不会引起重绘回流。

图片懒加载

图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的。这样可以节省带宽,提高网页性能。传统的突破懒加载是通过监听 scroll 事件实现的,但是 scroll 事件会在很短的时间内触发很多次,严重影响页面性能。为提高页面性能,我们可以使用 IntersectionObserver 来实现图片懒加载。

const imgs = document.querySelectorAll('img[data-src]')
const config = {
  rootMargin: '0px',
  threshold: 0
}
let observer = new IntersectionObserver((entries, self) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let img = entry.target
      let src = img.dataset.src
      if (src) {
        img.src = src
        img.removeAttribute('data-src')
      }
      // 解除观察
      self.unobserve(entry.target)
    }
  })
}, config)
imgs.forEach((image) => {
  observer.observe(image)
})

无限滚动

无限滚动(infinite scroll)的实现也很简单。

var intersectionObserver = new IntersectionObserver(function (entries) {
  // 如果不可见,就返回
  if (entries[0].intersectionRatio <= 0) return
  loadItems(10)
  console.log('Loaded new items')
})

// 开始观察
intersectionObserver.observe(document.querySelector('.scrollerFooter'))

getComputedStyle()

DOM2 Style 在 document.defaultView 上增加了 getComputedStyle()方法,该方法返回一个 CSSStyleDeclaration
对象(与 style 属性的类型一样),包含元素的计算样式。

API

document.defaultView.getComputedStyle(element[,pseudo-element])
// or
window.getComputedStyle(element[,pseudo-element])

这个方法接收两个参数:要取得计算样式的元素和伪元素字符串(如":after")。如果不需要查询伪元素,则第二个参数可以传 null。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #myDiv {
        background-color: blue;
        width: 100px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
  </body>
  <script>
    function getStyleByAttr(obj, name) {
      return window.getComputedStyle ? window.getComputedStyle(obj, null)[name] : obj.currentStyle[name]
    }
    let node = document.getElementById('myDiv')
    console.log(getStyleByAttr(node, 'backgroundColor'))
    console.log(getStyleByAttr(node, 'width'))
    console.log(getStyleByAttr(node, 'height'))
    console.log(getStyleByAttr(node, 'border'))
  </script>
</html>

与style的异同

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象。而不同点就是:

element.style 读取的只是元素的内联样式,即写在元素的 style 属性上的样式;而 getComputedStyle 读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式。

element.style 既支持读也支持写,我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式,通过 element.style 修改样式

getBoundingClientRect

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

API

let DOMRect = object.getBoundingClientRect()

它的返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合,就是该元素的 CSS 边框大小。

返回的结果是包含完整元素的最小矩形,并且拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

应用场景

1、获取 dom 元素相对于网页左上角定位的距离

以前的写法是通过 offsetParent 找到元素到定位父级元素,直至递归到顶级元素 body 或 html。

// 获取dom元素相对于网页左上角定位的距离
function offset(el) {
  var top = 0
  var left = 0
  do {
    top += el.offsetTop
    left += el.offsetLeft
  } while ((el = el.offsetParent)) // 存在兼容性问题,需要兼容
  return {
    top: top,
    left: left
  }
}
var odiv = document.getElementsByClassName('markdown-body')
offset(a[0]) // {top: 271, left: 136}

现在根据 getBoundingClientRect 这个 api,可以写成这样:

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollTop

2、判断元素是否在可视区域内

function isElView(el) {
  var top = el.getBoundingClientRect().top // 元素顶端到可见区域顶端的距离
  var bottom = el.getBoundingClientRect().bottom // 元素底部端到可见区域顶端的距离
  var se = document.documentElement.clientHeight // 浏览器可见区域高度。
  if (top < se && bottom > 0) {
    return true
  } else if (top >= se || bottom <= 0) {
    // 不可见
  }
  return false
}

以上就是javascrip高级前端开发常用的几个API示例详解的详细内容,更多关于高级前端API示例的资料请关注我们其它相关文章!

时间: 2021-11-24

带有定位当前位置的百度地图前端web api实例代码

废话不多说,直接给大家贴代码了,具体代码如下所示, 关键代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content=

JS使用百度地图API自动获取地址和经纬度操作示例

本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作.分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求. 故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度: 1.HTML代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

12个常用前端UI框架集合汇总

1.bootstrap Bootstrap 是Twitter推出的一个用于前端开发的,一个用于 HTML.CSS 和 JS 开发的开源工具包,是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 官网:https://v4.bootcss.com/ 文档:https://v4.bootcss.com/docs/getting-started/introduction/ 2.Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 H

Vue Element前端应用开发之前端API接口的封装

1.ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型. 启动Host的项目,我们可以看到Swagger的管理界面如下所示. 上图就是ABP后端框架的API接口的查看页面,从上图可以看到,一般业务对象,都有Get.GetAll.Create.Update.Delete等常见接口,由于这些接口是给前端进行调用的. Vue + Elemen

vue实现的请求服务器端API接口示例

本文实例讲述了vue实现的请求服务器端API接口.分享给大家供大家参考,具体如下: import axios from 'axios' import router from '@/router' axios.defaults.timeout = 3000 axios.defaults.baseURL = '' axios.interceptors.request.use( config => { // const token = getCookie('名称') config.data = con

VUE使用axios调用后台API接口的方法

引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方便与第三方库或既有项目整合.我们都知道VUE更多是注重前段用户界面的渲染合操作,但是如果想到实现前后端之间的交互调用后台API,就需要借助其他组件,如今天要讲到的Axios,下边就重点讲解axios在vue中的使用. Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,

PHP实现的注册,登录及查询用户资料功能API接口示例

本文实例讲述了PHP实现的注册,登录及查询用户资料功能API接口.分享给大家供大家参考,具体如下: 服务端 <?php require 'conn.php'; header('Content-Type:text/html;charset=utf-8'); $action = $_GET['action']; switch ($action) { //注册会员 case"adduserinfo"; $username = lib_replace_end_tag(trim($_GET

vue.js实现请求数据的方法示例

vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function() { this.$nextTick(function () { this.$http.jsonp('http://***.com').then(function(res) { console.log(res.data) this.gridData = res.data; }) }) }, })

PHP开发api接口安全验证的实例讲解

php的api接口 在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道,请求的来源是什么,有可能是别人非法调用我们的接口,获取数据,因此就要使用安全验证. 验证原理 示意图 原理 从图中可以看得很清楚,前台想要调用接口,需要使用几个参数生成签名. 时间戳:当前时间 随机数:随机生成的随机数 口令:前后台开发时,一个双方都知道的标识,相当于暗号 算法规则:商定好的运算规

PHP语言对接抖音快手小红书视频/图片去水印API接口源码

以下为PHP语言调用去水印接口的示例,分别展示GET请求方式和POST请求方式的调用方式.示例代码中用到的userId和secretKey请前往开发者接口管理中心获取. 接口文档:https://jx.henghengmao.com/page/apidoc GET请求方式调用接口示例: $url = 'https://v.douyin.com/JjEFdHT/'; //请把此处的userId和secretKey换成你自己的 这是GET请求方式 $api = 'https://api.henghe

PHP服务器端API原理及示例讲解(接口开发)

相信大家都做过PHP请求API接口获取数据,比如淘宝API,微信公众平台,天气查询,快递查询等,有的需要参照接口文档根据签名算法构造sign(签名),或者设置token,然后通过curl发送POST请求带上参数,获得返回数据,一般是json或者xml格式. 但是现在的情况反过来了,我们要开发PHP服务器端的API接口,也就是别人请求我们,我们验证请求合法性,并查询数据返回. 这种情况其实在手机app开发中用到,手机APP应用往往需要请求PHP接口获取数据,不过这个请求一般是不用经过验证的,根据不

PHP调用API接口实现天气查询功能的示例

天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气情况 2.请求URL地址 http://route.showapi.com/9-2 3.接口参数说明: 一.系统级参数(所有接入点都需要的参数): 二.应用级参数(每个接入点有自己的参数): 4.返回参数 以JSON格式返回结果 1)系统级参数(所有接入点都会返回的参数) 2)应用级参数(系统级输出

用Java实现全国天气预报的api接口调用示例

step1:选择本文所示例的接口"全国天气预报接口" 聚合数据url:http://www.juhe.cn/docs/api/id/39/aid/87 step2:每个接口都需要传入一个参数key,相当于用户的令牌,所以第一步你需要申请一个key. step3:学过java的同学们都知道,当我们对一个类或者方法不明白其意图和思想时,我们可以去查看文档,这里也不例外,而且对于英文不是特别好的同学来说很幸运的是,聚合网站上的文档都是中文版本的,比起阅读java源码里的英文文档应该轻松很多.

vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关. 1. 在axiosconfig目录下的axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.