前端的一些坑，一些記錄，一些冷知識

無限期更新前端的一些坑，一些記錄，一些冷知識
https://github.com/ssshooter/...

大概從 17 年的六月份開始記錄吧，也已經一年了，其中也包含了一些很簡單的知識，以前還覺得挺難的，現在看起來有點謎之感慨...

JavaScript

• 所有物件都有 __proto__ 屬性，都指向創造物件的函式物件的 prototype。

• 上傳檔案要使用 formdata 包裝。

• Promise.prototype.catch 方法是 .then(null, rejection) 的別名。

• 同一個 EventTarget 註冊了多個相同的 EventListener，那麼重複的例項會被拋棄。所以這麼做不會使得 EventListener 被呼叫兩次，也不需要用 removeEventListener 手動清除多餘的EventListener，因為重複的都被自動拋棄了。

• 當使用 addEventListener() 為一個元素註冊事件的時候，控制程式碼裡的 this 值是該元素的引用。其與傳遞給控制程式碼的event 引數的 currentTarget 屬性的值一樣,而 target 是直接接受事件的子元素。

• scrollIntoView() 使 div 底部滾動到視窗。

• 使用 const 的物件和陣列的內容是可以被修改的，但資料結構不可變。

• 在 webpack 裡，所有的檔案都是模組。loader 的作用就是把檔案轉換成 webpack 可以識別的模組。

• 關於事件迴圈，執行下一個 task 之前總會清空 microtask。

• npm 新舊版本覆蓋可能會造成迷之問題，這個時候可以試試 node_module 整個刪掉重灌。

• *、/ 和 - 操作符都是數字運算專用的。當這些運算子與字串一起使用時，會強制轉換字串為數字型別的值。

• document.title 可以直接修改當前 html 的標題。

• 利用物件淺拷貝修改物件，指向同一物件的兩個變數修改物件的效果一樣。

• 腦洞題：1 和 2 只用一次的情況下怎麼得到 4 答案：1<<2。

• 連等賦值從右到左。

• compositionstart 事件觸發於一段文字的輸入之前（類似於 keydown 事件，但是該事件僅在若干可見字元的輸入之前，而這些可見字元的輸入可能需要一連串的鍵盤操作、語音識別或者點選輸入法的備選詞）。

• void 0（void後面加任何東西）用於生成一個絕對的 undefined（不會被重定義），但跟函式會有副作用

• 注意 localStorage 儲存的只能是字串，所以是沒有 null 的。

• 坑一個

  typeof [] === 'object' // true
  typeof null === 'object' // true
  

• import 同步，require非同步（待補充）

• new() 做了些什麼？

  var obj = new Base();
  var obj  = {};
  obj.__proto__ = Base.prototype;
  Base.call(obj);
  

• stage 0 到 4 的含義：

  stage 0 is "i've got a crazy idea",
  stage 1 is "this idea might not be stupid",
  stage 2 is "let's use polyfills and transpilers to play with it",
  stage 3 is "let's let browsers implement it and see how it goes",
  stage 4 is "now it's javascript".

• Object.getOwnPropertyNames(obj).length === 0 判斷 obj 是不是空物件。

• getBoundingClientRect() 用於獲取元素寬高以及距離頁面邊框距離，十分方便。

• && 的使用場景：左邊為真繼續執行右邊，如 isDog && bark()。

• || 的使用場景：左邊為假繼續執行右邊，如 let i = value || defalutValue。

Vue.js

• v-model 會自動 bind 一個值，其變數名為 value。

• 多個特性的元素應該分多行撰寫，每個特性一行。以下為 vscode 裡 vetur 的設定：

  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force" 
      }
    }
  

• 元件 destroy 時觸發自定義指令的 unbind，destory 的時機：diff 之後的 patch,如 v-if，v-for（key不同時，先銷燬原來的，再掛載新的（推測））

• 自定義元件 v-model watch 自動匹配（存疑

• 元件的 data 屬性要用函式返回的原因：建立例項時如果 data 是一個物件的話，所有例項都會引用同一個物件，而物件返回不會有此問題。在瀏覽器中可以這麼做是因為根例項只有一個。

• .vue 檔案中使用 /deep/ 覆蓋子元件 css

GitHub

• 從 commit 關閉 issues 的方法：commit 資訊寫 Fixes #33，其他關鍵字還有 close closes closed fix fixes fixed resolve resolves resolved
• git reset --soft HEAD^ 回退一次 commit

CSS

• div 的預設寬度是父元素寬的 100%

• 逐幀動畫 animation: animate-name 3s steps(每次迴圈的幀數) infinite;

  @keyframes animate-name{
      from{
      <!--原位-->
          background-position: 0 0; 
      }
      to{
      <!--最後一幀-->
          background-position: -1540px 0 ;
      }
  }
  

• "Break out" of a parent's containing width to take the full screen of a page w/this nice utility class:

  .full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
  

• 行內元素與下一個元素中間有空格（正常排版）,會引起一些詭異的縫隙，常見的例如元素之間有間隔，或看起來空了一行（像加了padding）

• pre 標籤設定自動換行 white-space: pre-wrap;

• 隱藏一個元素，同時讓這個元素的寬度可獲取：設定 overflow: hidden 可以根據元素高度裁剪視區，設定 height: 0; overflow: hidden 雖然文件流中佔用了位置，由於高度為 0，最終表現特徵達到了我們期望的 display: none。此時該元素 clientHeight、offsetHeight 為 0，但是 scrollHeight 是有值的。scrollHeight 是一個元素沒有滾動條時的所有內容高度,當一個元素沒有滾動條時 scrollHeight === offsetHeight。

• 當 Render Tree 中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文件的過程稱為迴流。

• 當頁面中元素樣式的改變並不影響它在文件流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱為重繪。

• 迴流必將引起重繪，重繪不一定會引起迴流。

• 移動端優化常用 CSS 屬性：

  user-select: none; // 禁止文字被選中
  outline:none; // 去除點選外邊框,點選無輪廓
  -webkit-touch-callout: none; // 長按連結不彈出選單
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 去除點選高亮
  

• @keyframes 的屬性要前後對應，否則不形成動畫

• img 元素影像自適應居中，與 background-size 效果一樣

  object-fit: cover;
  

• <img /> 標籤千萬記得寫寬高，不然會花式塌陷

• flex-grow 所在元素如果未定寬度的話，寬度會被子元素撐開

• 一個英文單詞預設不換行，無論多長，所以要設定 word break

• 多行文字居中

  .mulit_line{ 
      border:1px dashed #cccccc; 
      padding-left:5px;
  }
  .mulit_line span{ 
      display:inline-block; 
      line-height:14px; 
      vertical-align:middle;
  }
  

• safari 中控制慣性滾動 -webkit-overflow-scroll

• 滾動條樣式可能使滾動條強制顯示（未確定）

• flex 佈局不換行加 flex-shrink: 0; 實現 div 不壓縮無限並排，可以用於 swiper 等場景。

• 巧用貓頭鷹選擇器 +

• float 自帶 display: block

• 滑鼠禁用 .disabled { pointer-events: none; }

• 注意 :last-child 與 :last-of-type 的區別

• ::after 表示法是在 CSS3 中引入的，:: 符號是用來區分偽類和偽元素的。支援CSS3的瀏覽器同時也都支援 CSS2 中引入的表示法 :after。

• 父元素如果存在 transform 屬性，子元素的 position: fixed 屬性無效

• less 中的 calc 問題：height: calc(~"100% - 50px");

• vh 在部分瀏覽器中包含位址列部分，小心使用。

VSCode

• alt + shift + 滑鼠點選 縱向選擇
• vetur 分號問題: 安裝 prettier，然後配置 "prettier.singleQuote":true,"prettier.semi": false
• 可以使用外掛 document this 方便寫註釋
• html tag 屬性分行 wrap_attributes:force
• 選定變數後按 F12 找到定義位置

其他

• 魔法隧道用 webpack 代理會 502
• 在元件化程式設計中，悼念被同名元件浪費了幾個鐘的 debug 時間[蠟燭]
• 區域網連不通的話，先試試，開共享，關閉防火牆
• 區域網連不通的話，還可以試試，在 webpack.config.js 檔案的 devServer 里加上host:'0.0.0.0'。
• iOS 的回彈效果，動的是 body 部分，html 是不動的
• 學習一個語言之前先看規範
• safari 的 formdata 只支援 append，其他方法需要 polyfill
• rc 的意思是 run commands
• 導航欄高度 88px，標籤欄高度 98px（iphone5和6常用）
• 關於 HTTP 304 Not Modified，簡單來說，請求內容沒有發生變化的時候，根據設定，伺服器可能直接取快取返回

感謝作者：ssshooter
原文連結：https://segmentfault.com/a/1190000015758071

公告通知

第 19 期【Python自動化運維入門】正在火熱招生中
第 8 期【Python自動化運維進階】正在招生中

各位小夥伴們，詳情請掃碼諮詢：