前端知识点总结

overscroll-behavior

触发的场景：

当控制浏览器滚动到边界时

问题gif 演示：

当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

解决方法：

overscroll-behavior:contain

.dialog{
        position: fixed;
        z-index: 5;
        width:200px;
        height:200px;
        border:1px solid;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        background-color: #eee;
        overflow: auto;
        font-size:14px;
        color:#222;
        overscroll-behavior-y: none;
        /*或者
        overscroll-behavior-y:contain;
        */
}
复制代码

实现示例：

jsfiddle.net/kerrie/6hv7…

它的取值：

• auto ： 默认值 滚动到边缘后继续滚动外部的可滚动容器。

• contain ： 阻止滚动链。

• none ： 和 contain 同样，但它也能够防止节点自己的滚动效果（例如 Android 炫光或 iOS 回弹）

contain和none的行为差别体现主要在移动端

默认Android 炫光或 iOS 回弹

overscroll-behavior-y:none

overscroll-behavior-x: none

能够禁止左右滑动的手势导航

兼容性：

IE 浏览器写法： -ms-scroll-chaining

参考连接：

developer.mozilla.org/zh-CN/docs/…
www.zhangxinxu.com/wordpress/2…

---

Scroll Snap

触发的场景：

网页容器滚动中止的时候，自动平滑定位到你但愿用户关注的重点区域

实现方法：

容器scroll-snap-type，子元素scroll-snap-align

它的取值：

做用在滚动父容器上	做用在滚动子元素上
scroll-snap-type	scroll-snap-align
scroll-snap-stop	scroll-margin/scroll-margin-(top/right/bottom/left)（用于精肯定位）
scroll-padding/scroll-padding-(top/right/bottom/left) （用于精肯定位）

scroll-snap-type

应用范围：滚动父容器上 说明：肯定是水平滚动定位，仍是垂直滚动定位

第一个参数：指定哪一个轴

• none ：默认值。表示滚动时候忽略捕捉点，不作任何操做
• x：捕捉水平定位点
• y：捕捉垂直平定位点
• block：捕捉和块状元素排列一个滚动方向的定位点
• inline：捕捉和内联元素排列一个滚动方向的定位点
• both：横轴纵轴都捕捉

第二个参数：指定形式

• mandatory 强制性
• proximity 浏览器在合适的状况下忽然捕捉到某个位置

scroll-snap-stop

应用范围：滚动父容器上【还在实验阶段】 说明：是否容许滚动容器忽略捕获位置

• normal：能够忽略捕获位置
• always：不能忽略捕获位置

scroll-snap-align

应用范围：滚动子元素上 说明：捕获点是上边缘，下边缘，仍是中间位置

• none：不定义位置
• start：起始位置对齐
• end：结束位置对齐
• center：居中对齐

demo.gif：

解释：在滚动操做时，在某一位置中止滚动后，根据设置的捕获点（start/center/end）来决定最终停留位置，Ep：捕获点设置为start,那么图片最终停留在该图片的上边缘位置

demo示例：

jsfiddle.net/kerrie/op1r…

兼容性：

其余应用示例：

jsfiddle.net/kerrie/f2eg…

参考连接：

www.cnblogs.com/lonelyxmas/…
www.zhangxinxu.com/wordpress/2…

---

选择器:empty使用技巧

定义：

选择没有任何子级的元素（包括文本节点）

应用场景1：

针对后端返回的字段中有空值的状况，能够不用判断是否为空显示“暂无数据”

实现方法：

selector:empty

demo示例：

实现代码：

jsfiddle.net/kerrie/3hjp…

PS：有空格，不算为空

应用场景2：

好比渲染连接

实现方法：

selector:empty

demo示例：

之前的作法：

<a href="http://www.baidu.com">http://www.baidu.com</a>
复制代码

能够用:empty

<a href="http://www.baidu.com" title="百度"></a>
a[href^="http"]:empty::before {
    content: attr(href);
}
复制代码

应用示例：

jsfiddle.net/kerrie/90bw…

---

Math.trunc()

定义：

将数字的小数部分去掉，只保留整数部分

相对于Math.ceil()和Math.floor()的优势：对于数值的正负状况不同时不用分别考虑了。

以前：
    Math.floor(10.2) //10
    Math.ceil(-10.2) // -10
    
 如今：
    Math.trunc(10.2) //10
    Math.trunc(-10.2) //-10
复制代码

与parseInt区别：

parseInt('100.2kg') // 100
    Math.trunc('100.2kg') //NaN
复制代码

对于trunc ，若是参数为字符串的话，内部会先使用Number将其先转为数值

其余示例：

Math.trunc(true) //1
    Math.trunc(false) // 0
    Math.trunc(null) // 0
复制代码

参考连接：

developer.mozilla.org/zh-CN/docs/…

---

sticky

表面意思：粘性的，粘性定位能够被认为是相对定位(relative)和固定定位(fixed)的混合。 元素在跨越特定阈值前为相对定位，以后为固定定位

那么，什么是阈值呢？

假设咱们设置：

nav{
        position:sticky;
        top:20px;
    }
复制代码

页面向下滚动时，nav的父元素div ，一旦视口的顶部与nav的距离小于20px（阈值），nav 就自动变为fixed定位。 页面继续向下滚动，父元素div完全离开视口（即整个父元素div彻底不可见），nav恢复成relative定位。

demo示例：

jsfiddle.net/kerrie/qg3z…

应用示例：

jsfiddle.net/kerrie/jm4w…

ps: 1，sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一块儿使用 2，父级元素不能有任何overflow:visible之外的overflow设置，不然没有粘滞效果。由于改变了滚动容器

兼容性

参考连接：

developer.mozilla.org/zh-CN/docs/…
www.zhangxinxu.com/wordpress/2…
www.ruanyifeng.com/blog/2019/1…

开发者工具方面

1，查看animation 动画过程，能够有效查看动画的细节，方便调试

2，访问的图片能够直接获取base64，不用再找工具进行图片转换base64了

ES6 class

javascript中只有对象，没有类的概念，是基于原型的面向对象语言

为何引入class?

class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

es5 构造函数生成实例的过程：

function Person(name,age) {
    this.name = name;
    this.age=age;
 }

Person.prototype.say = function(){
    return "个人名字叫" + this.name+"今年"+this.age+"岁了";
}

var obj=new Person("zhangsan",18);


复制代码

es6 构造函数生成实例的过程：

class Person{
        constructor(name,age){//constructor是一个构造方法，用来接收参数
            this.name = name;//this表明的是实例对象
            this.age=age;
        }
        say(){
            return "个人名字叫" + this.name+"今年"+this.age+"岁了";
        }
    }
    
    var obj=new Person("zhangsan",18);
    
    注：不存在变量提高
    //ES5能够先使用再定义,存在变量提高
    new Person();
    function Person(){}

    //ES6不存在变量提高，不然会报错
    new Person();//Person is not defined
    class Person {}


复制代码

其余说明

• constructor 能够不用写，是类的默认方法，new命令生成对象实例时自动调用该方法， 是用于接收参数。
• constructor外声明的全部方法都是定义在原型上的
• 在类中声明方法的时，不要给方法加function关键字
• 方法之间不要用逗号分隔，不然会报错

---

静态方法

class Person {
  constructor() {}
  static say(words) {
    alert(words)
  }
}


静态方法不在实例化对象的方法中，
所以里面不能有this，
使用方法：Person.say()

该方法不会被实例继承， 是直接经过类来调用
复制代码

与以下代码等价

class Person {}
Person.say = function() {}
复制代码

---

继承

super  既能够看成函数使用，也能够看成对象使用

当作函数用时：返回的是子类的实例，只能在子类的constructor里用

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name) {
  	//this.name = name; // ReferenceError
        super(name);//子类的构造函数必须执行一次 super 函数，不然会报错。
  }
}

//var parent = new Parent();
var child = new Child('金');
document.write(child.name)

注：
子类必须在constructor方法中调用super方法，而后再对其进行加工
只有调用super以后，才可使用this关键字，不然会报错
复制代码

demo示例：

jsfiddle.net/kerrie/sL2w…

---

当作对象用时：指向的是父类的原型，只能获取父类原型上的属性和方法

class Parent {
  constructor(name) {
    this.name = name;
  }
  
  say(){
  	document.write('我姓'+this.name+'，我能够说话了');
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }
  test(){
  	super.say()
  }
}

var child = new Child('金');
child.test();
复制代码

demo示例：

jsfiddle.net/kerrie/on4y…

参考连接：

es6.ruanyifeng.com/?search=cla…