前端知識點總結

時間 2020-07-07

標籤前端知識總結简体版

原文原文鏈接

overscroll-behavior

觸發的場景：

當控制瀏覽器滾動到邊界時javascript

問題gif 演示：

當對話框中含有可滾動內容時，一旦滾動至對話框的邊界，對話框下方的頁面內容也開始滾動了——這被稱爲「滾動鏈」。

解決方法：

overscroll-behavior:containcss

.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…html

它的取值：

auto ：默認值滾動到邊緣後繼續滾動外部的可滾動容器。java
contain ：阻止滾動鏈。es6
none ：和 contain 同樣，但它也能夠防止節點自己的滾動效果（例如 Android 炫光或 iOS 回彈）編程

contain和none的行爲差別體現主要在移動端後端

默認Android 炫光或 iOS 回彈

overscroll-behavior-y:none

overscroll-behavior-x: none瀏覽器

能夠禁止左右滑動的手勢導航bash

兼容性：

IE 瀏覽器寫法： -ms-scroll-chainingwordpress

參考連接：

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();
複製代碼