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

無限期更新前端的一些坑，一些記錄，一些冷知識
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: inline-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，簡單來講，請求內容沒有發生變化的時候，根據設置，服務器可能直接取緩存返回