小劉同窗在前端開發中遇到的盲區知識點持續更新~

時間 2019-11-08

標籤同窗前端開發遇到盲區知識持續更新简体版

原文原文鏈接

因爲每次開發的時候都會遇到不少問題，而每次解決以後又會忘記，因此，給本身開一片小天地，來記錄一下那些坎坎坷坷，記錄本身的成長。css

2019/9/23-2019/9/27

user-select
git reset和git revert的區別
drag的學習

1.user-select

使用場景： 作網頁的時候，有些文字咱們須要能被選中，有些咱們不要能被選中，那麼這就須要用到一個css屬性了，那就是 user-select。html

屬性值：vue

none : 元素和子元素的文本將沒法被選中
text : 文本能夠被選中
auto : 文本將根據瀏覽器的默認屬性進行選擇
all : 當全部內容做爲一個總體時能夠被選擇。若是雙擊或者在上下文上點擊子元素，那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素git

2.git reset和git revert

在利用github實現多人合做程序開發的過程當中，咱們有時會出現錯誤提交的狀況，此時咱們但願能撤銷提交操做，讓程序回到提交前的樣子，總結兩種解決方法：回退（reset）、反作（revert）。github

git的版本管理，及HEAD的理解使用git的每次提交，Git都會自動把它們串成一條時間線，這條時間線就是一個分支。若是沒有新建分支，那麼只有一條時間線，即只有一個分支，在Git裏，這個分支叫主分支，即master分支。有一個HEAD指針指向當前分支（只有一個分支的狀況下會指向master，而master是指向最新提交）。每一個版本都會有本身的版本信息，如特有的版本號、版本名等。數組

git reset瀏覽器

HEAD指向的版本就是當前版本，所以，Git容許咱們在版本的歷史之間穿梭，使用命令git reset --hard commit_id。
穿梭前，用git log能夠查看提交歷史，以便肯定要回退到哪一個版本。
要重返將來，用git reflog查看命令歷史，以便肯定要回到將來的哪一個版本。bash

使用場景： 若是想恢復到以前某個提交的版本，且那個版本以後提交的版本咱們都不要了，就能夠用這種方法。app

版本回退後使用git push -f提交更改，此時使用「git push"會報錯，由於本地庫HEAD指向的版本比遠程庫的要舊。 echarts

git revert

原理： git revert是用於「反作」某一個版本，以達到撤銷該版本的修改的目的。好比，咱們commit了三個版本（版本1、版本2、版本三），忽然發現版本二不行（如：有bug），想要撤銷版本二，但又不想影響撤銷版本三的提交，就能夠用 git revert 命令來反作版本二，生成新的版本四，這個版本四里會保留版本三的東西，但撤銷了版本二的東西。

使用場景： 若是咱們想撤銷以前的某一版本，可是又想保留該目標版本後面的版本，記錄下這整個版本變更流程，就能夠用這種方法。

2019/9/16-2019/9/20

offsetWidth、offsetLeft是什麼
echarts樣式覆蓋？
跳出foreach循環

1. offsetWidth、offsetHeight、offsetTop、offsetLeft...

offsetLeft、offsetTop 子元素相對於父元素的位移（左位移、上位移） offsetWidth、offsetHeight 元素的可見寬度和可見高度 clientX、clientY 用於獲取鼠標座標（相對於頁面的座標）

style.left返回的是字符串、offsetLeft返回的是數值 style.left可讀可寫，offsetLeft只讀 style.left的值須要預先定義，不然取到的值爲空; offsetLeft不需提早定義，直接獲取

使用場景： 鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是css中hover效果，這種一般作法是每一個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只須要控制的彈框的顯示與隱藏便可，可是，當鼠標移動到邊界的菜單上時，彈框可能會超出外部元素的範圍。

解決方案： 動態的計算彈框距離外部元素的位置，即獲取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，若是彈框的寬度（offsetWidth）+距離左邊的距離（offsetLeft）大於父元素的寬度，則判斷爲超出外部元素範圍，須要動態改變彈框距離邊框的位置。

這裏對彈框的佈局有限制，雖然彈框要隱藏，可是不能使用display:none的方式隱藏，可使用opacity:0或者visibility: hidden隱藏元素，由於display:none方式不能獲取到元素的高度，寬度等

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box {
        width: 500px;
        height: 500px;
        background: #0a67fb;
        margin: 100px auto;
        position: relative;
    }

    #inner-box {
        width: 200px;
        height: 200px;
        background: #00F7DE;
        position: absolute;
        top: 50px;
        left: 320px;
        visibility: hidden;
    }
</style>
<body>
<div id="box">
    <div id="inner-box">
    </div>
</div>
<script>
    var box = document.querySelector('#box');
    var innerbox = document.querySelector('#inner-box');

    box.onmouseenter = function (e) {
        var wrapperBoxWidth = box.offsetWidth;// 獲取父容器寬度
        var wrapperBoxHeight = box.offsetHeight;// 獲取父容器高度

        var innerBoxWidth = innerbox.offsetWidth;// 獲取彈框寬度
        var innerBoxHeight = innerbox.offsetHeight;// 獲取彈框高度
        var innerBoxLeft = innerbox.offsetLeft;// 獲取彈框距離左側寬度
        var innerBoxTop = innerbox.offsetTop;// 獲取彈框距離頂部高度

        innerbox.style.visibility = 'visible'  // 鼠標移入時顯示彈框

        // 若是彈框寬度+距離左側寬度大於外部元素的寬度，則右側溢出
        if (innerBoxLeft + innerBoxWidth > wrapperBoxWidth) {
            innerbox.style.left = 'auto'
            innerbox.style.right = '10px'
        }

        // 若是彈框高度+距離頂部高度大於外部元素的高度，則底部溢出
        if (innerBoxTop + innerBoxHeight > wrapperBoxHeight) {
            innerbox.style.top = 'auto'
            innerbox.style.bottom = '10px'
        }
    }
    box.onmouseleave = function () {
        innerbox.style.visibility = 'hidden' // 鼠標移開時隱藏彈框
    }
</script>
</body>
</html>
複製代碼

2.echarts樣式覆蓋

最近在作關於echarts畫圖的項目的時候，對於先前生成的echarts圖，我後續的操做中改變他的option的時候，它會將先前的數據也加進去；經過查閱echarts文檔後，發現，文檔中寫到 setOption是設置圖表實例的配置項以及數據，萬能接口，全部參數和數據的修改均可以經過 setOption 完成，ECharts 會合並新的參數和數據，而後刷新圖表。

chart.setOption(option, notMerge, lazyUpdate);
option
圖表的配置項和數據，具體見配置項手冊。
notMerge
可選，是否不跟以前設置的 option 進行合併，默認爲 false，即合併。
lazyUpdate
可選，在設置完 option 後是否不當即更新圖表，默認爲 false，即當即更新。
複製代碼

解決方案： chart.setOption(option, true);

chart.clear(); //清空當前實例，會移除實例中全部的組件和圖表。清空後調用 getOption 方法返回一個{}空對象。

3.終止foreach循環

foreach()沒法在全部元素都傳遞給調用的函數以前終止遍歷。

解決方案： 由於foreach()沒法經過正常流程終止，因此能夠經過拋出異常的方式實現終止。

try {
    var array = ["first","second","third","fourth"];
    
    // 執行到第3次，結束循環
    array.forEach(function(item,index){
        if (item == "third") {
            throw new Error("EndIterative");
        }
        alert(item);// first,sencond
    });
} catch(e) {
    if(e.message!="EndIterative") throw e;
};
// 下面的代碼不影響繼續執行
alert(10);
複製代碼

2019/9/3-2019/9/6

熟悉filter、map、foreach的使用場景
使用.native
transition與display衝突怎麼辦
如何使子元素滾動父元素不滾動
利用hover僞類改變其餘元素

1. 熟悉filter、map

首先這裏有一個數組：

let array = [{name:'liuliu',age:8},
             {name:'chuchen',age:10}];
複製代碼

我想拿到其中名字爲劉劉的，使用filter: array.filter(callback,[ thisObject]);:

array.filter(item=>{return item.name==='liuliu'})
複製代碼

我想知道數組中全部人的名字，使用map: array.map(callback,[, thisObject])

array.map(item=>{return item.name})
複製代碼

2.使用.native

以前在閱讀vue中文文檔的時候，沒有過多的注意這個修飾符，直到我在使用element組件的時候，想給下拉菜單組件添加一個click事件，卻發現沒有效果。查閱資料後才發現，v-on 是對 Vue 的事件體系封裝後的 API 接口，官方文檔中指出Vue 使用的是一套本身的事件傳遞機制，如 @click 等事件是通過 Vue 封裝的。因此在一些實際上處理 DOM 原生事件的場合須要添加額外的標識符。

因此須要在click後面加一個.native將組件變成一個普通的HTML標籤，可是該修飾符對普通HTML標籤無效。

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="editFeatureGroup(data)">編輯</el-dropdown-item>
    <el-dropdown-item @click.native="deleteFeatureGroup(data)">刪除</el-dropdown-item>
</el-dropdown-menu>
複製代碼

3.transition與display衝突怎麼辦

在作項目的時候，我遇到了這樣一個問題，我想讓一個div逐漸消失，固然是用transition是沒有問題的。可是運行的時候發現，transition沒有起到效果，那其中的緣由是什麼呢？ display的操做會觸發瀏覽器的reflow操做，而transition支持的效果只是觸發瀏覽器的repaint操做，若是咱們經過visibility屬性來控制顯示與隱藏，則不會破壞transition的效果。因此，能夠暫時這麼認爲：reflow與repaint的混合會破壞transition的動畫效果。

解決方法：使用visibility替代display

visibility:hidden的時候元素任然存在於文檔流中，同時visibility:hidden對應的數值0，visibility:visible對應的數值1，transition屬性能夠對0～1之間進行過渡。

4.如何讓div不撐開父元素

1.使用fixed
2.父元素設置overflow：hidden，子元素設置overflow：auto

5 利用hover僞類改變其餘元素

<div class="parentA">
    <div class="children">
    </div>
<div>
<div class="parentB"></div>
複製代碼

改變子元素

.parentA:hover .children {}
複製代碼

改變兄弟元素（只能改變相鄰兄弟元素）

.parentA:hover + .parentB{}
複製代碼

.parentA:hover ~.parentB{}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。