antd

• Modal對話框中，默認設置寬度最大為650px，且增加了！important最高權重。

  Modal提供了 wrapClassName 屬性，可以命名對話框外層容器的類名。通過在css文件中如下修改層疊閥蓋默認最大寬度650px。

  .wrapClassName .ant-modal {
      width: 1000px;
  }
  

• 全局提示 message.config 配置

  message.config({
      top: 100, //@param number || string 距離頂部位置，單位px
      duraion: 2, //顯示持續時間，單位秒
      maxCount: 1 //最多顯示條數，超過就立即隱藏多出的最早的一條
  })
  

copy-to-clipboard

//yarn add copy-to-clipboard
copy(variation)

vmax

• 相對于可視窗口的寬度或高度中較大的那個。類比于 vh， vw

  p {
      font-size: 8vmax;
  }
  

font & Font Format

• woff2 不適用于IE、IE mobile、UC for Android

• woff 最新客戶端全兼容

• svg 適用于Safari、iOS Safari

• eot 僅僅適用于IE

• ttf / otf 不適用于IE

  /*引用外部字體文件，寫入css命名，定義模板輸出*/
  @font-face {
      font-family: 'Font name string'; /*定義字體名稱*/
      src: url('fonts/hanshand-webfont.eot');
      src: url('fonts/hanshand-webfont.eot') format('embedded-opentype'),
           url('fonts/hanshand-webfont.woff') format('woff'),
           url('fonts/hanshand-webfont.ttf') format('truetype'),
           url('fonts/hanshand-webfont.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  

overflow

• css 中 overflow 屬性。在多層嵌套的布局環境下，內部元素（常見的是modal彈出框之類的元素），會超出屏幕邊界，原本不顯示的滾動條會被迫出現，為了撐開頁面顯示超出邊界的元素。
• 此時，overflow 屬性需要配合 position:relative; 一起使用。

react router <params / query / state>

• params 傳參方式會直接體現在地址欄中，只允許傳遞字符串。

• query方式和state方式一致，可傳遞對象數據，傳遞數據不會體現在地址欄中。

  let queryData = {
      pathname: '/tonextpage',
      query: <...>
  }
  let stateData = {
      pathname: '/tonextpage',
      state: <...>
  }
  
  <Link to={queryData}></link>
  <Link to={stateData}></link>
  

exif-js

• 讀取圖像元數據

• yarn add exif-js

  import Exif from 'exif-js'
  
  Exif.getData(fileObj, function(){
      const allTags = Exif.getAllTags(this)
  }
  

antd-upload-customRequest

• customRequest 方法不支持 async 函數

  復現報錯：

  Uncaught TypeError: reqs[uid].abort is not a function
  

react function transfer between father and son component

• function transfer

  // in father component
  getName() {
      ...
  }
  ...
  <Son getName={this.getName.bind(this)}/>
  
  //to run geName function in son component
  this.props.getName()
  

css z-index invalid

• 父標簽設置了position:relative
• 當前標簽未設置position:absolute
• 當前標簽設置了float屬性

css z-index valid

• 當前標簽設置position:absolute / relative

React - setState(prevState => {})

//...
constructor(props) {
 super(props)
 this.state = {
     num: 1,
 }
}
//...
this.setState(
  prevState => ({
      num: prevState.num + 1, //通過調用 prevState 形參，獲取上一個狀態組件中的 state 值
  })
)

git stash

//暫存掛起到工作區，回到當前分支最近一次提交狀態
git stash

//顯示暫存列表
git stash list

//回到掛起前狀態，應用到所在分支，并同時刪除暫存列表
//回歸到掛起前狀態與所在分支無關
git stash pop

//刪除暫存列表中某一項
git stash drop stash@{0}

CSS calc()

.example{
  //尺寸計算，支持 加減乘除
  width: calc(100% - 20px);
  height: calc(100% = 1em);
}

React component ref attribute

// 調用 dom 方法1
...
let targetDom = this.refs.target
...
<Children ref="target"/>

// 調用 dom 方法2
...
let targetDom = this.target
...
<Children ref={c => this.target = c}

Use functions of children component in parent component

// Parent.js
...
getChildComponent(ref) {
  this.child = ref // 獲取子組件class，這里的ref即是子組件
}
...
this.child.getSomething()// 調用子組件函數方法
...
<Child foo={this.foo.bind(this)}/>


// Child.js
...
componentDidMount() {
  this.props.getChildComponent(this) // 這里的 this 指向子組件
}

getSomething() {
  console.log('Got it')
}
...

reduce()

reduce(callback(accumulator, currentValue, currentIndex, array))

let arr = [0, 1, 2, 3, 4]
arr.reduce(
  (accumulator, currentValue, currentIndex, array) => accumulator + currentValue
)

回調狀態變更歷程

callback	accumulator	currentValue	currentIndex	array	return value
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

let arr = [0, 1, 2, 3, 4]
arr.reduce(
  (accumulator, currentValue, currentIndex, array) => accumulator + currentValue,
  10
)

回調狀態變更歷程

callback	accumulator	currentValue	currentIndex	array	return value
first call	10	0	0	[0, 1, 2, 3, 4]	10
second call	10	1	1	[0, 1, 2, 3, 4]	11
third call	11	2	2	[0, 1, 2, 3, 4]	13
fourth call	13	3	3	[0, 1, 2, 3, 4]	16
fifth call	16	4	4	[0, 1, 2, 3, 4]	20

context

// define
const {Provider, Consumer} = React.createContext(defaultValue)
// or
const contentContext = React.createContext(defaultValue)


// provider
<Provider value={/* some value */}>
// or
<contentContext.Provider value={/* some value */}>


// consumer
<Consumer>
  {value => /* render something based on the context value */}
</Consumer>
// or
<contentContext.Consumer>
  {value => /* render something based on the context value */}
</contentContext.Consumer>

grid - CSS

/* 父元素申明 grid 布局*/
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px; /*均勻排列4列，每列100px*/
  grid-template-rows: 100px 100px 100px 100px; /*均勻排列4行，每行100px*/
  grid-gap: 2px; /*定義行列固定間距 2px*/
  /* 等價拆分寫法
  grid-row-gap: 2px;
  grid-column-gap: 2px;
  */
}

.item1 {
  grid-row-start: 2; /*柵格單元，從柵格行的第2柵格線開始；單獨出現，補全單個柵格單元*/
  grid-row-end: 3; /*柵格單元，到柵格行的第3柵格線結束；單獨出現，補全單個柵格單元*/
  grid-column-start: 2; /*柵格單元，從柵格列的第2柵格線開始；單獨出現，補全單個柵格單元*/
  grid-column-end: 3; /*柵格單元，到柵格列的第3柵格線結束；單獨出現，補全單個柵格單元*/
}

.item2 {
  grid-row: 4 / 6; /*柵格單元，從柵格行的第4柵格線開始，到柵格行的第6柵格線結束*/
  grid-column: 4 / 6; /*柵格單元，從柵格列的第4柵格線開始，到柵格列的第6柵格線結束*/
}

.item3 {
  grid-row: span 2; /*柵格單元，自身跨越兩行*/
  grid-column: span 2; /*柵格單元，自身跨越兩列*/
}

.item4 {
  grid-area: -3 / 4 / -1 / 3; /*固定順序，row-start / column-start / row-end / column-end ;對應的行或列的起始位置可對換*/
}

http 1.1 & http 2.0

http 1.1

• 瀏覽器限制同域名下的并發請求數量，不同瀏覽器的最大并發請求數量各不相同，但都不超過10。當超過最大并發請求數量后，后續的請求會進入隊列先進先出，發送請求，此時便發生了隊頭阻塞的情況。
• 采用文本傳輸方式，傳輸數據不分割。
• 對請求頭不做壓縮處理，附帶cookie時，每次請求都會重復附帶信息

http 2.0

• 多路復用，TCP鏈接中可以傳輸多條數據流，可以發送多個請求，
• 采用二進制編碼，分割傳輸數據，請求頭與請求體分割
• 對請求頭進行壓縮

png8 & png24

png8 和 png24 在顏色上面是沒有差異的，差別體現在對透明性的展現上，其本質是存儲方式上的不同

png8 是1位的透明通道，只能顯示全透明和不透明，在圖形邊緣有明顯的鋸齒；png24 是8位的透明通道，可以顯示全透明、半透明、不透明，圖形邊緣沒有明顯鋸齒

mobx & redux

redux 單一store，函數式的方法對狀態進行變更，每次都需要dispatch方法來改變對應狀態值，減少一切冗余，適用于小而簡單的應用，適用于快速開發

mobx 多個store，面向對象式的方式對狀態進行變更，狀態值的引用指向始終不會發生變化，允許冗余數據相關聯始終可控可追溯，適用于大而復雜的應用，適用于長期維護的開發

number of connections per same origin server

瀏覽器同域最大并發請求。瀏覽器對同于域名下的資源請求，即同一域名下的TCP連接數，并發數量有不同的限制。chrome 8+ 是 6，firefox 3+ 是 6， safari 4+ 是 4。因此可以采用跨域請求來分散同一時間對同域的請求，將資源文件（圖片，css等）文件放到不同的域名下，或者分發到cdn是比較有效的措施。

單個TCP連接可以發送多個http請求。在http/1.1下，需要按順序發送響應，以免亂序，丟包重新傳輸；在http/2.0下，支持多路復用，且對http請求做了拆封對應和算法加密，可以亂序傳輸響應，不影響解析。

The hole variable types check

// type check
Object.prototype.toString.call(variable)
/**
 * variable = []  >>> '[object Array]'
 * variable = null  >>> '[object Null]'
 * variable = {}  >>> '[object Object]'
 * variable = undefined  >>> '[object Undefined]'
 * variable = ''  >>> '[object String]'
 * variable = 1  >>> '[object Number]'
 * variable = false  >>> '[object Boolean]'
*/

this in object

let name = "in window"
let obj = {
  name: "in obj",
  getName: function() {
    console.log(this.name)
    return function() {
      // js對象中匿名函數返回值，指向window
      return this.name
    }
  },
  getNameFunc: function() {
    console.log(this.name)
    return () => this.name
  }
}

obj.getName()()
/**
 * in obj
 * "in window"
*/

obj.getNameFunc()()
/**
 * in obj
 * "in obj"
*/