適合 JS 新手學習的開源項目——在 GitHub 學編程

做者：HelloGitHub-小魚乾

這裏是 HelloGitHub 的《GitHub 上適合新手的開源項目》系列的最後一篇，系列文章：

1. C++ 篇
2. Python 篇
3. Go 篇
4. Java 篇
5. JavaScript 篇

Java 篇中老荀說到當今互聯網份額最大的編程語言是 Java，做爲後輩我對此話是沒有異議的。但，要說到國內互聯網最火、最熱鬧的編程語言是什麼？應該沒人對 JavaScript 當選有異議吧。相對 C++、Java 這些老前輩，JS 可謂門檻之低，連 Python 都自嘆不如。那做爲一個新手要學習系統化地學習 JS，應該走哪幾步呢？

• 第一步：打開瀏覽器，輸入網址：https://hellogithub.com/
• 第二步：選擇 JavaScript 項目
• 第三步：逐一學習

[手動狗頭]有更快捷的方法嗎？有！在本篇文章中你將從基礎招式學習，瞭解 HTML、CSS、JS 等基礎概念以後，實踐一把吃豆人遊戲製做，再開啓性能調優之旅，最後闖蕩前端江湖。

出發，前進 🚗

成神第一式：打好根基

1.1 前端成長之路：Web

HG #vol.036 Web 是一個前端入門的圖文教程，記錄了做者從 0-1 學習前端的過程。做爲一個入門的圖文教程，Web 遵循了事無鉅細原則，在全部的介紹中詳細講 HTML、CSS、JS 等知識點，簡單的移動端開發、Vue 等框架使用、Node.js 介紹也略有涉獵。值得一提得失，它全部的示例中代碼註釋清楚地標註了使用某個函數時你所須要注意的事項，貼心到不行。

不過，Web 項目在 JS 基礎和進階內容分層方面略有不足，會發現 16 個類目有許多重複內容，以及原先在前端進階分類下的前端幾道題被獨立出來成爲一個單獨分類，收錄了大量面試題和網友面經，但瑕不掩瑜，該 Repo 絕對是一個新手入門的實用教程。

因爲做者沒有對分類內容及分類下內容作腦圖介紹，因此這裏小魚乾繪製了它的腦圖/目錄結構，部分相同主題內容進行了摺疊。

.
|── 前端工具
|   ├──VS Code 的使用
|   ├──Git 使用
|   ├──Mac 安裝和 iTerm2 配置
|   ├──Sublime Text 的使用
|   ├──WebStorm 的使用
|   ├──Atom 的使用
|   ├──GitHub 的使用
|   ├──VS Code 的使用累積
|   ├──Chrome 瀏覽器
|   ├──Emmet in VS Code
|   ├──iTerm2 + OhMyZsh + agnoster 搭建
|   ├──iconMoon
|   └──whistle 網絡抓包
|──HTML
|   ├──認識 Web 和 Web 標準
|   ├──瀏覽器的介紹
|   ├──初識 HTML
|   ├──HTML 標籤：排版標籤
|   ├──HMTL 標籤：字體標籤和超連接
|   ├──HTML 標籤：圖片標籤
|   ├──HTML 標籤：圖文詳解
|   ├──HTML5 詳解
|   ├──HTML5 舉例：簡單的視頻播放器
|   ├──HTML 詳解（二）
|   ├──HTML 詳解（三）
|   └──HTML 基礎回顧
|──CSS 基礎
|   ├──CSS 屬性：字體屬性和文本屬性
|   ├──CSS 屬性：背景屬性
|   ├──CSS 樣式表和選擇器
|   ├──CSS 選擇器：僞類
|   ├──CSS 樣式表的繼承性和層疊性
|   ├──CSS 盒模型詳解
|   ├──浮動
|   ├──CSS 屬性：定位屬性
|   ├──CSS 案例講解：博雅互動
|   ├──CSS3 選擇器詳解
|   ├──CSS3 屬性詳解（一）
|   ├──CSS3 屬性詳解：動畫詳解
|   ├──CSS3 屬性：Flex 佈局圖文詳解
|   ├──CSS3 屬性：Web 字體
|   ├──SaaS 入門
|   ├──瀏覽器的兼容性問題
|   └──CSS3 的常見邊框彙總
|──CSS 進階
|   ├──準備
|   ├──CSS 中的非佈局樣式
|   ├──CSS 佈局
|   ├──網頁開發和設計中的字體常識
|   ├──如何讓一個元素水平居中
|   ├──CSS 開發累積
|   ├──CSS 文章推薦
|   ├──CSS 的一些小知識
|   └──CSS 面試題
|──JS 基礎
|   ├──編程語言
|   ├──JS 簡介
|   ├──變量
|   ├──變量的數據類型：基本數據類型和引用數據類型
|   ├──基本數據類型
|   ├──typeof 和數據類型轉換
|   ├──運算符
|   ├──流程控制語句
|   ├──對象簡介
|   ├──基礎包裝類型
|   ├──內置對象
|   ├──數組
|   ├──函數
|   ├──做用域和變量提高
|   ├──預編譯
|   ├──this 指向
|   ├──call、apply 和 bind
|   ├──高階函數
|   ├──閉包
|   ├──對象
|   ├──深淺拷貝
|   ├──原型鏈和原型繼承
|   ├──類和構造繼承
|   ├──正則表達
|   ├──事件
|   └──jQuery
|──JS 之 ES6 語法
|   ├──ES6 介紹和環境配置
|   ├──ES5 中的嚴格模式
|   ├──ES5 中的一些擴展
|   ├──ES6：變量 let、const 和塊級做用域
|   ├──變量的解構賦值
|   ├──箭頭函數
|   ├──剩餘參數和擴展運算符
|   ├──字符串、數據和對象的擴展
|   ├──內置對象擴展：Set 數據解構
|   ├──Promise 入門詳解
|   ├──ES7：async 函數詳解
|   └──ES6：Symbol
|──JS 進階
|   ├──var、let、const 的區別
|   ├──數據的賦值
|   ├──JS 開發累積
|   ├──call、apply、bind 的區別
|   ├──this
|   ├──做用域與閉包
|   └──建立對象和繼承
|──前端基本功
|   ├──CSS 基礎練習
|   └──DOM 操做練習
|──Ajax
|   ├──服務器分類及 PHP 入門
|   ├──Ajax 入門和發送 http 請求
|   ├──函數封裝
|   ├──同源和跨域
|   └──模版引擎
|──移動 Web 開發
|   ├──Bootstrap 入門
|   ├──Bootstrap 使用
|   └──Less 詳解
|──Node.js 和數據庫
|   ├──Node.js 介紹
|   ├──Node.js 的特色
|   ├──Node.js 開發環境安裝
|   ├──Node.js 模塊化規範
|   ├──Node.js 內置模塊
|   ├──Node.js 操做 MySQL 數據庫
|   ├──CommonJS
|   ├──ES6
|   ├──JS 模塊化：AMD
|   ├──JS 模塊化：CMD
|   ├──JS 模塊化：ES6
|   ├──KOA2
|   ├──Node.js 代碼舉例
|   ├──WebSocket
|   └──事件驅動和非阻塞機制
|──Vue 基礎
|   ├──指令系統
|   ├──v-on 事件修飾符
|   ├──系統指令（二）
|   ├──舉例：列表功能
|   ├──自定義過濾器
|   ├──自定義按鍵修飾符 & 自定義指令
|   ├──Vue 實例的生命週期函數
|   ├──Vue 中的 Ajax 請求
|   ├──Vue 動畫
|   ├──Vue 組件的定義和註冊
|   ├──Vue 組件之間的傳值
|   ├──Vue-router 路由
|   ├──Vue.js 在開發中的常見寫法累積
|   ├──Vue 開發累積
|   └──Vue 組件
|──React 基礎
|   ├──React 介紹
|   ├──JSX 語法介紹
|   ├──React 組件：生命週期
|   ├──React 組件：常見屬性和函數
|   ├──React 中綁定 this 並給函數傳參的方法
|   ├──React  單向數據綁定
|   ├──React 路由的使用
|   ├──Ant Design 的基本使用
|   ├──AntD 框架的踩坑記錄
|   ├──AntD 框架 upload 組件自定義
|   └──React Native 初識
|──前端面試
|   ├──面試必看
|   ├──面試題累積
|   └──網友面經
|──前端進階
|   ├──代碼規範
|   ├──常見專有名詞
|   ├──數組的常見操做
|   ├──前端監控技術
|   ├──lazyload & 防抖動和節流閥
|   ├──Vue 開發累積
|   └──前端的幾道題目
|──前端綜合
|   ├──2019 Web 前端入門自學路線
|   ├──前端學習分享
|   ├──Express
|   ├──2018 前端日記
|   ├──2019 前端日記
|   ├──2020 前端日記
|   ├──CSS 開發總結
|   ├──Ajax 相關
|   ├──HTML 相關
|   ├──Json 字符串的解析和遍歷
|   ├──Json 相關
|   ├──前端博客推薦
|   ├──前端開發累積
|   ├──前端語錄
|   └──網絡抓包和代理工具：Whistle
└──擴展閱讀
    ├──2020 Web 前端最新導航
    ├──GitHub 項目推薦
    ├──網站推薦
    ├──前端文章推薦
    ├──上海有哪些互聯網大廠
    ├──北京有哪些互聯網大廠
    └──深圳有哪些互聯網大廠

GitHub 地址→https://github.com/qianguyihao/Web

1.2 寓教於樂：Pacman

HG #vol.029 Pacman 是基於 HTML5 的吃豆人遊戲。核心代碼就兩個文件，主程序僅有 1000 行代碼，且代碼有註釋、整潔。對於新手來講是個很好的實踐項目，也能讓你養成閱讀他人代碼的好習慣。

GitHub 地址→https://github.com/mumuy/pacman

1.3 新手關卡：33-js-concepts

HG #vol.031 33-js-concepts 是一個國外知名的 JS 項目，做爲基礎最後一道門檻，它幫你查漏補缺，讓你對每一個 Javascript 開發者應該知道的 33 個概念熟記在心，開啓下一個階段的進階之旅。

GitHub 地址→https://github.com/leonardomso/33-js-concepts

成神第二式：招式變化

2.1 深度乃廣度基礎：Web-Series

HG #vol.028 Web-Series 是小魚乾很喜歡的一名前阿里工程師：王下邀月熊編寫的 Web 全棧開發、工程架構與性能調優。在你熟悉前端基礎概念，製做簡單的例如吃豆人遊戲以後，是時候在上一層樓瞭解下進階的性能調優、工程架構問題。做爲一名十多年開發經驗的前端工程師，在 Web-Series 系列，王下邀月熊致力於探索，如何有效地提高團隊的研發效能，在整個產品迭代的生命週期中都能及時、可靠地完成交付；同時可以控制住系統總體的複雜性，而且不斷地、持續地進行系統的性能與體驗優化。能夠說升職加薪就差這招 [手動狗頭]

GitHub 地址→https://github.com/wx-chevalier/Web-Series

2.2 簡化操做流程：D3.js

HG #vol.031 D3.js 的全稱是（Data-Driven Documents），該庫提供了各類簡單易用的函數，大大簡化了 JavaScript 操做數據的難度。該庫的使用是數據可視化必須掌握的技術。

最重要的一點在於，D3.js 項目自己提供了極度豐富的 demo 供你直接使用，化身作一個「調參工程師」繪製各類酷炫力導圖，呈現各類可視化數據，例如：紅樓夢的人物關係組圖。等你在 demo 中習得基本使用以後，就能夠根據本身的業務需求將任意數據綁定到 DOM 上，或直接操做 DOM完成 W3C DOM API 相關操做，能限制 D3.js 強大的只能是你的想象力。

GitHub 地址→https://github.com/d3/d3

2.3 一應俱全：x-build

HG #vol.040 x-build 是面向小型項目的腳手架工具，經過終端命令最快在幾秒鐘初始化項目目錄。該庫內部集成了 Webpack、Babel、ESLint 等前端經常使用的工具。經過該項目能夠了解腳手架的開發，而且能夠熟悉如何在工具中集成 Webpack 這對自定義腳手架開發頗有幫助。

GitHub 地址→https://github.com/codexu/x-build

成神第三式：問鼎武林

3.1 同設計把酒言歡：next

HG #vol.054 前端工程師的對手之一即是設計師，像素級還原度擋住了多少前端工程師的晉升之路。Next 即是你的闖關寶劍，阿里開源的企業級中後臺 UI 解決方案，致力於解決設計師與前端在工做協同、產品體驗一致性、開發效率方面的問題。就是設計師修改顏色之類的元素以後，能夠生成一個 NPM 主題包，前端拿到這個包就能夠直接還原設計師的設計。Next 真妙 🏄‍♂️

GitHub 地址→https://github.com/alibaba-fusion/next

3.2 得 Chrome 者得天下：chrome-extensions-searchReplace

HG #vol.052 chrome-extensions-searchReplace 一款搜索而且替換文本的谷歌插件，也是一個極佳的插件開發實踐。

GitHub 地址→https://github.com/Summer-andy/chrome-extensions-searchReplacet

最後

本文《GitHub 上適合新手的開源項目》收官篇，你們從這個系列有沒有找到適合本身進階的方向或感興趣的項目呢？若是還有什麼想看的系列能夠留言告訴咱們，也能夠聊聊想對 HG 說的話！