高級前端進階（二）

恭喜EDG奪冠！！！

滾動條擠壓頁面問題（開胃小菜）

滾動條擠壓頁面，我們可能沒怎么注意到這個問題。
直接看圖吧

看到沒有，滾動條差不多占據了17px左右的寬度。 計算公式為：

let container = document.getElementById("container");
let scrollWidth = container.offsetWidth - container.clientWidth;
console.log('scrollWidth', scrollWidth); // 谷歌瀏覽器滾動條占據17px

如何讓滾動條不擠壓頁面呢？
overflow還有個值就是overlay，相當於讓滾動條懸浮。這個方法只適用於谷歌瀏覽器。
還有個方法很自然能夠想到，既然滾動條占據17px，那通過margin-right: -17px，不就行了，專門弄出17px給滾動條即可，然后頁面padding-right: 17px，這樣就不會出現擠壓頁面的問題了。
本質就是滾動條占據了容器的17px寬度，根據這個可以衍生出很多方法。
所謂一生二，二生三，三生萬物。本質上是不變的。

一、CSS中的聖杯布局跟雙飛翼布局

這兩種布局都是三欄布局，而且實現的效果都是一樣的，中間的一塊寬度自適應，並且是先加載。
聖杯布局跟雙飛翼布局，這兩種布局方式，我們應該或多或少接觸過。以前主要是通過浮動float來實現的，但現在有了flex，以前的方式就不香了，畢竟有更好的布局方式了。
在這里，着重講解一下，通過flex實現聖杯布局或者雙飛翼布局的效果。
代碼很簡單。

<div class="container">
    <diV class="main">main</diV>
    <diV class="left">left</diV>
    <diV class="right">right</diV>
</div>

/*scss*/
.container{
    display: flex;
    justify-content: center;
    .main{
        flex-grow: 1;
        order: 2;
        background-color: red;
    }
    .left{
        flex-basis: 200px;
        order: 1;
        background-color: orange;
    }
    .right{
        flex-basis: 200px;
        order: 3;
        background-color: paleturquoise;
    }
}

瀏覽器是從左到右解析代碼的，所以我們要讓main部分在最左邊，然后通過order來處理位置。讓flex-grow來實現自適應效果。
簡單吧！

二、復習一下上次講解的有關遞歸知識

list轉樹型數據（上一篇博客地址）
尋找樹型數據中的某個節點（包含所有的子節點）

function findTreeNode(tree, fn, childrenName) {
    if (childrenName == undefined)
        childrenName = 'children';
    for (let item of tree) {
        if (fn(item))
            return item;
        if (item[childrenName]) {
            let res = findTreeNode(item[childrenName], fn);
            if (res)
                return res;
        }
    }
}
let treeNode = findTreeNode(listToTree(treeList), (item) => item.id == 1);// 使用的是上篇博客的數據
console.log("treeNode", treeNode);// {"id":1,"pid":0,"name":"一級數據1","children":[{"id":4,"pid":1,"name":"二級數據2-1"},{"id":5,"pid":1,"name":"二級數據2-2"},{"id":6,"pid":1,"name":"二級數據2-3"}]}

三、改變this指向問題

復習一下，apply，call，bind這三種方法。

function test(item) {
  console.log(item);
}
var param = {
  q: 1,
  w: 2
};
test(param);
test.apply(null, [param]);
test.call(null, param);
test.bind(null, param)();// 以上四者是等價的
// 更改this指向
var obj = {
  param: {
    z: 6
  },
  newTest(item) {
    console.log(this.param)
    //console.log(item);
  }
}
obj.newTest.apply(this, [param]);// 等價於 obj.newTest.apply(window, [param]);// 輸出 {"q":1,"w":2}
obj.newTest.apply(obj, [param]);// 輸出 {"z":6}

四、恭喜EDG奪冠！！！