前端開發中有什麼經典的輪子值得自己去實現一遍？

12-12

求問各位聚聚，前端各個等級有哪些輪子的實現思想以及架構是十分經典且值得學習的呢？又有什麼輪子比較適合前端初心者練手呢？

以下是我實現過的輪子（所有這些我都實現過不止一次，這裡僅列出最近一次）：

JS類工廠 hax/mmclass · GitHub
特點是符合ES6語義，不過現在建議直接用ES6。

基於generator和promise的非同步 hax/async.js · GitHub
主要為教學目的，production建議使用babel。

Promise實現 hax/my-promise · GitHub
特點是目前唯一可以通過所有ES6 Promise和Promise A+測試的Promise實現。未來會繼續維護，並打算投入生產環境替換掉現在使用的其他實現。

觸摸和指點設備手勢庫 hax/zhi · GitHub
在生產環境使用的，不過因為沒有新需求，所以有一段時間沒維護了。後續如果有時間會用ES6+重寫。

加密演算法 hax/speck.js · GitHub
挑了一種新加密演算法SPECK用sweetjs玩玩宏。其實不好算特定的輪子。

ES5 shim hax/better-es5-shim · GitHub
現有各種ES5 shim實現中反射和元編程有關的sham（sham指無法完全實現的shim）都實現得很糟糕。所以自己動手。不過太忙了沒寫完。預期明年會好好寫一下。

前端性能數據收集 hax/WebPerf · GitHub
已在生產環境中使用。後續會抽時間升級支持瀏覽器的一些新特性。

Loader hax/my.js · GitHub
嗯，我們熟悉的loader。這最近一個是在ES6草案剛出來時候寫的。等whatwg loader規範比較穩定之後（預計明年）會全部重寫，敬請期待。

基於HTML5的slide hax/Slides · GitHub
我去年以前的slide都是用這個做的。後來不高興自己實現markdown支持，用了幾次remark框架。最近又寫了一個從markdown生成高橋流的slide框架，尚未單獨發成repo，敬請期待。

最後是我這幾年花時間精力最多的輪子項目： baixing/jedi · GitHub
模板引擎。但又不止是模板引擎。

為什麼要搞這個東西，我以後會有專門的speech，這裡先不展開了。

其他答案里提到的各種輪子除了富文本編輯器（天坑，沒事兒千萬別跳）、完整的js解釋器（但我寫模板引擎有部分涉及編譯器）以及輪子說的瀏覽器（什麼鬼！）之外，我多少都做過，只是沒有形成repo發出來。

以上只是表示我回答本題的資格（順便耍帥）。
最後正經回答問題——哪個輪子適合初學者練手？

我認為觸摸和指點設備手勢庫、ES5 shim、前端性能數據收集、基於HTML5的slide 這幾個是適合的。

我造過的輪子：
LiuJi-Jim/jas：非同步控制的工具，11年寫的，只有60行，然而炒雞好用，吃自己狗食的級別。
LiuJi-Jim/raze-tpl：模板引擎，語法風騷迷人，吃自己狗食的級別。
LiuJi-Jim/mirror：Virtual-DOM實現，玩具級別。
LiuJi-Jim/h5pal：萬噸巨輪，仙劍奇俠傳web移植（介紹）。
LiuJi-Jim/c-struct：一個用於JS讀寫C結構體的工具，從h5pal里拆出來重構的。
還有一些爛尾了，還有一些不想發出來的，各種Promise、EventEmitter、Module Loader、山寨Lodash、數據結構、類工廠、MVC……不提也罷。

我覺得吧~~，SPA框架和 Virtual Dom 都可以玩玩~~

兩年前，覺得造 SPA 的輪子很有意思。

剛畢業那會，流行 SPA，模仿著寫了一個很簡單的 SPA 框架，名為 GitHub - phodal/lettuce: Mobile Framework for Romantic. 簡約的移動開發框架。

其實就是把 jQuery、Mustahce、Promise、Backbone 精簡到了一起。

代碼，看上去就是這樣的：
這是一個 Page：

var aboutPage = function(){ var aboutPage = new L.SimpleView(); var templates = L.Template.tmpl("&{%=o.about%}&", data); return aboutPage.render(templates, "results"); };

Route:

L.Router .add(/#about/, about) .load();

一年多以前，流行 Virtual Dom 的時候

造了一個基於 Virtual Dom 的測試幫助工具——當時，我們項目用的是 Jasmine 來寫測試，比較麻煩的是，每次都得看 DOM 變化的地方，於是就擼了這樣的一個工具——GitHub - phodal/luffa: Virtual-Dom test framework helper for fun

可以 Diff 修改前後的 DOM 變化，然後生成簡單的測試代碼~~~。

可惜國內的開發者很少寫測試~~~，所以 star 很少~~。

就寫下我自己造過的吧，不過都是練手，還是去年實習的時候玩的，並沒有在生產中使用。
瀏覽器端基於AMD的模塊化載入
Promise
Undersore
簡單的View-Model to-way-binding
Dom的事件代理 delegate
pub-sub的事件模型
JavaScript的reactive編程
JavaScript的繼承、Ajax的helper就不用說了吧。。。
這些都是基礎，真的都是基礎，但是很適合練手，練手以後對這些概念的理解會大大加深哦！
以下是GitHub地址，證明一下寫過，當時的代碼實現和分塊現在看來也不怎麼好。。。
Allen93/utils · GitHub
Allen93/js_modular · GitHub
最後，PS：有木有哪位看得上的，求領走。。。

js 的自解釋器，記得過 ES-test

注意題目問的是哪些輪子值得實現一遍。
問的不是你造過哪些輪子呀。（光感謝不點贊是什麼情況。。）

你只要去實現那些每年被重新實現過一遍的輪子就行了。

UI 輪子
輪播、Tab、懶載入……
照著餓了么UI庫、Bootstrap 挨個實現就好。
做這種輪子比較考驗 CSS 功力，你需要用盡量少的代碼適應盡量多的場景。

流行 UI 模式的實現
瀑布流、視差滾動、fullpage等。
原理簡單又炫酷，何樂不為。

DOM 操作的輪子
實現得最好的當然就是 jQuery。由於 jQ 這麼流行，所以你實現的結果很可能跟 jQ 的 API 一模一樣。
因此現在很少有人造這個輪子，但是在十年前，大家都是在早 DOM 輪子。
這要求你對 DOM 和 API 設計有很多經驗。
至於 Virtual DOM，你可以在某種程度上認為是一種 DOM API 的封裝，不過它的難點其實不在這裡。

JS 缺失的標準庫的實現
Date 很爛，所以有了 Moment
Array 很爛，所以有了 Underscore Lodash
JS 沒有載入器，所以有了 require.js 等
JS 自定義事件不好用，所以你可以自己造一個
有的瀏覽器不支持 ES5，所以有了 es5shim。
移動設備需要滑動事件，你來造一個輪子吧。
模板引擎……就一個正則替換還好意思叫引擎，實現這種輪子的第一要務是如何給出漂亮的 debug 信息，至於渲染速度的，我認為只能排在第二位。

框架輪子
MVC 可以造輪子，雖然不流行了，但對老項目很有用。
MVVM 在不考慮 IE 的前提下造一個輪子也絕非難事。
FLUX 單向數據流的輪子就更好造了。

工程化輪子
現在搞前端不會工程化怎麼行。
基於 Gulp 做一套自動化構建盡顯逼格。

所以你看，前端搞了這麼多年，只不過就是每年把上面輪子重新造一遍而已（逃

underscore！

熟悉js中的prototype，實現類似繼承的功能 ded/klass · GitHub
了解js中的pub sub模型事件發射器 Wolfy87/EventEmitter · GitHub
了解怎樣模塊化開發js AMD標準 ES6標準 nodejs的標準區別和用法
實現promise對象的Deferred Helper petkaantonov/bluebird · GitHub
用上面的promise寫個ajax helper
類似underscore的增強類 jashkenas/underscore · GitHub
不過等到es6普及大多數都不用寫了會用就ok了希望5-10年內這些輪子都滾蛋

個人github倉庫展覽？

首先，我認為造輪子都是有意義的，當然輪子哥只有一個。由於相當多的業務經驗是在移動Web app開發上，所以所造輪子多為移動Web app開發解決方案／工具／庫：

switer/Zect · GitHub 在生產項目使用 Vue 0.10 後，出於：「需要自填松鼠瀏覽器內核的坑／希望DOM同步更新／更自然的表達式／React的單向數據流／更小的體積」的目的，於是乎久造輪子了。了解 Observe／Data-binding／Component 思想與現實必備

switer/Real · GitHub 在兼容IE6與融合於後端渲染的情況下，移除Observe，移除模版數據渲染邏輯功能（迭代器，分支判斷），留下Data-binding（屬性操作）／Component。聲明收集的實現方式與 Zect 的DOM遍歷的實現方式不同

switer/comps · GitHub 最近剛寫完的庫。用與後端渲染方案，喜歡組件化的目錄結構，分治能提高項目的可維護性。主體功能是在模版同通過 {% component $id="xxx" /%} 的語法去載入組件的模版內容並結合 Real 做前端運行時組件反射。期間順便實現了Bigpipe，Pagelet，Include另外幾種功能Pagelet，Include是為了提高模版在前端的復用性。由於運行階段是在使用模版引擎進行數據渲染之前，類似於預編譯階段，沒有性能的顧慮，用最簡單的方式現實了模版引擎。技能：模版引擎／組件化／Bigpipe

switer/jsinspector · GitHub 用於移動端Web調試。直接抓取移動端頁面的內容，投影到PC瀏覽器，用於定位HTML結構問題。期間也順便把console的信息同步了與及腳本反向注入。有人說像browserSync？最輪子的輪子。技能：Scoket.io ／ Mobile debugger

switer/chainjs · GitHub 非同步流程式控制制，步驟控制類似於senchalabs/connect · GitHub，有點類似也是國產的teambition/then.js · GitHub，同上，我們之前沒相差幾個月，那時候我也不知道它。最早的一個輪子，喜歡它的直接與清晰的流程邏輯。技能：非同步流程式控制制

以上都是個人頗具代表性的作品，都不是為了造輪子而造的輪子，每一個的誕生都是有它的業務意義或者無知。在團隊／個人項目中使用，從維護性的角度來看是比麻煩第三發開源有所提高。

20kb 以內實現的 React，支持大部分功能，除了 render to string，具體的功能請點進鏈接查看:)
react-lite: Lucifier129/react-lite · GitHub

雖然用 ES2015 來寫，不過為了考慮體積，也沒有用 class 語法。

如果不自己寫，要引用一堆的庫，自己造輪子可以精簡很多，必備的輪子：
namespace 命名空間管理
extend繼承
trigger/on事件發布訂閱,
domready 載入成功檢測
selector 基本的id,class,tag,attr選擇器
requirejs模塊載入器
模板引擎
async 非同步編程封裝
常用UI組件-下拉菜單，彈窗，popup，自動完成輸入框
mvvm雙向綁定

Virtual-DOM

最簡單的必須是jQ啊，入門前端都是通過jq來學習js的，到最後很多人已經搞得不知道啥時jq屬性啥時js源生屬性了，但是不得不感嘆，jq內部的實現有些還是很厲害的,這個是大三時候寫的一個類似jq的東西，不過實現的很少只有一點點
https://github.com/renminghao/frame/blob/master/JFrame.js
and 高級點的就搞AST啊，趁著業餘時間搞了個，感覺還是能增加很多東西的認識的
renminghao/html-ast

and 求github的star啊

以下是我實現過的一些輪子 (JavaScript):

VIO vilic/vio · GitHub
基於 Express, Promise, ES7 Decorator, 文件路徑的, 開發過程中可動態載入的路由.
MV* vilic/drop · GitHub
0.2 版還在抽空開發中, 期望是提供簡潔統一, 可靈活擴展的語言能力.
Promise vilic/thenfail · GitHub
Promises/A+ 的 TypeScript 的實現, 0.3 可以 break/cancel.
手勢 vilic/touch-delegate · GitHub
基於 Identifier 的可擴展的手勢庫, 期望是可擴展, 能正確處理冒泡及停止.
語言相關 (類, 介面, 重載, etc.) vilic/vejis · GitHub
很屌, 不過現在已經有 TypeScript 了.
代碼高亮 vilic/vlight · GitHub
聯繫人輸入框 vilic/tag-contacts · GitHub
簡單的選擇器 vilic/v-query · GitHub
當然如果現在重寫的話我就知道應該從右到左了.
Web 桌面 vilic/prever-start · GitHub
很屌.

還有很多算不上輪子的小東西, 比如:

長正則表達式維護工具 vilic/regex-tools · GitHub
Adobe AIR 上基於 Socket 的簡單 HTTP 客戶端實現 vilic/air-proxy-enabled-http-request-for-js · GitHub

我一直覺得搞 Web 桌面不錯, 是個完整的項目, 需要接觸一些後端的東西, 而且不同階段的實現肯定是有很大區別的.

除此之外, 寫個代碼高亮自己的博客用用也是很不錯, 還可以練手正則表達式. HTTP 實現也是可以玩玩看, 不必花很多時間到可以實用 (當時我也是外包項目需要), 做一個最簡的實現就好. 另外選擇器也是可以玩玩的.

有時間真好.

找個自己喜歡的、能持續投入3-10年的、甚至成為終身職業或創業的方向去干就行，這才能真正對自己能力提高，對你整個家庭才是負責任的，看看現在浮躁的前端，國內太多所謂的大師製造了太多自以為是但從沒被太多公司更不用說國外真正使用的無聊純給自己賣萌的輪子，說實話挺煩國內現在一些大V搞些花拳繡腿的小項目軟文章到處演講，到處以文人相輕的語態活躍在各個社交平台，好好學習 @尤雨溪潛心打造vue.js，我喜歡這樣的人這樣的項目，國內號稱前端前N的幾大牛有幾個做出了影響力接近vue.js這樣級別被廣為使用的好輪子，快被誤人子弟到處定義前端雞湯趨勢了，更多真正前端高手都在默默的為社會做真正的貢獻

富文本編輯器誰寫誰知道。

建議：要造輪子的話就造些平時項目中經常使用的吧。

斷斷續續搞了一年的基礎函數庫：liriliri/eris + 工具庫掃描生成器：liriliri/eustia
只要工作中需要用到並且屬於小輪子的（代碼數在500以下的）就會自己動手實現一遍，同時收集起來供平時項目使用。這種方式不僅能學習到各種前端開源庫的實現方式，也能讓造出來的輪子在實際項目中發揮效用，何樂而不為。

Observable Objects/ Array (Model)

初學者的話：Selector Engine，AJAX Helper，Promise A+ 的 Deferred Helper，Chainable ArrayStringObject Function Helpers...

sizzle算不算？jQuery裡面的大頭啊