不断收藏成熟的 API,够了数量就分享。

各种 Observer

IntersectionObserver 判断元素是否在元素中出现。

  1. const intersectionObserver = new IntersectionObserver(
  2. function (entries) {
  3. console.log('info:');
  4. entries.forEach(item => {
  5. console.log(item.target, item.intersectionRatio)
  6. })
  7. }, {
  8. // 百分之50 和 完全展示的时候触发回调
  9. threshold: [0.5, 1]
  10. });
  11. intersectionObserver.observe( document.querySelector('#box1'));

MutationObserver 监听元素的更改


  1. const mutationObserver = new MutationObserver((mutationsList) => {
  2. // dom 改变的时候触发
  3. // 修改属性,增加删除子节点都可以触发
  4. console.log(mutationsList)
  5. });
  6. mutationObserver.observe(box, {
  7. attributes: true,
  8. childList: true
  9. });

ResizeObserver 监听 dom 宽度和高度的更改

  1. const resizeObserver = new ResizeObserver(entries => {
  2. console.log('当前大小', entries)
  3. });
  4. resizeObserver.observe(box);


Web Components

兼容性已经足够给力了,在不想使用 runtime 的场景还是非常方便的,Google 做的这个在线 交互模型的使用还是非常简单的。

Easily display interactive 3D models on the web & in AR

www.webcomponents.org_.png

  1. customElements.define('word-count', WordCount, { extends: 'p' });
  2. class WordCount extends HTMLParagraphElement {
  3. constructor() {
  4. // 必须首先调用 super 方法
  5. super();
  6. // 元素的功能代码写在这里
  7. ...
  8. }
  9. }

demo 可以在这里抄一下 。

Intl 对象

Intl 内置了很多很有用的格式化,能显著减少我们去 github 抄代码。

Intl.NumberFormat

Intl.NumberFormat 可以帮助我们更好的格式化数字,并且是基于国际化的, 使用起来会舒服多了还不会有 bug。

  1. var number = 123456.789;
  2. console.log(new Intl.NumberFormat().format(number));
  3. // → 123,456.789
  4. // 通过编号系统中的nu扩展键请求, 例如中文十进制数字
  5. console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
  6. // → 一二三,四五六.七八九
  7. // 带货币单位
  8. console.log(new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(number));
  9. // → ¥123,456.79
  10. // 使用 notation 转化金额
  11. console.log(new Intl.NumberFormat('zh-CN', { notation: "compact" }).format(987654321));
  12. // → 9.9亿

Intl.RelativeTimeFormat

一个比较简单的相对日期格式化工具。

  1. const rtf1 = new Intl.RelativeTimeFormat('zh', { style: 'narrow' });
  2. console.log(rtf1.format(3, 'quarter'));
  3. // -> 3个季度后
  4. console.log(rtf1.format(-1, 'day'));
  5. // -> 一天前

Intl.Segmenter

分词变得超简单。

  1. const str = "我是一个名望程序员";
  2. console.log(str.split(" "));
  3. // -> ['我是一个名望程序员']
  4. const segmenterJa = new Intl.Segmenter('zh-CN', { granularity: 'word' });
  5. const segments = segmenterJa.segment(str);
  6. console.log(Array.from(segments));
  7. ---->>>>
  8. [
  9. { "segment": "我是", "index": 0, "input": "我是一个名望程序员", "isWordLike": true },
  10. { "segment": "一个", "index": 2, "input": "我是一个名望程序员", "isWordLike": true },
  11. { "segment": "名望", "index": 4, "input": "我是一个名望程序员", "isWordLike": true },
  12. { "segment": "程序", "index": 6, "input": "我是一个名望程序员", "isWordLike": true },
  13. { "segment": "员", "index": 8, "input": "我是一个名望程序员", "isWordLike": true }
  14. ]

DisplayNames

  1. const regionNamesInTraditionalChinese = new Intl.DisplayNames(['zh-CN'], { type: 'region' });
  2. console.log(regionNamesInTraditionalChinese.of('US'));
  3. // -> 美国
  4. console.log(regionNamesInTraditionalChinese.of('CN'));
  5. // -> 中国
  6. const dnDialect = new Intl.DisplayNames('zh-CN', {type: 'language', languageDisplay: 'dialect'});
  7. console.log(dnDialect.of('en-GB'));
  8. // -> 英语(英国)
  9. console.log(dnDialect.of('zh-Hant'));
  10. //-> 中文(繁体)
  11. console.log(dnDialect.of('zh-CN'));
  12. // -> 中文(中国)

@supports

可以用来写一些代码来降级一些炫酷得效果。

  1. @supports (display: grid) {
  2. div {
  3. display: grid;
  4. }
  5. }
  6. .card {
  7. background-color: #FFF;
  8. @supports (backdrop-filter: blur(20px) saturate(150%)) {
  9. background-color: rgba(240, 242, 245, 0.4);
  10. backdrop-filter: blur(20px) saturate(150%);
  11. }
  12. }

@scroll-timeline 不能用,但是很想要的

在 CSS 规范 Scroll-linked Animations 中,推出了一个划时代的 CSS 功能。也就是 @scroll-timeline,直译过来就是滚动时间线,我们直接看个demo。

640.gif

  1. #container {
  2. height: 300px;
  3. }
  4. #square {
  5. background-color: deeppink;
  6. width: 100px;
  7. height: 100px;
  8. margin-top: 100px;
  9. animation-name: rotateAnimation;
  10. animation-duration: 3s;
  11. animation-direction: alternate;
  12. animation-timeline: squareTimeline;
  13. }
  14. @scroll-timeline squareTimeline {
  15. source: selector("#container");
  16. orientation: "vertical";
  17. scroll-offsets: 0px, 300px;
  18. }
  19. @keyframes rotateAnimation {
  20. from {
  21. transform: rotate(0deg);
  22. }
  23. to {
  24. transform: rotate(360deg);
  25. }
  26. }