成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

精讀《源碼學(xué)習(xí)》

aboutU / 2431人閱讀

摘要：精讀原文介紹了學(xué)習(xí)源碼的兩個(gè)技巧，并利用實(shí)例說明了源碼學(xué)習(xí)過程中可以學(xué)到許多周邊知識(shí)，都讓我們受益匪淺。討論地址是精讀源碼學(xué)習(xí)如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。

1. 引言

javascript-knowledge-reading-source-code 這篇文章介紹了閱讀源碼的重要性，精讀系列也已有八期源碼系列文章，分別是：

精讀《Immer.js》源碼

精讀《sqorn 源碼》

精讀《Epitath 源碼 - renderProps 新用法》

精讀《Htm - Hyperscript 源碼》

精讀《React PowerPlug 源碼》

精讀《syntax-parser 源碼》

精讀《react-easy-state 源碼》

精讀《Inject Instance 源碼》

筆者自己的感悟是，度過大量源碼的程序員有以下幾個(gè)特質(zhì)：

思考具有系統(tǒng)性，主要體現(xiàn)在改一處代碼模塊時(shí)，會(huì)將項(xiàng)目所有文件串聯(lián)起來整體考慮，提前評(píng)估影響面。

思考具有前瞻性，對(duì)已實(shí)現(xiàn)的方案可以快速評(píng)價(jià)所處階段（臨時(shí) or 標(biāo)準(zhǔn) or 可拓展），將邊界情況提前解決，將框架 BUG 降低到最小程度。

代碼實(shí)現(xiàn)更優(yōu)雅，有大量源碼經(jīng)驗(yàn)做支撐，解決同樣問題時(shí)，這些程序員可以用更短的行數(shù)、更合適的三方庫解決問題，代碼可讀性更好，模塊拆分更合理，更利于維護(hù)。

既然閱讀源碼這么重要，那么怎么才能讀好源碼呢？本周精讀的文章就是一篇方法論文章，告訴你如何更好的閱讀源碼。

2. 概述

原文分三個(gè)部分：閱讀源碼的好處、閱讀源碼的技巧、以及 Redux Connect 的案例研究。

閱讀源碼的好處

閱讀源碼有助于理解抽象的概念，比如虛擬 DOM；有助于做方案調(diào)研，而不僅僅只看 Github star 數(shù)量；了解優(yōu)秀框架目錄結(jié)構(gòu)的設(shè)計(jì)；看到一些陌生的工具函數(shù)，還可能激發(fā)你對(duì) JS 規(guī)范的查閱，這種問題驅(qū)動(dòng)的方式也是筆者推薦的 JS 規(guī)范學(xué)習(xí)方式。

閱讀源碼的技巧

最好的閱讀源碼方式是看文章，如果源碼的作者有寫源碼解讀文章，這就是最省力的方式。雖然直接看代碼可以了解到所有細(xì)節(jié)，但當(dāng)你不清楚設(shè)計(jì)思路時(shí)，僅看源碼可能會(huì)找不到方向，而讀源碼的最終目的是找到核心的設(shè)計(jì)理念，如果一個(gè)框架沒有自己核心設(shè)計(jì)理念，這個(gè)框架也不值得誕生，更不值得被閱讀。如果框架的作者已經(jīng)將框架核心理念寫成了文章，那讀文章就是最佳方案。

還有一種方式是斷點(diǎn)，寫一個(gè)最小程序，在框架執(zhí)行入口出打下斷點(diǎn)，然后按照?qǐng)?zhí)行路徑一步步理解。雖然執(zhí)行路徑中會(huì)存在大量無關(guān)的函數(shù)干擾精力，但如果你足夠有耐心，當(dāng)斷點(diǎn)走完時(shí)一定會(huì)有所收獲。

原文還提到了一種看源碼方式，即沒有目的的尋寶。在尋找框架主要思路的過程中，遇到一些有意思的函數(shù)，可以停下來仔細(xì)閱讀，可能會(huì)發(fā)現(xiàn)一些對(duì)你有啟發(fā)的代碼片段。

Redux Connect 案例研究

原文以 Redux Connect 作為案例介紹研究思路。

首先看到 Connect 的功能 “包裝組件” 后，就要問自己兩個(gè)問題：

Connect 是如何實(shí)現(xiàn)包裝組件后原樣返回組件，但卻增強(qiáng)組件功能的？（高階組件知識(shí)）

了解這個(gè)設(shè)計(jì)模式后，如何利用已有的文檔實(shí)現(xiàn)它？

通過創(chuàng)建一個(gè)使用 Connect 的基本程序：

class MarketContainer extends Component {

}

const mapDispatchToProps = dispatch => {
 return {
   updateSummary: (summary, start, today) => dispatch(updateSummary(summary, start, today))
 }
}

export default connect(null, mapDispatchToProps)(MarketContainer);

比如從生成 connect 函數(shù)的 createConnect 我們就可以學(xué)習(xí)到 Facade Pattern - 門面模式。

從 createConnect 函數(shù)調(diào)用處：

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
} = {})

我們可以學(xué)習(xí)到解構(gòu)默認(rèn)函數(shù)參數(shù)的知識(shí)點(diǎn)。

總之，在學(xué)習(xí)源碼的過程中，可以了解到一些新的 JS 特性，一些設(shè)計(jì)模式，這些都是額外的寶藏，不斷理解并學(xué)會(huì)運(yùn)用到自己寫的框架里，就實(shí)現(xiàn)了源碼學(xué)習(xí)的目的。

3. 精讀

原文介紹了學(xué)習(xí)源碼的兩個(gè)技巧，并利用 Redux Connect 實(shí)例說明了源碼學(xué)習(xí)過程中可以學(xué)到許多周邊知識(shí)，都讓我們受益匪淺。

筆者結(jié)合之前寫過的八篇源碼分析文章，把最重要的設(shè)計(jì)思路提取出來，以實(shí)際的例子展示閱讀源碼能給我們思維帶來哪些幫助。

Immerjs 源碼的精華

Immer 可以讓我們以 Mutable 的方式更新對(duì)象，最終得到一個(gè) Immutable 對(duì)象：

this.setState(produce(state => (state.isShow = true)))
詳細(xì)源碼解讀可以閱讀 這里。

核心思路是利用 Proxy 把臟活累活做掉。上面的例子中，state 已經(jīng)是一個(gè)代理（Proxy）對(duì)象，通過自定義 setting 不斷遞歸進(jìn)行淺拷貝，最后返回一個(gè)新引用的頂層對(duì)象作為 produce 的返回值。

從 Immerjs 中，我們學(xué)到了 Proxy 可以化腐朽為神奇的用法，比看任何 Proxy 介紹文章都直觀。

sqorn 源碼的精華

sqorn 是一個(gè) sql orm，舉例來看：

const sq = require("sqorn-pg")();

const Person = sq`person`,
  Book = sq`book`;

// SELECT
const children = await Person`age < ${13}`;
// "select * from person where age < 13"
詳細(xì)源碼解讀可以閱讀 這里

核心思路是在鏈?zhǔn)秸{(diào)用過程中創(chuàng)建 context 存儲(chǔ)結(jié)構(gòu)，并在鏈?zhǔn)秸{(diào)用的時(shí)候不斷填充 context 信息，最終拿到的是一個(gè)結(jié)構(gòu)化 context 對(duì)象，生成 sql 語句也就簡單了。

從 sqorn 中，我們學(xué)到了如何實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用 init().a().b().c().print() 最后拿到一個(gè)綜合的結(jié)果，原理是內(nèi)部維護(hù)了一個(gè)不斷修改的對(duì)象。不論前端 React Vue 還是后端框架 Koa 等，一般都有內(nèi)置的 context，一般實(shí)現(xiàn)這種優(yōu)雅語法的框架內(nèi)部都會(huì)維護(hù) context。

Epitath 源碼的精華

Epitath 在 React Hooks 之前出來，解決了高階函數(shù)地獄的問題：

const App = epitath(function*() {
  const { count } = yield 
  const { on } = yield 

  return (
    
  )
})


詳細(xì)源碼解讀可以閱讀 這里

其核心是利用 generator 的迭代，將 React 組件的平級(jí)結(jié)構(gòu)還原成嵌套結(jié)構(gòu)，將嵌套寫法打平了：

yield 
yield 
yield 
// 等價(jià)于

從 epitath 中，我們了解到 generator 原來可以這么用，正因?yàn)槠鋱?zhí)行是多次迭代的，因此我們可以利用這個(gè)特性，改變代碼運(yùn)行結(jié)構(gòu)。

Htm - Hyperscript 源碼的精華

Htm 將模版語法很自然的融入到了 html 中：

html`
  

    <${Header} name="ToDo"s (${page})" />
    
    
      ${todos.map(
        todo => html`
          
  • ${todo}
    • 
        `
      )}
    

    
    <${Footer}>footer content here
  

`;
詳細(xì)源碼解讀可以閱讀 這里

其核心是怎么根據(jù)模版拿到 dom 元素的 AST？拿到 AST 后就方便生成后續(xù)內(nèi)容了。

作者的辦法是：

const TEMPLATE = document.createElement("template");
TEMPLATE.innerHTML = str;

這樣 TEMPLATE 就自帶了 AST 解析，這是利用瀏覽器自帶的 AST 解析拿到了 AST。從 Htm 中，我們學(xué)到了 innerHTML 可以生成標(biāo)準(zhǔn) AST，所以只要有瀏覽器運(yùn)行環(huán)境，需要拿 AST 的時(shí)候，不需要其他庫，innerHTML 就是最好的方案。

React PowerPlug 源碼的精華

React PowerPlug 是一個(gè)利用 render props 進(jìn)行狀態(tài)管理的工具庫。

它可以在 JSX 中對(duì)任意粒度插入狀態(tài)管理：


  {({ value, set, reset }) => (
    <>
      
<fieldset id="2go0c"><menu id="2go0c"></menu></fieldset>
<strike id="2go0c"></strike>
  • 

<