造輪子與從Github生成輪子
在知乎上回答了個問題，覺得寫得甚好，便也將內容復制了出來。造輪子是一種快速的學習方式，而還有一種進階則可以是從Github中生成輪子。
并且要記得在最后要寫幾篇文章總結一下，總的來說就是：
-
查看很多Github項目的源碼及提交歷史
-
寫膠水代碼生成自己的框架
分享之前造的幾個輪子的過程：
一、 SPA框架
兩年多以前，當時我們項目用的技術棧是： Backbone + Mustache + jQuery。 在我們當時的環境下，主要組成有：
- Backbone提供了一個Router
- Mustache提供了模板
- jQuery抽象了DOM
- Ajax請求
所以，這就是我造的第一個輪子的重要組成部分。
接著，我就開始造輪子了：我稱呼這個框架為Lettuce, GitHub - phodal/lettuce: Mobile Framework for Romantic. 簡約的移動開發框架 。
我參考了一本名為《Building A JavaScript Framework 》的電子書，以及《JavaScript框架設計》一書。因為沒有任何框架的設計經驗，所以只好試圖按照書上的一點一滴來進行。在這個過程中，我開始深入JavaScript。
從 [https://github.com/munro/self) 這個庫中，我開始創建了自己的類的用法。
接著，開始寫Ajax，照例還是參考了jQuery和Zepto的代碼。同樣的還有Event、Promise等等的一些類。
然后就是Router，源碼來自于：https://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url，又參考了早期的Backbone代碼。
以及模板引擎，照例代碼也不全是我寫的，用的是http:////ejohn.org/blog/javascript-micro-templating/
最后就是一個簡單的PageView:
var SimpleView = new Lettuce.prototype.Class({});
SimpleView.prototype.init = function () {};
SimpleView.prototype.render = function (template, elementId) {
document.getElementById(elementId).innerHTML = template;
};
var simpleView = {
SimpleView: SimpleView
};
Lettuce.prototype = Lettuce.extend(Lettuce.prototype, simpleView);</code></pre>
這其中最復雜的部分就是結合別人的代碼，換句話來說，就是 寫膠水代碼 。Blabla，最后我就有了一個SPA框架。
相關文章： 一步步搭建JavaScript框架——初始化項目
不過，這其中參考了幾十個框架，這點對提升自己很重要。
二、Slide框架
八個多月前，當時的情形是我需要有一個可以定時放映地Slide框架，而當時大部分的框架都不能滿足我的要求。
實際上我只需要一個定時的功能，而Impress的最新代碼又太復雜了。
接著，我看了Github上的提交歷史，我發現挺簡單的，就自己創一個新的框架，稱為 GitHub - phodal/echoesworks: Next-Generation Tech Blog/Presentation/Slider Framework 。
我需要下面的一些元素：
- Markdown解析器
- Slide框架
- Github代碼顯示
- 進度條
同樣的，我在Github上搜索不同的組件，最后再把他們結合到一起。
相關文章：
接著，我又造了不同的幾個框架：
- GitHub - phodal-archive/geng: DSL Step 1 —— Parse: 天干物燥，小心火燭
- GitHub - phodal-archive/tile.js: a pure javascript tiled map render
- GitHub - phodal/resume: RESUME Generator
隨著造的輪子越來越多，寫膠水代碼的能力越來越強，我就開始創造一些更有意思的輪子。
三、Luffa
Luffa是最近造的一個輪子，對于不寫測試的人來說可能沒有那么有意思。
我稱其為基于Virtual DOM與Diff DOM的測試代碼生成， GitHub - phodal/luffa: A Test Framework Helper for Fun
當時我們項目用的是Jasmine和Jasmine jQuery作為測試框架。在寫測試的時候，覺得看起來太麻煩了，就想著寫一個框架來Diff DOM的變化。
然后就是Virtual DOM那些東西了。
virtual-dom可以說由下面幾部分組成的：
- createElement，用于創建virtual Node。
- diff，顧名思義，diff算法。
- h，用于創建虛擬樹的DSL——HyperScript。HyperScript是一個JavaScript的HyperText。
- patch，用于patch修改的內容。
所以，我們可以很容易地創建出一個這樣的框架來Diff測試中DOM元素的修改。
相關文章： 基于Virtual DOM與Diff DOM的測試代碼生成
最后因為創建Growth就沒有繼續了: GitHub - phodal/growth: Be Awesome Developer 。
來自： http://www.phodal.com/blog/create-framework-from-github/