在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。

在这篇文章中，将使用三角函数的基本概念，重新创建一个更平滑的Loading效果。我知道这听起来很奇怪，但请相信我，这里一定会很有趣。你会惊讶地发现，要编写的代码很少。当然，你可能会担心三角函数相关的知识，事实上是你不需要知道三角学或数学你能理解这篇文章。我将会解释这里的每个圆相关的事情。

虽然我们通常知道在应用程序中构建大多数视图（View）时需要哪些组件（Component），但很多时候我们并不知道这些组件在运行时是什么。这意味着我们需要基于应用程序状态、用户首选项或API的响应来构建一个页面。一个常见的情况是构建动态表单，其中需要整清楚的是：组件是由JSON对象配置的，还是基于用户的答案而更改的字段来构建。所有现代JavaScript框架（比如我们熟悉的Vue、React等）都有处理动态组件的方法。这篇文章将向您展示如何在Vue中实现它。JavaScript为上述场景提供了一个非常优雅和简单的解决方案。

观察者（Observer）是一个观察或注意事物的程序。观察者可以观察浏览器中发生的某些活动并做出相应的响应。观察者类似于狗，观察某些活动，并提醒我们发生了一些不寻常的事情。一旦我们为某些活动获取到狗发出的警告时，我们有责任采取相应的行动。现代浏览器支持的四种不同类型的观察者。

**防抖（Debounce）和节流（Throttle）**都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。当我们给 DOM 绑定事件的时候，加了防抖和节流的函数变得特别有用。为什么呢？因为我们在事件和函数执行之间加了一个控制层。记住，我们是无法控制 DOM 事件触发频率的。

阿里巴巴智能场景事业部（Flab）是一支致力打造未来体验、探索未来科技的前沿团队，Flab技术团队综合利用人工智能、大数据、IoT等技术以及阿里巴巴独有的电商资源为线下新业务场景量身打造更加便利、快捷和科技感的用户产品和服务。这里我们广泛尝试、深入探索，不断追求技术与业务的最佳结合点，尝试从不同的维度定义未来生活。Flab技术团队也是一支快乐与Geek的团队，我们正在寻找同样快乐与Geek的小伙们加入我们！如果你有意向，可以将简历发至：weihua.lwh@alibaba-inc.com （坐标：杭州、北京均有）

这几天看@Anton Kosykh写的使用ResizeObserver实现响应式Vue的组件，让我刷新了对响应式组件的认识，也在这里第一次接触到ResizeObserver这个词。个人有一个习惯，对于任何新东西，我都充满好奇，有一股探知欲，要了解其中的原委。今天这篇文章就是自己对ResizeObserver的探知。

在《DOM的操作》一节中知道querySelectorAll()和getElementsByTagName()两个方法都是用来查找DOM元素的。通过上一节的学习，知道querySelectorAll()方法将获取到NodeList对象，getElementsByTagName()方法获取到的是HTMLCollection对象。虽然他们获取的都是DOM动态集合，但两者还是略有差异的。今天我们就来看这两者之间的区别。

DOM是JavaScript中重要部分之一，在DOM中有一个动态集合。这个动态集合包含节点的集合（NodeList）、元素属性的集合（NamedNodeMap）和HTML元素的集合（HTMLCollection）。这三个对象都是类数组（Array-like），具有像数组一样的特性。更为重要的是，它们都是动态的，是有有生命有呼吸的对象，会实时更新查询DOM结构。今天我们学习的目标就是深究这三个动态集合之间的用法和联系以及区别。

阿里巴巴达摩院人机自然交互实验室，成立于2017年 ，隶属于达摩院，致力于通过理解人类行为，应用前沿技术，推动人类与机器自然互动的能力，探索下一代人机交互可能性。团队成员来自全世界不同专业领域以及高校里的设计和技术达人们，共同构建多感官人机交互框架，并在过程中建立情感化的知识图谱，探索多感官，人性化，自然化的交互新方式。感兴趣欢迎来简历: weihua.lwh@alibaba-inc.com