如何學習一個框架？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這個技術迭代越來越快的時代，有效的學習能力能讓我們更好的應對甚至擁抱變化。本文對筆者在掌握流行的前端框架過程採用的思路進行抽象總結，提煉爲十問。"}]},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"產生原因？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"適用範圍？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"設計理念？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"生命週期？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":"代碼解耦？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":6,"align":null,"origin":null},"content":[{"type":"text","text":"通信協作？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":7,"align":null,"origin":null},"content":[{"type":"text","text":"能力擴展？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":8,"align":null,"origin":null},"content":[{"type":"text","text":"依賴協作？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":9,"align":null,"origin":null},"content":[{"type":"text","text":"領域難點？"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":10,"align":null,"origin":null},"content":[{"type":"text","text":"生態支持？"}]}]}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"產生原因？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個框架的產生原因，能清晰的闡述是誰？因爲什麼？做了什麼？將來會怎樣？這些問題將在一定程度上成爲技術選型的決定性因素。"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"是誰？ 透過這個問題能看到開發者的技術底蘊，這決定了本身項目的起點，對於項目的持續性發展有着很大的影響。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲什麼？這個問題回答了開發者在當時面對了什麼樣的問題，通過當時的取捨能判斷框架大體的發展方向。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"做了什麼？一個框架的誕生與發展需要開發者體系化的思考，這能明確我們需要做什麼才能介入或者應用這個框架。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將來會怎樣？明確問題域及迭代規劃能較準備的把握遷入時機。"}]}]}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"適用範圍？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每個框架都有自己獨特的問題領域和侷限性，對於當前的問題領域要明確在什麼場景下能解決什麼問題？這有助於我們明確在哪些場景下引入能產生極大的價值，而哪些場景下引入反而得不償失。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"設計理念？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"框架的設計理念決定了框架的架構體系，這有助於我們理解整個框架運轉體系以及寫出更恰當的代碼。以React爲例，核心理念是"},{"type":"text","marks":[{"type":"strong"}],"text":"： UIs are simply a projection of data into a different form of data."},{"type":"text","text":" 就像一個函數 "},{"type":"codeinline","content":[{"type":"text","text":"UI=transfer(data)"}]},{"type":"text","text":" ，對應的 HOC、Immutable等都是該理念的衍生產物。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"生命週期？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"掌握了框架的生命週期就掌握了框架的運行機制，這對於後續的代碼優化及問題排查能奠定良好的基礎。與生命週期對應的核心API是我們編碼邏輯對接的主戰場，也是框架二次封裝及改造最核心的地方。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"代碼解耦？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於一個常規項目來講，解決的往往是成規模的大量問題，這會需要更多的人進行更多協作性的編碼產出，那麼代碼的解耦拆分以及複用將是決定項目能否以近線性的成本迭代的核心因素。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"通信協作？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有分就需要有何，代碼解耦拆分後，各模塊的通信協作是影響項目複雜度的核心因素。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"能力擴展？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"框架的擴展能力能提升框架的適用場景，並能推動框架的發展。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"依賴協作？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"框架對運行平臺以及第三方依賴的協作，也是我們需要掌握的一個方面。這對於項目的架構設計能提供有效的決定性因素，當然也能幫助我們有效的解決遇到的問題。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"領域難點？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要想深層次掌握一個框架的適用，必須明確在其問題領域中的核心難點如何利用該框架進行解決，核心難點往往決定了框架的上限，比如Web領域的表單及高性能渲染。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"生態支持？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"生態支持意味着框架的成熟度，良好的生態在開發鏈路及解決問題方面能給予極大的幫助。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"right","origin":null},"content":[{"type":"text","text":" -----走走想想總結一下！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}