使用Vue观察者实现一个简单异步无限滚动效果
无限滚动(Infinite Scroll)是一种很常见的用户体验模式,它建议用户在Web页面或应用程序加载显示很少的内容。当用户开始向下滚动页面时,会加载更多内容。这些内容是通过向负责提供内容的服务器发出请求来异步加载的。在这篇文章中,我将讨论JavaScript的异步操作以及Vue如何实现无限滚动效果。在这个过程中,我们将看到一个使用无限增发动的简单页面。
无限滚动(Infinite Scroll)是一种很常见的用户体验模式,它建议用户在Web页面或应用程序加载显示很少的内容。当用户开始向下滚动页面时,会加载更多内容。这些内容是通过向负责提供内容的服务器发出请求来异步加载的。在这篇文章中,我将讨论JavaScript的异步操作以及Vue如何实现无限滚动效果。在这个过程中,我们将看到一个使用无限增发动的简单页面。
在JavaScript中合并多个对象是一个很常见的事情。但在JavaScript中,到目前为止并没有一种很方便的语法来进行合并。在ES5中,通过使用Lodash的_.extend(target, [sources])
(或者其他选项),在ES2015中引入了Object.assign(target, [sources])
。幸运的是,对象的spread
语法(ECMAScript第3阶段建议)是如何操作对象,提供了一个简短且易于遵循的语法。
在我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章,因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。
当您开始学习JavaScript时,首先需要学习的是数据类型。只要我们讨论Number
、String
、Boolean
和Object
时,一旦涉及到null
和undefined
出现时,作为初学者要理解清楚他们就可能会有点混乱。
在8年前,我刚开始学习JavaScript时,让我觉得有点奇怪的是,undefined
和null
同样代表空值。它们之间是否有明确的不同?它们看起来都定义为“空”,此外,比较null== undefined
的结果是true
。大多数的现代语言如Ruby, Python 或Java只有一个空值(nil
或null
),而这,似乎才是合理的。在JavaScript中,当访问一个尚未初始化的变量或对象属性时,解释器会返回undefined
。
通过上一节的学习,对JavaScript中的DOM有了一定的认识。虽然对DOM中相关的知识点有一定的概念,但还是缺乏对DOM的实际操作。如果你仔细阅读过上一篇文章的话,你应该会发现,当时也提到了一些DOM操作相关的东西,比如,DOM的增、删、改和查等。那么今天我们就来看看这些方面的东西。
DOM是JavaScript中重要部分之一,在DOM中有一个动态集合。这个动态集合包含节点的集合(NodeList
)、元素属性的集合(NamedNodeMap
)和HTML元素的集合(HTMLCollection
)。这三个对象都是类数组(Array-like
),具有像数组一样的特性。更为重要的是,它们都是动态的,是有有生命有呼吸的对象,会实时更新查询DOM结构。今天我们学习的目标就是深究这三个动态集合之间的用法和联系以及区别。
在《DOM的操作》一节中知道querySelectorAll()
和getElementsByTagName()
两个方法都是用来查找DOM元素的。通过上一节的学习,知道querySelectorAll()
方法将获取到NodeList
对象,getElementsByTagName()
方法获取到的是HTMLCollection
对象。虽然他们获取的都是DOM动态集合,但两者还是略有差异的。今天我们就来看这两者之间的区别。
这几天看@Anton Kosykh写的使用ResizeObserver
实现响应式Vue的组件,让我刷新了对响应式组件的认识,也在这里第一次接触到ResizeObserver
这个词。个人有一个习惯,对于任何新东西,我都充满好奇,有一股探知欲,要了解其中的原委。今天这篇文章就是自己对ResizeObserver
的探知。
**防抖(Debounce)和节流(Throttle)**都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。当我们给 DOM 绑定事件的时候,加了防抖和节流的函数变得特别有用。为什么呢?因为我们在事件和函数执行之间加了一个控制层。记住,我们是无法控制 DOM 事件触发频率的。