声享正努力加载中...

你不知道的前端新特性

奇舞团 梁幸芝

一、如何从URL中获取特定参数?

URLSearchParams


  var params = new URLSearchParams('src=so.com&data=1');//定义实例
  params.get('src')   // so.com

  var params = new URLSearchParams('src=so.com&data=1&data=2');
  params.has("src") === true;
  params.get("data") === "1";
  params.getAll("data");
  
  
  params.append("q","hello");
  params.append("data","world");
  params.delete("src");
  params.toString();
  
  var url = new URL("https://example.org/💩?x=1");
  url.pathname // "/%F0%9F%92%A9"
  url.host // example.com
  
  url.searchParams.get('x')

URLSearchParams

二、如何实现懒加载

IntersectionObserver


  var io = new IntersectionObserver(callback, option);

  io.observe(element);  // 开始观察
  io.unobserve(element);  // 停止观察
  io.disconnect();  // 关闭观察器

callback

目标元素的可见性变化时,就会调用观察期的回调函数callback。


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

参数entries是一个数组,数组的成员是被观察的可见性有变化的对象,数组的每一项都是一个IntersectionObserverEntry对象

IntersectionObserverEntry对象

对象提供观察的目标元素的信息,一共有六个属性:

boundingClientRect
intersectionRatio
intersectionRect
rootBounds
target
time

IntersectionObserverEntry对象

Option对象

Option对象可以设置的属性:


  new IntersectionObserver(
    entries => {/* ... */}, 
    {
      threshold: [0, 0.25, 0.5, 0.75, 1]
    }
  );

2. root 属性,rootMargin 属性

1. threshold属性

IntersectionObserver API

IntersectionObserver API 是异步的,不随着目标元素的滚动同步触发。

这个观察器的优先级非常低,只在其他任务执行完,浏览器有了空闲才会执行。

参考:

  
  const io = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        /*函数功能*/
      })
  }, {
      threshold: .2
  });
  Array.from(document.querySelectorAll('li'))
  .forEach(li => io.observe(li));

lazy-load

infinite-scroll

三、怎么在用户关闭页面的时候打点?

sendBeacon


  navigator.sendBeacon(url, data);

四、没有JS如何统计链接的点击?

ping

五、怎样让一个元素在离开viewport时停在指定位置?

position: sticky

  • 元素不会脱离文档流,并保留元素在文档流中占位的大小

  • 元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置

  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量

兼容性

六、原生JS怎样删除一个节点?

DOM4

  • Element#prepend()
  • Element#append()
  • Element#before()
  • Element#after()
  • Element#replaceWith()
  • Element#remove()

DOM Level 4 parentNode entries:

DOM Level 4 childNode entries:

七、怎么实现copy、cut。。。

execCommand

当文档对象被转换为设计模式(designMode)的时候,文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容。


  选中节点:element.select();
  document.execCommand('command');

execCommand语法


  bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

​​​​​​​参数:

        aCommandName:一个DOMString,命令名称;

        aShowDefaultUI:一个Boolean是否展示用户界面,一般为false(目前还没有实现);

        aValueArgument:一些命令需要一些额外的参数值。        ​

返回一个Boolean,如果是false则表示操作不被支持或未被启用

常用命令

  • copy  拷贝当前选中内容到剪贴板。
  • cut  剪贴当前选中的文字并复制到剪贴板。
  • delete  删除选中部分。
  • selectAll  选中网页中的全部内容。
  • createLink  将选中内容创建一个锚链接

               。。。。。。

八、你知道的最简单的清除浮动的方法?


  display: flow-root;

display: flow-root

demo对比

float 未做处理:

清除浮动:clear:both;

demo对比

float 未做处理:

在元素上使用display: flow-root:

九、字符串的前后位置添加字符串到指定位数?

padStart && padEnd


  'abc'.padStart(10);         // "       abc"
  'abc'.padStart(10, "foo");  // "foofoofabc"
  'abc'.padStart(6,"123465"); // "123abc"
  
  'abc'.padEnd(8, "0");     // "abc00000"

  str.padStart(targetLength [, padString]);

十、怎样在浏览器中用JS分享内容到微信?

Web share API

  
  navigator.share({
      title: document.title,
      text:  "Hello World",
      url: window.location.href
  }).then(()  => console.log('Successful share'))
  .catch(()  => console.log('Error sharing:', error));

祝大家天天开心 ^_^

Your browser does not support the canvas element.

你不知道的前端新特性

创建于2017年01月11日

都叫梁幸芝了还care什么呀的更多幻灯片

  • 2017年08月04日 79

分享“幻灯片”

HI, 亲爱的用户

为获得声享编辑器的最佳体验,建议使用
360安全浏览器极速模式?
或最新版Chrome浏览器

下载360浏览器 下载最新版Chrome