適合 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-searchReplace

最后

本文《GitHub 上適合新手的開源專案》收官篇，大家從這個系列有沒有找到適合自己進階的方向或感興趣的專案呢？如果還有什么想看的系列可以留言告訴我們，也可以聊聊想對 HG 說的話！