浏览器的 5 种观察器
前言“图片懒加载”,这个词语想必大家再熟悉不过了。传统的实现方法是,监听scroll事件,获取img元素相对于视口的顶点位置el.getBoundingClientRect().top,只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域,当图片进入可视区域时再去加载图片资源。
这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题。
目前浏览器API中的 IntersectionObserver 交叉观察器,可自动"观察"目标元素与根元素的交叉区域的变化,以此判断元素是否可见。利用这个方法,在观察到元素可见时,再去加载图片资源。这样“图片懒加载”实现起来就很容易了。
当然浏览器的观察器,不仅IntersectionObserver这一种。下面我们依次介绍下浏览器5种观察器的基本用法,以及它们的应用。
首先来看一下,什么是浏览器的观察器?
一、什么是浏览器的观察器?针对一些不是由用户直接触发的事件,比如DOM元素从不可见到可见、DOM大小、属性的改变和子节点个数的修改等,浏览器提供特定的api去监控这些变化,这些api就是浏览器的观察器 ...
详解 package.json 和 package-lock.json
简介说到前端开发,就一定离不开npm,作为前端包管理的老大,npm是我们必须知道的一个东西。
虽然每天都用npm安装包,但是你们对package.json和package-lock.json这两个文件又了解多少呢?今天笔者就来详细分析下这两个文件,希望能对大家有所帮助。
在说 package.json和package-lock.json之前我们先来说说 npm 安装包都有哪些方法。
package.json和package-lock.json生成方式package.json不会自动生成,需要我们使用命令创建。package-lock.json是自动生成的,我们使用 npm install 安装包后就会自动生成。
下面我们介绍下怎么创建package.json。
npm 为我们提供了创建 package.json 文件的命令 npm init,执行该命令会问几个基本问题,如包名称、版本号、作者信息、入口文件、仓库地址、关键字、描述、许可协议等,多数问题已经提供了默认值,你可以在问题后敲回车接受默认值。
基本问题问完之后 npm 会在生成文件之前把 package.json 文件内容打出来 ...
npm link 本地包调试
介绍根据文档介绍,包的链接分为两步。
第一步在一个包文件夹内执行 npm link 将在全局文件 {prefix}/lib/node_modules/ 内,创建一个符号链接(symlink),这个链接指向 npm link 命令执行的地方。
第二步到其它目录下,执行 npm link packageName 命令,将会创建一个从全局安装的 packageName 到当前文件内的 node_modules 下的符号链接。
需要注意的的是, packageName 是取自包的 package.json 中 name 字段,不是文件夹名称。
包的名称可能有作用域前缀,如果有, packageName 也要对应加上。
实践基于文档,结合实际的操作,对照看下产生的效果。
运行环境
项目是基于 webpack 简单配置,本地运行的 server 。
node 使用 nvm 管理的。
项目已引用了包 ...