小知識點集匯三

JavaScript

• 所有對象都有 __proto__ 屬性，都指向創(chuàng)造對象的函數(shù)對象的 prototype。
• 上傳文件要使用 formdata 包裝。
• Promise.prototype.catch 方法是 .then(null, rejection) 的別名。
• 同一個 EventTarget 注冊了多個相同的 EventListener，那么重復(fù)的實例會被拋棄。所以這么做不會使得 EventListener 被調(diào)用兩次，也不需要用 removeEventListener 手動清除多余的EventListener，因為重復(fù)的都被自動拋棄了。
• 當(dāng)使用 addEventListener() 為一個元素注冊事件的時候，句柄里的 this 值是該元素的引用。其與傳遞給句柄的 event 參數(shù)的 currentTarget 屬性的值一樣,而 target 是直接接受事件的子元素。
• scrollIntoView() 使 div 底部滾動到視窗。
• 使用 const 的對象和數(shù)組的內(nèi)容是可以被修改的，但數(shù)據(jù)結(jié)構(gòu)不可變。
• 在 webpack 里，所有的文件都是模塊。loader 的作用就是把文件轉(zhuǎn)換成 webpack 可以識別的模塊。
• 關(guān)于事件循環(huán)，執(zhí)行下一個 task 之前總會清空 microtask。
• npm 新舊版本覆蓋可能會造成迷之問題，這個時候可以試試 node_module 整個刪掉重裝。
• *、/ 和 - 操作符都是數(shù)字運算專用的。當(dāng)這些運算符與字符串一起使用時，會強制轉(zhuǎn)換字符串為數(shù)字類型的值。
• document.title 可以直接修改當(dāng)前 html的標(biāo)題。
• document.body.contentEditable=true 或 document.designMode='ON' 可編輯的網(wǎng)頁
• document.lastModified // 查看網(wǎng)頁最后更新時間
• 利用對象淺拷貝修改對象，指向同一對象的兩個變量修改對象的效果一樣。深度克隆 采用 _.deepClone(obj) 或 JSON.parse(JSON.string(obj))
• 腦洞題：1 和 2 只用一次的情況下怎么得到 4 答案：1<<2。
• 連等賦值從右到左。
• compositionstart 事件觸發(fā)于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。
• void 0（void后面加任何東西）用于生成一個絕對的 undefined（不會被重定義），但跟函數(shù)會有副作用
• 注意 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() 用于獲取元素寬高以及距離頁面邊框距離，十分方便。
• && 的使用場景：左邊為真繼續(xù)執(zhí)行右邊，如 isDog && bark()。
• || 的使用場景：左邊為假繼續(xù)執(zhí)行右邊，如 let i = value || defalutValue。

Vue.js

• v-model 會自動 bind 一個值，其變量名為 value。
• 多個特性的元素應(yīng)該分多行撰寫，每個特性一行。以下為 vscode 里 vetur 的設(shè)置：

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

• 組件 destroy 時觸發(fā)自定義指令的 unbind，destory 的時機：diff 之后的 patch,如 v-if，v-for（key不同時，先銷毀原來的，再掛載新的（推測））
• 自定義組件 v-model watch 自動匹配（存疑
• 組件的 data 屬性要用函數(shù)返回的原因：創(chuàng)建實例時如果 data 是一個對象的話，所有實例都會引用同一個對象，而對象返回不會有此問題。在瀏覽器中可以這么做是因為根實例只有一個。
• .vue 文件中使用 /deep/ 覆蓋子組件 css demo
• keep-alive 的鉤子函數(shù) activated() deactivated() 以及
  keep-alive 最佳實踐

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

GitHub

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

CSS

• div 的默認(rèn)寬度是父元素寬的 100%
• 逐幀動畫 animation: animate-name 3s steps(每次循環(huán)的幀數(shù)) 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;
  }
  

• 行內(nèi)元素與下一個元素中間有空格（正常排版）,會引起一些詭異的縫隙，常見的例如元素之間有間隔，或看起來空了一行（像加了padding）
• pre 標(biāo)簽設(shè)置自動換行 white-space: pre-wrap;
• 隱藏一個元素，同時讓這個元素的寬度可獲?。涸O(shè)置 overflow: hidden 可以根據(jù)元素高度裁剪視區(qū)，設(shè)置 height: 0; overflow: hidden 雖然文檔流中占用了位置，由于高度為 0，最終表現(xiàn)特征達(dá)到了我們期望的 display: none。此時該元素 clientHeight、offsetHeight 為 0，但是 scrollHeight 是有值的。scrollHeight 是一個元素沒有滾動條時的所有內(nèi)容高度,當(dāng)一個元素沒有滾動條時 scrollHeight === offsetHeight。
• 當(dāng) Render Tree 中部分或全部元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流。
• 當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。
• 回流必將引起重繪，重繪不一定會引起回流。
• 移動端優(yōu)化常用 CSS 屬性：

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

• @keyframes 的屬性要前后對應(yīng)，否則不形成動畫
• img 元素圖像自適應(yīng)居中，與 background-size 效果一樣

  object-fit: cover; 
  

• <img /> 標(biāo)簽千萬記得寫寬高，不然會花式塌陷
• flex-grow 所在元素如果未定寬度的話，寬度會被子元素?fù)伍_
• 一個英文單詞默認(rèn)不換行，無論多長，所以要設(shè)置 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
• 滾動條樣式可能使?jié)L動條強制顯示（未確定）
• flex 布局不換行加 flex-shrink: 0; 實現(xiàn) div 不壓縮無限并排，可以用于 swiper 等場景。
• 巧用貓頭鷹選擇器 * + *
• float 自帶 display: block
• 鼠標(biāo)禁用 .disabled { pointer-events: none; }
• 注意 :last-child 與 :last-of-type 的區(qū)別
• ::after 表示法是在 CSS3 中引入的，:: 符號是用來區(qū)分偽類和偽元素的。支持CSS3的瀏覽器同時也都支持 CSS2 中引入的表示法 :after。
• 父元素如果存在 transform 屬性，子元素的 position: fixed 屬性無效
• less 中的 calc 問題：height: calc(~"100% - 50px");
• vh 在部分瀏覽器中包含地址欄部分，小心使用。

VSCode

• alt + shift + 鼠標(biāo)點擊 縱向選擇
• vetur 分號問題: 安裝 prettier，然后配置 "prettier.singleQuote":true,"prettier.semi": false
• 可以使用插件 document this 方便寫注釋
• html tag 屬性分行 wrap_attributes:force
• 選定變量后按 F12 找到定義位置

其他

• 魔法隧道用 webpack 代理會 502
• 在組件化編程中，悼念被同名組件浪費了幾個鐘的 debug 時間[蠟燭]
• 局域網(wǎng)連不通的話，先試試，開共享，關(guān)閉防火墻
• 局域網(wǎng)連不通的話，還可以試試，在 webpack.config.js 文件的 devServer 里加上host:'0.0.0.0'。
• iOS 的回彈效果，動的是 body 部分，html 是不動的
• 學(xué)習(xí)一個語言之前先看規(guī)范
• safari 的 formdata 只支持 append，其他方法需要 polyfill
• rc 的意思是 run commands
• 導(dǎo)航欄高度 88px，標(biāo)簽欄高度 98px（iphone5和6常用）
• 關(guān)于 HTTP 304 Not Modified，簡單來說，請求內(nèi)容沒有發(fā)生變化的時候，根據(jù)設(shè)置，服務(wù)器可能直接取緩存返回